Z plikiem three.js mogę dołączyć informacje do obiektu, na przykład adresu URL?

Question

Mam pytanie w webgl powiązane z plikiem three.js. Chciałbym dołączyć informacje do obiektu. Na przykład, gdy klikam obiekt, chciałbym pobrać pewne informacje, które są powiązane z obiektem, takie jak adres URL, a następnie uruchomić funkcję wykorzystującą te informacje.

Kod używam na znalezienie obiektu wynosi:

var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, -(event.clientY/window.innerHeight) * 2 + 1, 0.5); 
    projector.unprojectVector(vector, camera); 

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 

    var intersects = raycaster.intersectObjects(objects); 

    intersects[0].object.material.color.setHex(Math.random() * 0xffffff); 

Ostatni wiersz jest jak jestem aktualnie manipulowanie obiekt. Tablica objects to po prostu tablica wszystkich obiektów. Problem polega na tym, że nie wiem wystarczająco dużo o tym, jak działa Raycaster lub intersectObjects, lub o tym, jak powiązać jakiekolwiek informacje z obiektem, aby można było je później przywołać.

Answer 1

Rzeczywiście można ustawić niestandardowe dane użytkownika do obiektu w Three.js. Kluczem jest tutaj Object3D, który jest podstawą dla wszystkich obiektów grafu sceny. Docs mają właściwość o nazwie

Object3D.userData; 

To może być ładowany z przedmiotu do wyboru i gdy klasa RayCaster pobiera swoją przecinają można po prostu przejść bezpośrednio w tym punkcie.

setera podczas Init lub wykonawczego

Object3D.userData = { URL: "http://myurl.com" }; 

Getter zderzenia

window.location = intersects[0].object.userData.URL;