"Exploring the process of animating a mesh in three.js that was generated outside of the init

Question

"Exploring the process of animating a mesh in three.js that was generated outside of the init

Currently diving into the world of three.js, I'm eager to grasp the concept of animating a mesh that was created by a function outside of the usual init() method.

In my experiments, I've successfully managed to create and rotate a cube within the init() function and animate() function. However, once the cube is generated by a separate function outside of init(), the console throws an error stating that 'cube' is not defined.

For reference, here's a brief example: http://jsfiddle.net/mattsparrer/yqbp5hx4/10/

function createCube(size) {
    var geometry = new THREE.CubeGeometry(size, size, size);
    var material = new THREE.MeshNormalMaterial();

    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
}

After some online research, I've come to realize that "cube" falls out of scope for the animate() function. However, I'm struggling to find the correct approach to tackle this issue. Could someone please shed some light on the proper way to achieve this?

javascript three.js

Answer 1

Answer №1

This is more of a question about variable scope in JavaScript rather than Three.js.

If you define the cube variable within the init() function, it will only be accessible inside init() and not in render(). To make it available to both functions, you need to declare it outside of both.

Incorrect Usage:

function init(){
    // Defining cube within this function limits its reach
    var cube = new THREE.Mesh();
}

function render(){
    // Cube is undefined,
    // as it's only accessible within init()
    cube.rotation.y += 0.01;
}

console.log(cube); // Cube is also unavailable here.

Correct Approach:

// Define cube in global scope for accessibility in both functions
var cube;

function init(){
    // Assigns value to existing cube variable
    cube = new THREE.Mesh();
}

function render(){
    // Accesses cube within this function too
    cube.rotation.y += 0.01;
}

console.log(cube); // No errors since cube exists globally

For more insights on variable scope, check out: What is the scope of variables in JavaScript?

Answer 2

This is more of a question about variable scope in JavaScript rather than Three.js.

If you define the cube variable within the init() function, it will only be accessible inside init() and not in render(). To make it available to both functions, you need to declare it outside of both.

Incorrect Usage:

function init(){
    // Defining cube within this function limits its reach
    var cube = new THREE.Mesh();
}

function render(){
    // Cube is undefined,
    // as it's only accessible within init()
    cube.rotation.y += 0.01;
}

console.log(cube); // Cube is also unavailable here.

Correct Approach:

// Define cube in global scope for accessibility in both functions
var cube;

function init(){
    // Assigns value to existing cube variable
    cube = new THREE.Mesh();
}

function render(){
    // Accesses cube within this function too
    cube.rotation.y += 0.01;
}

console.log(cube); // No errors since cube exists globally

For more insights on variable scope, check out: What is the scope of variables in JavaScript?

"Exploring the process of animating a mesh in three.js that was generated outside of the init

Answer №1

Similar questions

Troubleshooting Async Function compatibility between Express and NestJs

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

Adding a fresh element to an array in a mongoDB document

Can Google Maps markers be transformed into checkboxes for use?

Extract information from an external HTML table and store it in an array

Adjust the camera in Three.js to move in a straight line towards the right

Leveraging the power of node.js, express, and handlebars to seamlessly render multiple views within a

Dynamically access nested objects by utilizing an array of strings as a pathway

Tips for transferring client-side data to the server-side in Angular, Node.js, and Express

Steps to invoke a function to add an element into a list

Type-safe Immutable.js Records with TypeScript

How can you use HTML, CSS, and JavaScript to group objects with one color and then change the color of one specific object?

I am looking to modify the background color of the columns in an Ant Design table based on whether the index of my data is even or odd

The execution of my Nodejs API using the 'npm start' command is unsuccessful, resulting in the following error message

Can the html content provided by the user be extracted and highlighted?

Variables for NPM Configuration

I keep getting redirected to a blank page by JS

What is the best way to create a non-reactive value in Vue.js?

Mongoose: The aggregate method does not filter properly when using Model.field_1.field_2

Guide on creating rsa key pair on the client side with angular2