BufferGeometry로 Geometry 만들기 2

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

window.addEventListener("load", function () {
  init();
});

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

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

  document.body.appendChild(renderer.domElement);

  const scene = new THREE.Scene();

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

  camera.position.z = 5;

  new OrbitControls(camera, renderer.domElement);

  const geometry = new THREE.BufferGeometry();

  const count = 10000;
  // Float32Array 생성할 아이템 인자를 전해주기
  // x,y,z를
  const positions = new Float32Array(count * 3);

  for (let i = 0; i < count; i++) {
    // positions[i * 3] = Math.random() - 0.5; // -0.5~ 1.5
    positions[i * 3] = THREE.MathUtils.randFloatSpread(10);
    positions[i * 3 + 1] = THREE.MathUtils.randFloatSpread(10);
    positions[i * 3 + 2] = THREE.MathUtils.randFloatSpread(10);
  }

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

  const material = new THREE.PointsMaterial({
    color: 0xccaaff,
    size: 0.01,
  });

  const points = new THREE.Points(geometry, material);

  scene.add(points);

  render();

  function render() {
    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  function handleResize() {
    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

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

    renderer.render(scene, camera);
  }

  window.addEventListener("resize", handleResize);
}

• BufferGeometry는 사실상 Three.js의 모든 Geometry들을 구성하는 방식으로, BufferAttributes라는 데이터 배열들의 집합으로 구성된다.
• randFloatSpread ( range : Float ) : Float
  Random float in the interval [- range / 2, range / 2].