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

问题

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.

回答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.

来源：https://stackoverflow.com/questions/42987818/how-to-select-object-in-scene-with-button-in-three-js

标签

javascript

jquery

three.js