three.js - three.js - 如何高效地生成星星

Question

我是尝试实现夜空的three.js 的新手，对于星星，我正在生成500 个6x6 段的球体，每个球体具有随机颜色和随机球坐标，生成后我正在动画整个场景的旋转。

有时这会冻结，所以我认为我的方法效率低下 - 我如何以有效的方式以编程方式生成星星？据我了解，更简单的解决方案可能是大外球内侧的额外纹理，但在这种情况下，我需要获得额外的资产，而且这可能非常平坦

function randomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  35,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

var renderer = new THREE.WebGLRenderer({
  antialias: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let spheres = [];
for (let i = 1; i < 300; i++) {
  let geometry = new THREE.SphereGeometry(0.02 * randomArbitrary(0.5, 1), 6, 6);
  let material = new THREE.MeshBasicMaterial({
    color: new THREE.Color(1, randomArbitrary(190, 220) / 255, Math.round(Math.random()))
  });

  let sphere = new THREE.Mesh(geometry, material);
  scene.add(sphere);
  spheres.push(sphere);
  sphere.position.setFromSpherical(new THREE.Spherical(5 + 5 * Math.random(), 2 * Math.PI * Math.random(), 2 * Math.PI * Math.random()))
}
scene.rotation.x = 0.2;
scene.rotation.z = 0.6;
camera.position.z = 5;
var axesHelper = new THREE.AxesHelper(3);
scene.add(axesHelper);

var animate = function() {
  requestAnimationFrame(animate);
  scene.rotation.y += 0.001;
  scene.rotation.z -= 0.001;

  renderer.render(scene, camera);
};

animate();

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

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

标签： three.js