粒子球体在 Three.js 中仅显示为直线

Question

我正在学习通过在我的 React 应用程序中创建粒子球体来使用 THREE.js 库。引用这个项目，我已经成功获得有点开始，但有点走进了死胡同。

出于某种原因，尽管我的所有代码本质上都是相同的 - 除了一些已弃用的方法被换出之外 - THREE 每次都会呈现一条奇怪的直线。

在看了几个小时的文档并尝试学习这个组件的各个方法之后，我仍然摸不着头脑。

这就是我所拥有的（可以在此处查看实时版本 ）：

let camera;
let renderer;
let scene;
const vector3D = new THREE.Vector3();

// Get constraints of the canvas.
const getConstraints = () => {
  const canvas = document.getElementById("canvas");
  const { width, height } = canvas.getBoundingClientRect();
  // Get attribute-set width and height - defaulting to computed constraints.
  return [canvas.width ?? width, canvas.height ?? height];
};
// Retrieve a random point in the sphere for a particle to be set at.
const getRandomPointInSphere = radius => {
  const x = THREE.MathUtils.randFloat(-1, 1);
  const y = THREE.MathUtils.randFloat(-1, 1);
  const z = THREE.MathUtils.randFloat(-1, 1);

  const normaliseRatio = 1 / Math.sqrt(x * x + y * y + z * z);

  vector3D.x = x * normaliseRatio * radius;
  vector3D.y = y * normaliseRatio * radius;
  vector3D.z = z * normaliseRatio * radius;

  return vector3D;
};

// Initialisation methods.
const initScene = () => {
  const [canvasWidth, canvasHeight] = getConstraints();
  // Renderer initialisation.
  renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById("canvas"),
    antialias: true, alpha: true,
  });
  renderer.setSize(canvasWidth, canvasHeight);
  renderer.setPixelRatio(window.devicePixelRatio);

  // Scene initialisation.
  scene = new THREE.Scene();

  // Camera initialisation.
  camera = new THREE.PerspectiveCamera(45, canvasWidth, canvasHeight, 1, 1000);
  camera.position.set(100, 0, 100);
};
const initPoints = () => {
  const geometry = new THREE.BufferGeometry();
  const positions = [];

  const particleSize = 0.2;
  const particleColor = 0x1826e0; // Dark blue 
  const particleCount = 50000 / (particleSize * 10);

  for(let i = 0; i < particleCount; i++){
    let vertex = getRandomPointInSphere(50);
    positions.push(vertex.x, vertex.y, vertex.z);
  }

  geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));

  const material = new THREE.PointsMaterial({ size: particleSize, color: particleColor });
  const particles = new THREE.Points(geometry, material);
  scene.add(particles);
};

initScene();
initPoints();
renderer.render(scene, camera);

我对三个（以及一般的画布）非常陌生，因此感谢所有帮助。

Answer 1

首先，相机实例化的行必须是这样的：camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);，其中有斜杠而不是逗号。

然后，相机必须查看场景的中心，因此 camera.lookAt(scene.position);

具有固定代码的片段：

body{
  overflow: hidden;
  margin: 0;
}

canvas{
  border: 1px solid red;
}

<canvas id="canvas" width="400" height="400" />
<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]";
// THREE variables
let camera;
let renderer;
let scene;
let v3 = new THREE.Vector3();
// Get constraints of the canvas.
const getConstraints = () => {
  const canvas = document.getElementById("canvas");
  const { width, height } = canvas.getBoundingClientRect();
  // Get attribute-set width and height - defaulting to computed constraints.
  return [canvas.width ?? width, canvas.height ?? height];
};
// Retrieve a random point in the sphere for a particle to be set at.

const getRandomPointInSphere = radius => {
  v3.randomDirection();

  const normaliseRatio = 1 / Math.hypot(v3.x, v3.y, v3.z);

  v3.setLength(radius * normaliseRatio);

  return v3;
};

// Initialisation methods.
const initScene = () => {
  const [canvasWidth, canvasHeight] = getConstraints();
  // Renderer initialisation.
  renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById("canvas"),
    antialias: true, alpha: true,
  });
  renderer.setSize(canvasWidth, canvasHeight);
  renderer.setPixelRatio(window.devicePixelRatio);

  // Scene initialisation.
  scene = new THREE.Scene();

  // Camera initialisation.
  camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);
  camera.position.set(100, 0, 100);
  camera.lookAt(scene.position);
};
const initPoints = () => {
  const geometry = new THREE.BufferGeometry();
  const positions = [];

  const particleSize = 0.2;
  const particleColor = 0x1826e0; // Dark blue 
  const particleCount = 50000 / (particleSize * 10);

  for(let i = 0; i < particleCount; i++){
    let vertex = getRandomPointInSphere(50);
    positions.push(vertex.x, vertex.y, vertex.z);
  }

  geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));

  const material = new THREE.PointsMaterial({ size: particleSize, color: particleColor });
  const particles = new THREE.Points(geometry, material);
  scene.add(particles);
};

initScene();
initPoints();
renderer.render(scene, camera);
</script>