如何使用three.js中的按钮选择场景中的对象 [英] How to select object in scene with button in three.js

查看：51 发布时间：2021/9/7 19:06:38 javascript jquery three.js

本文介绍了如何使用three.js中的按钮选择场景中的对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个场景.这个场景有 3 个物体(球体和立方体).在场景的右侧，我有一个 div 元素 (id = "rightMenu").
我想动态地向 rightMenu 添加按钮.其中一个按钮名称为sphere，另一个按钮名称为cube，最后一个为sphere1.
当我单击球体按钮时，场景中的球体高亮显示.
这是我的代码:

<div id="按钮区域">

<div id="WebGL-输出">

我该怎么办?感谢您的帮助.

解决方案

这只是您可以执行此操作的一个选项.

你可以同时在场景中创建一个菜单按钮和一个对象，给它们同一个名字，然后在按钮的click事件中，读取它的名字并查看对于同名的对象.

sceneObjects = [];

当你创建一个对象时，把它推入这个数组:

sceneObjects.push(mesh);

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

function onClick(event) {var name = event.target.name.trim();//获取按钮名称sceneObjects.forEach(function(obj) {//遍历对象数组obj.material.emissive.setRGB(0, 0, 0);//重置为默认值(黑色)if (obj.name == name) obj.material.emissive.setRGB(.5, .5, 0);//高亮});}

这取决于您，您将如何实现对象的突出显示，我只使用自发光颜色.

jsfiddle 示例.

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.

解决方案

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.

这篇关于如何使用three.js中的按钮选择场景中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何使用three.js中的按钮选择场景中的对象 [英] How to select object in scene with button in three.js

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何使用three.js中的按钮选择场景中的对象 [英] How to select object in scene with button in three.js

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭