Fatal编程技术网
  • javascript/
  • Javascript 如何在three.js中使用按钮选择场景中的对象

Javascript 如何在three.js中使用按钮选择场景中的对象

javascript jquery three.js

Javascript 如何在three.js中使用按钮选择场景中的对象,javascript,jquery,three.js,Javascript,Jquery,Three.js,我有一场戏。这个场景有3个对象（球体和立方体）。在场景右侧，我有一个div元素（id=“rightMenu”）。 我想动态地向rightMenu添加按钮。一个按钮名为sphere，另一个按钮名为cube，最后一个按钮名为sphere1。 当我单击球体按钮时，场景中的球体将高亮显示。 这是我的密码： <body> <div id="Button-area"> </div> <div id="WebGL-output"> </div>

我有一场戏。这个场景有3个对象（球体和立方体）。在场景右侧，我有一个div元素（id=“rightMenu”）。
我想动态地向rightMenu添加按钮。一个按钮名为sphere，另一个按钮名为cube，最后一个按钮名为sphere1。
当我单击球体按钮时，场景中的球体将高亮显示。
这是我的密码：

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


函数init（）{
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
setClearColor（新的三种颜色（0xEEEE，1.0））；
renderer.setSize（window.innerWidth、window.innerHeight）；
var投影仪=新的三个投影仪（）；
文件。添加的文件列表（“mousedown”，onDocumentMouseDown，false）；
var cubeGeometry=新的三盒几何体（4,4,4）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff0000}）；
var cube=新的三网格（立方计量法、立方材料）；
立方体位置集（-9,3,0）；
场景.添加（立方体）；
var比色法=新的三种比色法（4,20,20）；
var sphereMaterial=new THREE.MeshLambertMaterial（{color:0x7777ff}）；
var sphere=新的三个网格（球面测量法、球面材料）；
球面位置集（20,0,2）；
场景。添加（球体）；
var sphere2Geometry=新的三个。球化法（4,20,20）；
var sphere2Material=new THREE.MeshLambertMaterial（{color:0x77fff}）；
var sphere2=新的三点网格（sphere2几何体、sphere2材质）；
球体2。位置。设置（40，-3,4）；
场景。添加（sphere2）；
摄像机位置设置（-30,40,30）；
摄像机。注视（场景。位置）；
var环境光=新的三个环境光（0x0c）；
场景。添加（环境光）；
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（-40,60，-10）；
场景。添加（聚光灯）；
document.getElementById（“WebGL输出”）.appendChild（renderer.doElement）；
render（）；
函数render（）{
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
var投影仪=新的三个投影仪（）；
函数onDocumentMouseDown（事件）{
var vector=new THREE.Vector3（（event.clientX/window.innerWidth）*2-1，-（event.clientY/window.innerHeight）*2+1，0.5）；
矢量=矢量。取消投影（摄像机）；
var raycaster=new THREE.raycaster（camera.position，vector.sub（camera.position.normalize（））；
var intersects=raycaster.intersectObjects（[sphere，sphere2，cube]）；
如果（相交长度>0）{
相交[0]。object.material.transparent=true；
相交[0]。object.material.opacity=0.1；
}
}
}
window.onload=init（）；
我该怎么办？谢谢您的帮助。

这只是您可以选择的方法

您可以同时在场景中创建菜单按钮和对象，赋予它们相同的名称，然后在按钮的
事件中，读取其名称并查找具有相同名称的对象


sceneObjects = [];


创建对象时，将其推入此数组：


sceneObjects.push(mesh);


然后，当您单击按钮时，您将查找对象：


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


这取决于你，你将如何实现突出显示的对象，我用的只是发射颜色


示例。
怎么样？在Three.js网站上的许多例子都使用这个工具。实际上，在我的实际程序中，我有1000多个对象。它能应用于这么多对象吗@是的，这是我想要的。非常感谢你。这对我来说是个大问题。谢谢：）