javascript - 在 ThreeJS 中首次添加几何

Question

我正在尝试使用 ThreeJS 编写一个非常简单的脚本，该脚本会在您点击的位置生成一个点。

这是加点的函数:

function addPoint(coord){
  var geometry = new THREE.BufferGeometry();
  var vertices = [];

  const sprite = new THREE.TextureLoader().load( 'textures/disc.png' );
                
  vertices.push( coord.x, coord.y, coord.z );

  geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

  var material = new THREE.PointsMaterial( { size: 1, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } );
                material.color.setHSL( 1.0, 0.3, 0.7 );

  const particles = new THREE.Points( geometry, material );
  //scene.add( particles );
  group.add( particles );
}

但它只是将创建的第一个点添加到场景中。奇怪的是，在我放置生成随机点的原始示例的同一个函数中，它不仅添加了所有生成的顶点，而且每次单击时它都有效

for ( let i = 0; i < 10000; i ++ ) {

  const x = 2000 * Math.random() - 1000;
  const y = 2000 * Math.random() - 1000;
  const z = 2000 * Math.random() - 1000;

  vertices.push( x, y, z );
}

我这辈子做错了什么，值得这种不合逻辑的工作？

谢谢!

Answer 1

为了解决这个问题，我改变了点击的逻辑:我创建了一个添加到“对象”数组的平面

const geometry = new THREE.PlaneGeometry( 100, 100 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
objects.push(plane);

然后我从平面的交点得到坐标

var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
console.log(intersects);

for(var int of intersects){
  addPoint( int.point );
}

就这样