Question

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

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

NUnit for .Net Framework

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;
}

three.js-如何有效地产生恒星

0 个答案: