THREE.js Object Won't Rotate

Question

I have a Blender object that is able to be displayed on my web page using THREE.js, however the object isn't rotating when my loop function is called.

I'm trying to maintain an OOP approach while working with js.

Here's my code snippet.

var scene, camera, renderer, box;

function createScene() {
    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x3399ff);

    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.z = 10;

    container = document.getElementById('world');
    container.appendChild(renderer.domElement);
}

function createLight() {
    light = new THREE.PointLight(0xffffff, 1.2);
    light.position.set(0,0,6);

    scene.add(light);
}

function createBox() {
    box = new Box();
}

Box = function() {
    this.mesh = new THREE.Object3D();

  var loader = new THREE.JSONLoader();
  loader.load('json/model.json', function(geometry, materials) {
      this.mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
      this.mesh.scale.x = this.mesh.scale.y = this.mesh.scale.z = 0.75;
      this.mesh.translation = geometry.center();
      scene.add(mesh);
  });
}

Box.prototype.rotateBox = function() {
    if (!this.mesh) {
        return;
    }

    this.mesh.rotation.x += .001;
    this.mesh.rotation.y += .01;
}

function loop() {
    requestAnimationFrame(loop);
    box.rotateBox();
    renderer.render(scene, camera);
}

function init() {
    createScene();
    createLight();
    createBox();
    loop();
}

window.addEventListener('load', init, false);

score 1 · Accepted Answer · answered Apr 05 '17 at 18:19

1

I think it's a scope issue. Your code as provided would throw errors. You might try something like this:

Box = function() {
  this.mesh = false;
  var loader = new THREE.JSONLoader();
  var scope = this;
  loader.load('json/model.json', function(geometry, materials) {
      scope.mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
      scope.mesh.scale.x = scope.mesh.scale.y = scope.mesh.scale.z = 0.75;
      scope.mesh.translation = geometry.center();
      scene.add(scope.mesh);
  });
}

Box.prototype.rotateBox = function() {
    if (!this.mesh) {
        return;
    }

    this.mesh.rotation.x += .001;
    this.mesh.rotation.y += .01;
}

Your scope of the "light" object is also left unhandled and needs to be fixed.

answered Apr 05 '17 at 18:19

Radio

2,810
1
21
43

So it was a scope issue and all I had to do was store 'this' into a variable. Then I'd use that variable wherever 'this' would've been. Can you explain why storing 'this' into a variable fixes this issue? – Tony Apr 05 '17 at 18:45
1

In your example code, you used "this" inside the onLoad function supplied as a parameter to loader.load. Therefore "this" refers to loader in that context. To understand scope in javascript refer to: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work – Radio Apr 05 '17 at 21:32

THREE.js Object Won't Rotate

1 Answers1