javascript - × TypeError: Cannot read property 'center' of undefined from three.module.js

Question

我已经编写了几个月的代码，并尝试了解更多有关three.js/react 的内容。我目前正在学习 [https://redstapler.co/three-js-realistic-rain-tutorial/] 的教程，我正在创建一个逼真的雨背景。教程很棒，到目前为止一切都很好，直到我开始实施下雨。

在教程中，他使用

 rainGeo = new THREE.Geometry();
      for(let i=0;i<rainCount;i++) {
        rainDrop = new THREE.Vector3(
          Math.random() * 400 -200,
          Math.random() * 500 - 250,
          Math.random() * 400 - 200
        );
        rainDrop.velocity = {};
        rainDrop.velocity = 0;
        rainGeo.vertices.push(rainDrop);
      }
      rainMaterial = new THREE.PointsMaterial({
        color: 0xaaaaaa,
        size: 0.1,
        transparent: true
      });
      rain = new THREE.Points(rainGeo,rainMaterial);
      scene.add(rain);

我收到一个错误，即 Geometry 没有从第 1 行的 Three.js 导出。所以我发现它已切换到 BufferGeometry。我将其切换为 new THREE.BufferGeometry(); 这似乎摆脱了以前的错误。但是，现在我收到了新错误 无法读取 node_modules/three/build/three.module.js:4534 中未定义的属性“中心”

我只是不知道从这里去哪里。我目前拥有的是：

    this.rainCount = 15000
    this.rainGeo = []
    this.geoR = new THREE.BufferGeometry();
    for( let i=0; i< this.rainCount; i++) {
      this.rainGeo.push(
        new THREE.Vector3(
          Math.random() * 400 - 200,
          Math.random() * 400 - 250,
          Math.random() * 400 - 200
        )
        ) 
    };

    this.rainMaterial = new THREE.PointsMaterial({
      color: 0xaaaaaa,
      size: 0.1,
      transparent: true
    })
    this.rain = new THREE.Points(this.rainGeo, this.rainMaterial);
    this.scene.add(this.rain)
    

`

`

标签： javascriptreactjsthree.js

Answer 1

现在，您正在创建一个sTHREE.Points数组Vector3作为第一个参数的实例。这是错误的，因为需要一个实例BufferGeometry。尝试这个：

const count = 15000;
const points = [];

for(let i=0; i< count; i++) {
    points.push(
        new THREE.Vector3(
          Math.random() * 400 - 200,
          Math.random() * 400 - 250,
          Math.random() * 400 - 200
        )
    ) 
};

this.geoR = new THREE.BufferGeometry().setFromPoints(points);

this.rainMaterial = new THREE.PointsMaterial({
    color: 0xaaaaaa,
    size: 0.1,
    transparent: true
});

this.rain = new THREE.Points(this.geoR, this.rainMaterial);
this.scene.add(this.rain)