为什么所有粒子都位于 THREE.JS 中 x 轴的中心

Question

我是 THREE.JS 的新手，我正在尝试弄清楚如何制作粒子系统，但我无法让它正常工作。正如标题所说，所有的粒子都位于X轴的中心，看来Y和Z没问题。

结果图片：https://i.stack.imgur.com/xUuAn.png 我想要实现的目标：https://i.stack.imgur.com/vA0tL.jpg

代码：

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth - 10 / window.innerHeight,
      1,
      1000
    );

    camera.position.z = 300;

    const ambientLight = new THREE.AmbientLight(
      0xFFFFFF
    );

    const particleBufferGeometry = new THREE.BufferGeometry();
    const positionArray = [];

    for (let i = 0; i < 10000; i++) {
      positionArray.push((Math.random() * 2 - 1) * 200);
      positionArray.push((Math.random() * 2 - 1) * 200);
      positionArray.push((Math.random() * 2 - 1) * 200);
    }

    particleBufferGeometry.setAttribute("position", new THREE.Float32BufferAttribute(positionArray, 3));

    const particlePointsMaterial = new THREE.PointsMaterial({
      size: 0.1
    });

    const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial);

    const renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true,
      canvas: canvasRef.current!
    });

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(0xFFFFFF, 0);
    renderer.setSize(
      window.innerWidth - 10,
      window.innerHeight
    );

    scene.add(ambientLight, particlePoints);
    
    renderer.render(scene, camera);

Answer 1

初始化相机时出现错误。你的宽高比是

window.innerWidth - 10 / window.innerHeight

示例： 1920 - 10 / 1080 = 1919.99（纵横比错误）

但由于运算顺序，它首先计算除法，因此 10 / height 发生在减法之前。只要确保你正确使用括号，问题就会得到解决：

(window.innerWidth - 10) / window.innerHeight

示例：(1920 - 10) / 1080 = 1.76（正确的纵横比）

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    45,
    (window.innerWidth - 10) / window.innerHeight,
    1,
    1000
);
camera.position.z = 300;

const particleBufferGeometry = new THREE.BufferGeometry();
const positionArray = [];

for (let i = 0; i < 10000; i++) {
    positionArray.push((Math.random() * 2 - 1) * 200);
    positionArray.push((Math.random() * 2 - 1) * 200);
    positionArray.push((Math.random() * 2 - 1) * 200);
}

particleBufferGeometry.setAttribute("position", new THREE.Float32BufferAttribute(positionArray, 3));

const particlePointsMaterial = new THREE.PointsMaterial({
    size: 0.1
});

const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial);

const canvasRef = document.querySelector("#canvas");

const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: canvasRef
});

renderer.setSize(window.innerWidth - 10, window.innerHeight);

scene.add(particlePoints);

function animate() {
  particlePoints.rotation.y += 0.01;
  renderer.render(scene, camera);

  requestAnimationFrame(animate);
}

animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script>

<canvas id="canvas"></canvas>

为什么所有粒子都位于 THREE.JS 中 x 轴的中心

Why are all particles positioned in the center on x axis in THREE.JS

html

javascript

css

three.js