javascript - ThreeJs 单击时创建对象/网格

Question

我正在使用 ThreeJS，如何在鼠标单击时创建对象/网格。目前，该对象不是在精确的鼠标 x 和 y 位置上创建的。

    var ge = new THREE.BoxBufferGeometry( 2, 2, 2 );
      ge.scale(2, 2, 2);
      var my = new THREE.MeshBasicMaterial( { 
      map: new THREE.TextureLoader().load( 'crate.gif' )
    } );
    ms = new THREE.Mesh( ge, my );

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    ms.position.x=raycaster.ray.direction.x; 
    ms.position.y=raycaster.ray.direction.y; 
    ms.position.z=raycaster.ray.direction.z;
    scene.add( ms );

Answer 1

我也遇到了同样的问题。值 raycaster.ray.position.(x|y|z) 始终介于 -1 和 1 之间。

经过一些测试，我认为这就是您想要的。必须定义一个方向。您实际上需要创建一个平面对象(而不是网格)。

其工作原理如下:

var vec = raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0, 1, 0)));

这里您需要做的是获取定义平面上的光线交集。飞机无限大且看不见。您还需要告诉飞机它应该指向哪个方向。在本例中，它是 (x=0,y=1,z=0)，这基本上意味着它只是躺在那里并指向上方。

然后它应该适用于:

ms.position.x=vec.x; 
ms.position.y=vec.y; 
ms.position.z=vec.z;

点击后，结果如下:(点击后添加红色框)