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