Error rotating the camera in Three.js

Question

Error rotating the camera in Three.js

I can't figure out why Firebug keeps throwing an error that says "THREE is not defined" for my var camera. It's confusing because I clearly see the THREE declaration on the right side of the equals sign.

        init();
        animate();

        function init()
        {
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.z = 500;

            var controls = new THREE.TrackballControls( camera );
            controls.addEventListener('change', render);

            var scene = new THREE.Scene();

            var geometry = new THREE.BoxGeometry(100, 100, 100);
            var material = new THREE.MeshBasicMaterial();

            var mesh = new THREE.Mesh( geometry, material );
            scene.add(mesh);

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

        function animate()
        {
            requestAnimationFrame( animate );
            controls.update();
        }

        function render()
        {
            renderer.render( scene, camera );
        }

javascript camera three.js

Answer 1

Answer №1

Your implementation looks solid overall, but one potential issue is that you're declaring your variables within the init() function scope. This means they are only accessible within that specific function and not outside of it.

To ensure your variables can be accessed globally throughout your code, consider declaring them outside of any functions. Here's an example:

var camera, controls, scene, geometry, material, mesh, renderer;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 500;
...

Answer 2

Your implementation looks solid overall, but one potential issue is that you're declaring your variables within the init() function scope. This means they are only accessible within that specific function and not outside of it.

To ensure your variables can be accessed globally throughout your code, consider declaring them outside of any functions. Here's an example:

var camera, controls, scene, geometry, material, mesh, renderer;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 500;
...

Answer 3

Answer №2

If you're encountering issues, it's possible that the three.js script isn't being included correctly. Use Firebug to monitor the THREE variable - it should be defined before you begin working with THREE.JS. Be sure to check for any network errors related to loading the script.

Additionally, make sure to execute your code after the entire page has finished loading.

window.addEventListener('load', initialize);

This will ensure that the initialize function is only called once the page is fully loaded.

Remember to declare your variables in the global scope rather than inside the init function. Also, don't overlook calling the render function within your animate function.

Answer 4

If you're encountering issues, it's possible that the three.js script isn't being included correctly. Use Firebug to monitor the THREE variable - it should be defined before you begin working with THREE.JS. Be sure to check for any network errors related to loading the script.

Additionally, make sure to execute your code after the entire page has finished loading.

window.addEventListener('load', initialize);

This will ensure that the initialize function is only called once the page is fully loaded.

Remember to declare your variables in the global scope rather than inside the init function. Also, don't overlook calling the render function within your animate function.

Error rotating the camera in Three.js

Answer №1

Answer №2

Similar questions

Issue with Vue plugin syntax causing component not to load

Cel shading effect plugin for three.js for creating a comic book style in real time simulation

AngularJS - Click event failing to trigger controller function

Interacting with Socket.io using NodeJS and Express

Tips on transforming a JSON file into a response for my personal server

The radio button that disables other inputs only functions correctly for a single element when using Query Selector, but does not work with Query

Generate a list of keys along with an array containing sets of values

Is there a way to cycle through each element within a loop and output a corresponding item from another array?

Angular HTML is throwing an error related to object arrays

The encodeURIComponent function does not provide an encoded URI as an output

Navigating between components in angular2 modules: A tutorial

Leveraging Angular Dragula without the need for RequireJS

Is there a way to simplify and optimize the code further?

Explanation requested for previous response about returning ajax data to the parent function

I encountered an issue while trying to use jshint with a simple hello world script, receiving the error message: "line 0, col 0, Bad option: 'script'."

What is the best way to retrieve the dimensions of a custom pop-up window from the user?

Showcasing JSON information on an HTML webpage depending on the URL parameters provided

How exactly does this JavaScript code determine the index of the maximum value within an array?

How come my dimensions are not returning correctly when I use offset().top and scrollTop() inside a scrolling element?

What is the best way to divide a library and its plugins into separate npm packages?