What could be the reason for the rendering function in the JavaScript console to not recognize the object? (three.js)

I've encountered an issue while running the code in my browser. The object with the texture appears to be rendered properly, but the JavaScript console is indicating that mycylinder is not defined. What could be causing this error and how can I go about fixing it?

var texture, material, mycylinder;
var WIDTH = 400, HEIGHT = 300;
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, window.innerWidth / window.innerHeight, NEAR, FAR);
var scene = new THREE.Scene();

scene.add(camera);
camera.position.set(0, 150, 400);
camera.lookAt(scene.position);

document.body.appendChild(renderer.domElement);

var light = new THREE.PointLight(0xffffff);
light.position.set(0, 250, 0);
scene.add(light);

var ambientLight = new THREE.AmbientLight(0x444444);
scene.add(ambientLight);

var cylinderLoader = new THREE.JSONLoader();
cylinderLoader.load("models/probahenger.js", addModel);

function addModel(geometry, materials) {

            texture = new THREE.ImageUtils.loadTexture("images/Henger_anyag3.png");
            material = new THREE.MeshLambertMaterial({ map: texture });
            mycylinder = new THREE.Mesh(geometry, material);                
            mycylinder.scale.set(30, 30, 30);
            mycylinder.position.y = 0;
            scene.add(mycylinder);

        };

function render() {

        requestAnimationFrame(render);

        mycylinder.rotation.x += 0.01;
        mycylinder.rotation.y += 0.01;

        renderer.render(scene, camera); 
}

render();

Answer №1

Chances are the item hasn't fully loaded yet when you attempt to spin it. This code snippet should help:

if ( myshape !== null ) {

    myshape.rotation.x += 0.02;
    myshape.rotation.y += 0.02;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AJAX - Retrieving the server response following a page change by the user

My Understanding: I comprehend that when I make an ajax call to my server, a handler is created, the request is sent, my PHP script receives and processes the request, and sends back a response which my JavaScript can parse. Additionally, I am aware that ...

Require an additional button to dynamically load more content and shift all existing elements further down the page

I am looking to implement a "load more" button for an Instagram feed on my website. My current approach involves increasing the height of a specific section while moving the rest of the page down. This is what I have tried: <script> $(document.ready ...

Having trouble with a JavaScript function as a novice coder

Hello, I'm still getting the hang of JavaScript - just a few days into learning it. I can't figure out why this function I'm calling isn't functioning as expected. Here's the content of my HTML page: <!doctype html> <htm ...

How can the background color be shown using a transparent PNG on material?

I'm currently developing a case builder using THREE.js, where I aim to adjust the height/width/length of a box, rotate it, and modify its background color. To see my progress so far, visit: I have successfully implemented dimension changes and box m ...

Personalized JSON response type for AJAX requests

Do you think it's possible to achieve this? I have an idea to create a unique dataType called "json/rows". This new dataType would parse the server output text and manipulate it in some way before passing it to the success function. What do you think ...

HTML: Body with a larger height than its actual content dimensions

My Chrome browser extension seems to have a body that is much taller than its actual content: https://i.sstatic.net/t44t6.pnghttps://i.sstatic.net/8WjzD.png Even though there are no other parent div elements, the height of the <div id='app'& ...

difficulty with parsing JSON in jQuery when referencing an external file containing the same data

Looking for help with parsing a json file using jquery? Check out this working sample: http://jsfiddle.net/bw85zeea/ I'm encountering an issue when trying to load "data2" from an external file. The browser keeps complaining that it's an invalid ...

Encountering issues while attempting to modify the route from a particular Component

I have encountered an issue with changing routes in React from a specific component to another. Switching between '/' and '/login' works fine, but when the active route is '/menu-management', clicking on the Link causes an err ...

Dealing with memory leaks in three.js can be a common issue, especially when utilizing the

In my three.js project, I am constructing a Geometry and filling it with vertices to create a 2D terrain. Once the terrain is generated, I am adding all the Vector3 and Face3 elements to the geometry, and then adjusting each vertex and face on every frame ...

Utilizing jQuery event delegation with the use of .on and the unique reference of (

Questioning the reference in a delegated .on event: Example: $('#foo').on('click', $('.bar'), function() { console.log(this); }); In this scenario, `this` will point to #foo. How can I access the specific bar element tha ...

Flexbox Resizing Notification(?)

Recently, I've been utilizing flexbox in my layout design and it has been a game-changer. However, I am facing an issue that might be linked to my heavy use of AngularJS, particularly the ng-include feature. The specific problem arises when I incorpo ...

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

While using the Material UI Button component, I encountered an issue with conditionally determining the variant of the button based on screen size. Specifically, I want the variant to be 'outlined' on medium and larger screens, and no variant at ...

Issue: Unable to access the 'Stream' property as it is undefined in the AthenaExpress.query function due to a

I'm currently attempting to establish a connection with AWS Athena and run a select query using the athena-express package. However, I encountered the following error: Error: TypeError: Cannot read property 'Stream' of undefined at AthenaEx ...

Issues with npm installation on Ubuntu 16.04

Encountering issues while attempting to install npm on Ubuntu 16.04 using the command sudo apt-get install npm. The errors received are as follows: The following packages have unmet dependencies: npm : Depends: nodejs but it is not going to be installed ...

"Implementing a dynamic loading effect in Highcharts triggered by a button

Take a look at this sample highchart fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/ $('#button').click(function () { var chart = $('#containe ...

A current issue lies in the fact that node.js is failing to update

I'm currently working on creating a functionality that involves reading a CSV file and checking if the headers are correct before proceeding. Below is the code snippet: let validHeaders = false; fs.createReadStream(path) .pipe(csv.parse({headers : ...

Iterating through a nested array of objects to merge and accumulate values

Just started learning Javascript. I've been trying to wrap my head around it for hours, looking at examples, but still struggling. I'm working with an array of objects that have nested properties which I need to loop through and consolidate. ...

unable to include Cross-Origin header in ajax request

Whenever I include the HTTP_X_REQUESTED_WITH header in my ajax requests to another server, I encounter an error stating: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.xxxxxxxxxxxx.com/checkurl.php? ...

Exploring the combination of Holder.js and Rails routes

What's the best way to integrate Holder.js into my Rails application? I'm running into issues where Rails is interpreting the parameters passed to the script as routes and returning 404 errors. Has anyone successfully implemented this before? ...

reveal the concealed divs within the list elements

html: In my HTML document, I have a unordered list (ul) with each list item (li) constructed like this: <li class="A">list-item <div>1</div> <div class="B">2 <div class="C">3</div> </div> ...