Question

我试图用鼠标点击球体时创建的点创建一个对象。相机在球体内部，我希望将可点击区域映射到球体上。

像https://threejs.org/examples/canvas_interactive_cubes.html

这样的东西

    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
    mouse.z = 0.5;


    raycaster.setFromCamera( mouse, camera );

    var objects = [];
    objects.push(panoVideoMesh);
    panoVideoMesh.material.side = THREE.DoubleSide;

    var intersects = raycaster.intersectObjects( objects, true  );

    if ( intersects.length > 0 ){

        var point = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({  color: 0x00ff00 }));
        point.position.copy(intersects[0].point);
        point.lookAt(camera);
        panoVideoMesh.add(point);
    }

此类工作但添加的网格与鼠标点击不在同一个位置，当您通过单击并拖动场景（它是一个VR场景）来旋转相机时，这些点都在同一架飞机。

任何帮助/线索！？

Answer 1

intersects[0].point位于世界坐标系中，但您添加point作为panoVideoMesh的后代。两个对象的变换混合在一起。您必须直接将point添加到场景中，或者首先将交叉点转换为panoVideoMesh的本地空间。

Three.js点击球体上的点

1 个答案: