Блог

Я новичок в ТРЕХ.Мы с 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 lt; 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);  

Ошибка возникает при инициализации камеры. Ваше соотношение сторон равно

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 lt; 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(); 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"gt;lt;/scriptgt;  lt;canvas id="canvas"gt;lt;/canvasgt;