CameraHelper gives error

Questions
,
1

Hello, i am trying to create a camera helper, and make the camera to follow a path, for better visualizing the animation. I have seen the example. The problem is tha t camera gives error:

THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. BufferGeometry {uuid: "EDB2BFAC-C4B9-460D-9450-E2BA4BE2D50E", name: "", type: "BufferGeometry", index: null, attributes: {…}, …}

Here is my code:

<!DOCTYPE html>
<html>

<head>
	<meta charset=utf-8>
	<title>Window</title>
	<style>
		body {
			margin: 0;
		}

		canvas {
			width: 100%;
			height: 100%
		}
	</style>
</head>

<body>
	<script src="js/three.js"></script>

	<script src="js\OBJLoader.js"></script>
	<script src="js\JSONLoader.js"></script>
	<script src="js\MTLLoader.js"></script>
	<script src="js\ObjectLoader.js"></script>
	<script src="js\OrbitControls.js"></script>
	<script src="js\Box3.js"></script>
	<script src="js\BoxHelper.js"></script>
	<script src="js\CameraHelper.js"></script>

	<script>
		var scene, camera, renderer, controls;

		var myObjs = {};
		init();
		animate();

		function init() {


			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.set(0, 20, 100);

			cameraAnim = new THREE.PerspectiveCamera(0, 0, 0, 1000);
			var helperCamera = new THREE.CameraHelper(cameraAnim);

			cameraAnim.add(helperCamera);
			scene.add(cameraAnim);
			controls = new THREE.OrbitControls(camera);
			renderer = new THREE.WebGLRenderer();





			var size = 10;
			var divisions = 10;
			var gridHelper = new THREE.GridHelper(size, divisions);
			scene.add(gridHelper);

			var curve = new THREE.QuadraticBezierCurve3(
				new THREE.Vector3( 0, -2, -10 ),
				new THREE.Vector3( 0, 0, 5 ),
				new THREE.Vector3( 0, 5, 5 ),
				new THREE.Vector3( 0, 10, 10 )
			);

			var points = curve.getPoints( 50 );
			var geometry = new THREE.BufferGeometry().setFromPoints( points );

			var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

			// Create the final object to add to the scene
			var curveObject = new THREE.Line( geometry, material );

			scene.add(curveObject);

			var material = new THREE.MeshBasicMaterial({
				color: 0x00ff00
			});

			var ambientLight = new THREE.AmbientLight(0xcccccc, 0.8);
			ambientLight.position.y = -2;
			scene.add(ambientLight);
			var pointLight = new THREE.PointLight(0xffffff, 1);
			pointLight.position.y = -2;
			scene.add(pointLight);





			function addObject(model, Matrix_x, Matrix_y, Matrix_z, pos_x, pos_y, pos_z) {
				var manager = new THREE.LoadingManager();


				manager.onStart = function() {



				};
				manager.onLoad = function() {
					var box = new THREE.AxesHelper(5);
					myObjs[model].add(box);
					myObjs[model].children[0].applyMatrix(new THREE.Matrix4().makeTranslation(Matrix_x, Matrix_y, Matrix_z));
					myObjs[model].position.set(pos_x, pos_y, pos_z);
				};

				var mtlLoader = new THREE.MTLLoader(manager);
				var objLoader = new THREE.OBJLoader(manager);
				mtlLoader.load('Assets/' + model + '.mtl', function(materials) {
					materials.preload();
					objLoader.setMaterials(materials);
					objLoader.load('Assets/' + model + '.obj', function(object) {


						object.name = model;

						scene.add(object);
						myObjs[model] = object;
						console.log(myObjs[model]);
						return object;
					});
				});

			};






			addObject('window_R', -1, 0, 1.4, 1, 0, -1.4, 0);
			addObject('window_L', 1, 0, 1.4, -1, 0, -1.4);
			addObject('Fixed_window', 0, 0, 0, 0, 0, 0);




			console.log(myObjs);

			camera.position.z = 10;



			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);







			window.addEventListener('resize', onWindowResize, false);
		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);

		}

		function animate() {
			render();

			controls.update();
			requestAnimationFrame(animate);


		}

		var rotSpeed = 0.004;

		function render() {


			if (myObjs['window_R'] !== undefined) {

				myObjs['window_R'].rotation.y += rotSpeed;
			}
			if (myObjs['window_L'] !== undefined) {
				myObjs['window_L'].rotation.y -= rotSpeed;
			}
			renderer.render(scene, camera);

		}
	</script>
</body>

</html>
2

That’s because you’ve created a perspective camera with more or less invalid parameters. CameraHelper can 't handle such an input. Use a setup like this:

new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
1 Like