为什么 threeJS applyMatrix 导致我的控制台发疯并使我的浏览器崩溃？

Question

这是基于我正在研究的代码笔，我简化了代码以处理我需要的特定部分。我以前没有使用过 applyMatrix 和 Matrix4。出于某种原因，使用这些函数的部分的信息显示在我的控制台中并导致我的浏览器崩溃。我不完全明白发生了什么。我可以猜测这些值正在不停地重新分配，但我没有在 codepen 中看到它的解决方案，即使这个问题不在其中。这是我的代码和codepen的link以供参考。 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));
  }
}

为什么 threeJS applyMatrix 导致我的控制台发疯并使我的浏览器崩溃？

Why is threeJS applyMatrix causing my console to go crazy and crash my browser?

javascript

three.js