three.js 3d models as hyperlink

Question

I'm trying to figure out a way to use a 3D model created with Three.js as a hyperlink. In other words, if I click on a cube (a THREE.CubeGeometry), I want another page to open.

For instance, in this threejs.org example,

how can I change it, so that instead of making little dots on the boxes, clicking on the boxes would open another page, like a hyperlink?

Answer 1

One way to achieve it will be to associate custom userData(URL) with every cube while its being created.

So here is a sample code how we can put data in cubes while they are being generated(in jsfiddle similar logic is used between line 25-63)

var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
            color: Math.random() * 0xffffff }));  

object.userData = { URL: "http://stackoverflow.com"};

Now here we use a method called raycasting to detect mouse click, so in principal when the mouse is clicked, we cast a ray(invisible) in the plane perpendicular to the click and we capture all the objects that the ray intersected.

Then we retrieve the first object from the list of intersected objects because that will be near most the screen

To better understand raycasting and object picking refer to this tutorial.

Now while creating the cubes we already inserted the data so we can simply retrieve(URL) it from the intersected cube and redirect the user to that page.

The sample code will be something like this(at line number 95 in the fiddle )

if (intersects.length > 0) {
        window.open(intersects[0].object.userData.URL);
    }

Here us a working jsfille hoping it helps

JSFiddle Link

Answer 2

In this case, 3Dink.js is useful. It is a wrapper library of three.js for WebGL that is enabled to make 3D hyperlinks easily.

In the shortest case, It can realize click and light emission in 3 lines.

DDDINK.addURL(object, "https://www.npmjs.com/package/3dink");
DDDINK.readRendererObj( renderer, scene, camera );
DDDINK.domEvent.addFnc();

Please browse it's repository. https://github.com/takashift/3Dink.js

Answer 3

You can do it by modifying this function:

function onDocumentMouseDown( event ) {

    // ......

    if ( intersects.length > 0 ) {

        switch(intersects[0].object) {
            case google_object:
                window.open('http://google.com');
                break;
            case yahoo_object:
                window.open('http://yahoo.com');
                break;
        } 

    }

    // ......
}