为什么 ThreeJS applyMatrix 会导致我的控制台变得疯狂并使我的浏览器崩溃？

Question

这是基于我正在开发的代码笔，我简化了代码以处理我需要的特定部分。我以前没有使用过 applyMatrix 和 Matrix4。由于某种原因，使用这些函数的部分的信息显示在我的控制台中并导致我的浏览器崩溃。我不完全明白发生了什么事。我可以猜测这些值正在不间断地重新分配，但我在代码笔中没有看到解决方案，即使这个问题不在其中。这是我的代码和 codepen 的链接以供参考。 https://codepen.io/Mamboleoo/pen/Bppdda?editors=0010 这个代码笔超出了我的范围，我正在努力更好地掌握它。

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.setClearColor(0x000000);

const spotLight = new THREE.SpotLight(0xFFFFFF);
scene.add(spotLight);
spotLight.position.set(0, 0, 100);

spotLight.castShadow = true;
spotLight.angle = 0.2;
spotLight.intensity = 0.2;

camera.position.set(0.27, 0, 500);

//Black center
var geom = new THREE.SphereGeometry(100, 32, 32);
var mat = new THREE.MeshPhongMaterial({
  color: 0x000000
});
var core = new THREE.Mesh(geom, mat);
scene.add(core);

var geom = new THREE.SphereBufferGeometry(1, 15, 15);
var mat = new THREE.MeshBasicMaterial({
  color: 0xffffff
});
var atoms = new THREE.Object3D();
scene.add(atoms);
for (var i = 0; i < 150; i++) {
  var nucleus = new THREE.Mesh(geom, mat);
  var size = Math.random() * 6 + 1.5;
  nucleus.speedX = (Math.random() - 0.5) * 0.08;
  nucleus.speedY = (Math.random() - 0.5) * 0.08;
  nucleus.speedZ = (Math.random() - 0.5) * 0.08;
  nucleus.applyMatrix(new THREE.Matrix4().makeScale(size, size, size));
  nucleus.applyMatrix(new THREE.Matrix4().makeTranslation(0, 100 + Math.random() * 10, 0));
  nucleus.applyMatrix(new THREE.Matrix4().makeRotationX(Math.random() * (Math.PI * 2)));
  nucleus.applyMatrix(new THREE.Matrix4().makeRotationY(Math.random() * (Math.PI * 2)));
  nucleus.applyMatrix(new THREE.Matrix4().makeRotationZ(Math.random() * (Math.PI * 2)));
  atoms.add(nucleus);
}

function updateNucleus(a) {
  for (var i = 0; i < atoms.children.length; i++) {
    var part = atoms.children[i];
    part.applyMatrix(new THREE.Matrix4().makeRotationX(part.speedX));
    part.applyMatrix(new THREE.Matrix4().makeRotationY(part.speedY));
    part.applyMatrix(new THREE.Matrix4().makeRotationZ(part.speedZ));
  }
}

//Create scene
var necks = [];
var cubesObject = new THREE.Object3D();
scene.add(cubesObject);


function animate(a) {
    requestAnimationFrame( animate );
    updateNucleus(a);
    renderer.render(scene,camera);
};

animate();

window.addEventListener('resize', function(){
    camera.aspect = window.innerWidth / this.window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
})

Answer 1

part.applyMatrix(new THREE.Matrix4().makeRotationX(part.speedX));

codepen 使用旧版本的 Three.js (r79)。由于 API 的某些部分已被重命名，浏览器每帧都会报告弃用警告。在最新版本 r138 中，新代码应如下所示：

part.applyMatrix4(new THREE.Matrix4().makeRotationX(part.speedX));

此外，建议您不要在动画循环中创建 Matrix4 和其他类的实例。在循环之外创建对象并重用它们。

const _matrix = new THREE.Matrix4();
function updateNucleus(a) {
  for (var i = 0; i < atoms.children.length; i++) {
    var part = atoms.children[i];
    part.applyMatrix4(_matrix.makeRotationX(part.speedX));
    part.applyMatrix4(_matrix.makeRotationY(part.speedY));
    part.applyMatrix4(_matrix.makeRotationZ(part.speedZ));
  }
}