Question

我设置了这些点的颜色，我希望能够每隔0.5秒将其中一些点随机更改为白色。

  this.geom = new THREE.SphereBufferGeometry(6, 350, 90);
  this.colors = [];

  this.color = new THREE.Color();
  this.colorList = ['red','blue','pink'];
  for (let i = 0; i < this.geom.attributes.position.count; i++) {
    this.color.set(this.colorList[THREE.Math.randInt(0, this.colorList.length - 1)]);
    this.color.toArray(this.colors, i * 3);
  }
  this.geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(this.colors), 3));

要在对象加载后更改颜色，我在动画循环中调用一个函数。这有效，但它重新加载了所有点，因此非常慢。如何更改此功能只是更新颜色，以便页面不冻结？我只想要大约30个点随机变白。

this.colorList = ['white', 'pink', 'blue', 'red'],

updateColor() {
  for (let i = 0; i < this.geom.attributes.position.count; i++) {
    this.color.set(this.colorList[THREE.Math.randInt(0, this.colorList.length - 1)]);
    this.color.toArray(this.colors, i * 3);
  }
  this.geom.attributes.color.needsUpdate = true;
  this.geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(this.colors), 3));
}

Answer 1

只是一个如何做到这一点的概念：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 12);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geom = new THREE.SphereBufferGeometry(6, 350, 90);
var colors = [];

var color = new THREE.Color();
var colorList = ['red', 'purple', 'pink'];
for (let i = 0; i < geom.attributes.position.count; i++) {
  color.set(colorList[THREE.Math.randInt(0, colorList.length - 1)]);
  color.toArray(colors, i * 3);
}
geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
geom.addAttribute('colorRestore', new THREE.BufferAttribute(new Float32Array(colors), 3));

var points = new THREE.Points(geom, new THREE.PointsMaterial({
  vertexColors: THREE.VertexColors,
  size: 0.125
}));
scene.add(points);

var usedIndices = [];
var pointsUsed = 300;

function changeColors() {

  for (let i = 0; i < usedIndices.length; i++) {
    let idx = usedIndices[i];
    geom.attributes.color.copyAt(idx, geom.attributes.colorRestore, idx); // restore the color of a point
  }

  for (let i = 0; i < pointsUsed; i++) {
    let idx = THREE.Math.randInt(0, geom.attributes.color.count - 1);
    geom.attributes.color.setXYZ(idx, 1, 1, 1); // set point's color to white
    usedIndices[i] = idx; // save the index of the point
  }

  geom.attributes.color.needsUpdate = true;
}

setInterval(changeColors, 500);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

用three.js随机改变点的颜色

1 个答案: