javascript - 将 OrbitalControl 添加到 Three.js 会导致 TypeError

Question

我正在尝试将 OrbitalControls 添加到 Three.js 脚本中。代码应该只是将两个球体添加到空白空间，并让用户使用 OrbitalControls 环视球体，但每当我运行代码时，都会收到以下错误:

three.js:5353 Uncaught TypeError: Cannot read property 'center' of undefined
    at Sphere.copy (three.js:5353)
    at Frustum.intersectsObject (three.js:5792)
    at projectObject (three.js:22427)
    at projectObject (three.js:22472)
    at WebGLRenderer.render (three.js:22230)
    at animate (index.html:50)

这是我编写的代码:

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

var scope = this;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var controls = new THREE.OrbitControls( camera );
camera.position.z = 5;
scope.controls.addEventListener( 'change', function(){scope.render} );
controls.update();

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var v = new THREE.Vector3(1,1,1);
var v0 = new THREE.Vector3(2,2,2);

var sphere = new THREE.Sphere(v, .1);
var sphere0 = new THREE.Sphere(v0, .1);
var m = new THREE.Mesh(sphere, material);
var m0 = new THREE.Mesh(sphere0, material);
scene.add(m);
scene.add(m0);

animate();

function animate() {
    requestAnimationFrame( animate );
    scope.controls.update();
    scope.renderer.render( scope.scene, scope.camera );
}

我已经查看了以下资源，但不知道如何解决该问题:

• Threejs and orbitcontrol

• Three.js + OrbitControls - Uncaught TypeError: Cannot read property 'render' of undefined

• three.js TypeError: Cannot read property 'center' of undefined (我不确定它是否与问题有关。)

• https://threejs.org/docs/index.html#examples/controls/OrbitControls

您能告诉我我的错误在哪里以及可能的解决方案是什么样的吗？

Answer 1

THREE.Sphere 表示边界球体，而 THREE.SphereGeometry 或 THREE.SphereBufferGeometry 表示几何图形。由于您始终使用几何体而不是包围体创建网格，因此只需切换到 THREE.SphereBufferGeometry 即可解决问题。