CODEWITHSUNDEEP
javascriptthree.js
Fabian Schneider
Fabian Schneider

Reputation: 809

Add OrbitalControl to Three.js results in TypeError

I am trying to add OrbitalControls to a Three.js Script. The Code should just add two spheres to an empty space and let the user look around the spheres with the OrbitalControls, but whenever I run the code, I get the following error:

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)

Here is the code I wrote:

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

I have already looked at the following resources but couldn't figure out how to solve the problem:

Can you please tell me where my error is and how a possible solution could look like?

Upvotes: 0

Views: 320

Answers (1)

Mugen87
Mugen87

Reputation: 31026

THREE.Sphere represents a bounding sphere whereas THREE.SphereGeometry or THREE.SphereBufferGeometry represents geometries. Since you create a mesh always with a geometry and not with a bounding volume, just switch to THREE.SphereBufferGeometry to solve the problem.

Upvotes: 1

Related Questions