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 );
}

我在生活中做错了什么，才会遭受这种不合逻辑的工作？

谢谢！

- rikicecchi

Answer 1

为了解决这个问题，我改变了点击的逻辑：我创建了一个飞机并将其添加到“objects”数组中。

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 );
}

那就这样了

- rikicecchi

Answer 2

您当前的点大小（1）可能太小了，所以您看不到它们。此外，请记住您无法调整几何体的大小。这意味着如果您创建了缓冲区属性，则无法在之后推送超过缓冲区大小的其他数据。这意味着您始终需要使用足够的大小创建您的缓冲区，并通过 BufferGeometry.drawRange() 管理应该呈现哪个几何体部分。

请尝试以下代码：

let camera, scene, renderer;

init();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 2000;

  scene = new THREE.Scene();

  //

  const geometry = new THREE.BufferGeometry()
  const vertices = [];

  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);
  }

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

  //

  const sprite = new THREE.TextureLoader().load('https://threejs.org/examples/textures/sprites/disc.png');

  const material = new THREE.PointsMaterial({
    size: 50,
    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);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setAnimationLoop(animate);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  renderer.render(scene, camera);

}

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.133.1/build/three.min.js"></script>

- Mugen87