How to select object in scene with button in three.js

Question

I have a scene. And this scene has 3 objects(spheres and cube). On the right of the scene, I have a div element (id = "rightMenu").
I want to add buttons to rightMenu dynamically. One of the button name sphere the other button name is cube and last one is sphere1.
And when I click the sphere button, the sphere in the scene is highlighting.
Here is my code:

<body>

<div id="Button-area">
</div>
<div id="WebGL-output">
</div>
    <script type="text/javascript">
function init() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);

    var projector = new THREE.Projector();
    document.addEventListener('mousedown', onDocumentMouseDown, false);

    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.set(-9,3,0);
    scene.add(cube);

    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(20,0,2);
    scene.add(sphere);

    var sphere2Geometry = new THREE.SphereGeometry(4, 20, 20);
    var sphere2Material = new THREE.MeshLambertMaterial({color: 0x77fff});
    var sphere2 = new THREE.Mesh(sphere2Geometry, sphere2Material);
    sphere2.position.set(40,-3,4);
    scene.add(sphere2);

    camera.position.set(-30,40,30);
    camera.lookAt(scene.position);

    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
    scene.add(ambientLight);
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 60, -10);
    scene.add(spotLight);

    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    render();

    function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);

    }

    var projector = new THREE.Projector();

    function onDocumentMouseDown(event) {

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

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

        var intersects = raycaster.intersectObjects([sphere, sphere2, cube]);

        if (intersects.length > 0) {
            intersects[0].object.material.transparent = true;
            intersects[0].object.material.opacity = 0.1;
        }
      }

    }
    window.onload = init();   
    </script>
</body>

How can I do? Thanks for your help.

How about dat.gui? many examples on Three.js website use this tool. — Craig.Li
– Craig.Li, Commented Mar 24, 2017 at 1:18
Actually, in my real program, I have more than 1000 object. Can it be applied to so many objects? @Craig.Li — Şeyma Yaman
– Şeyma Yaman, Commented Mar 24, 2017 at 9:09

prisoner849 · Accepted Answer · 2017-03-24 10:29:01Z

1

This is just an option how you can do this.

You can create a menu button and an object in the scene at the same time, giving both of them the same name and then, in the click event of the button, read its name and look for the object with the same name.

sceneObjects = [];

when you create an object, push it in this array:

sceneObjects.push(mesh);

and then, when you click the button, you will look for the object:

function onClick(event) {
  var name = event.target.name.trim(); // get the name of the button
  sceneObjects.forEach(function(obj) { // loop through array of objects
    obj.material.emissive.setRGB(0, 0, 0); // reset to default (black)
    if (obj.name == name) obj.material.emissive.setRGB(.5, .5, 0); // highlighting
  });
}

It's up to you, how you will realize highlighting of objects, I used just emissive color.

jsfiddle example.

answered Mar 24, 2017 at 10:29

prisoner849

17.7k4 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Şeyma Yaman Over a year ago

Yes, this is I want. Thank you very much. This was very big problem for me. Thank you :)

Collectives™ on Stack Overflow

How to select object in scene with button in three.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related