I have a webgl question related to three.js. I would like to attach information to an object. For instance, when I click on an object, I would like to retrieve some information that's tied to the object, like a URL, and then run a function using that information.

The code I'm using for finding the object is:

    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);

The last line being how I'm currently manipulating the object. The array objects is simply an array of all of the objects. The issue is I don't know enough about how Raycaster or intersectObjects works, or enough about how to tie any information to an object so it can be recalled later.

I have a webgl question related to three.js. I would like to attach information to an object. For instance, when I click on an object, I would like to retrieve some information that's tied to the object, like a URL, and then run a function using that information.

The code I'm using for finding the object is:

    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);

The last line being how I'm currently manipulating the object. The array objects is simply an array of all of the objects. The issue is I don't know enough about how Raycaster or intersectObjects works, or enough about how to tie any information to an object so it can be recalled later.

• javascript
• three.js
• webgl

1 Answer 1

indeed you can set custom user data to an object in Three.js. The key here is the Object3D which is the basis for all scene graph objects. The docs have a property called

Object3D.userData; 

This can be loaded with an object of your choice and when the Raycaster class retrieves your intersect you can simply access it directly at that point.

Setter during init or runtime

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

Getter on Collision

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