Javascript 三个可点击的对象

我在three.js中创建了两个3d对象“网格”。 我想将单击事件添加到这些对象中，这样当我单击其中一个对象时，它会按比例放大，当我单击另一个对象时，它会旋转

我尝试了这个方法向一个对象添加一个点击事件，但它不起作用

<script src='threex.domevent.js'> </script>
<script>

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 1, 1000);
        camera.position.z = 100;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        cube.addEventListener( 'click',function(){cubeScale()} , false );

        function cubeScale()
            {
            cube.scale.x *= 20;
            }


        var render = function () {
            requestAnimationFrame(render);
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        };

        render();

    </script>

var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机（20，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=100；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的三立方测量法（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
addEventListener（'click'，function（）{cubeScale（）}，false）；
函数cubeScale（）
{
立方体比例x*=20；
}
var render=函数（）{
请求动画帧（渲染）；
立方体旋转y+=0.1；
渲染器。渲染（场景、摄影机）；
};
render（）；

您绝对需要实现raycaster来选择/单击/拾取three.js中的特定对象。我已经在我的一个项目中使用three.js和raycaster针对collada模型实现了它。以下链接可帮助您参考：

---

您可以使用

pickingRay

使用正交摄影机执行单击，如下代码所示：

var vector=new THREE.Vector3(
（event.clientX/window.innerWidth）*2-1，
-（event.clientY/window.innerHeight）*2+1,0.5）；
var rayCaster=投影仪。pickingRay（矢量、相机）；
var intersectedObjects=rayCaster.intersectObjects（scene.children，true）；

但是，如果要在透视相机上执行单击操作，则必须使用

unprojectVector

执行单击操作，如下所示：

var向量=新的三个向量3（
（event.clientX/window.innerWidth）*2-1，
-（event.clientY/window.innerHeight）*2+1，
0.5 );
var rayCaster=投影仪。未投影向量（向量，相机）；
var intersectedObjects=rayCaster.intersectedObjects（对象）；

您可以使用此事件管理器

看到这个了吗

从“三”导入{场景、透视摄影机、WebGLRenderer、网格、BoxGeometry、MeshBasicMaterial}；
从'three.Interaction'导入{Interaction}；
const renderer=new-WebGLRenderer（{canvas:canvassement}）；
const scene=新场景（）；
常量摄影机=新透视摄影机（60，宽/高，0.1100）；
//新建一个交互，然后您可以使用自由样式添加交互事件
常量交互=新交互（渲染器、场景、摄影机）；
常量立方体=新网格(
新的BoxGeometry（1,1,1），
新的MeshBasicMaterial（{color:0xffffff}），
);
场景.添加（立方体）；
cube.cursor='pointer'；
关于（'click'，函数（ev）{}）；
on（'touchstart'，函数（ev）{}）；
on（'touchcancel'，函数（ev）{}）；
on（'touchmove'，function（ev）{}）；
on（'touchend'，function（ev）{}）；
on（'mousedown'，function（ev）{}）；
on（'mouseout'，函数（ev）{}）；
on（'mouseover'，function（ev）{}）；
on（'mousemove'，function（ev）{}）；
on（'mouseup'，function（ev）{}）；
//等等。。。
/**
*您还可以在父节点或任何显示树节点上侦听，
*源事件将随显示树一起出现。
*您可以通过调用ev.stopPropagation函数来停止气泡。
*/
scene.on（'touchstart'，ev=>{
控制台日志（ev）；
})
场景。在（'touchmove'，ev=>{
控制台日志（ev）；
})

请参见除此链接之外的第一个链接：“帮助了我很多。