THREE.js对象不会旋转

Question

我有一个Blender对象，可以使用THREE.js在我的网页上显示它，但是当调用我的循环函数时，该对象不会旋转。

我正在尝试使用js时保持OOP方法。

这是我的代码段。

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

Answer 1

我认为这是一个范围问题。 您提供的代码将引发错误。 您可以尝试如下操作：

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;
}

您对“轻型”对象的范围也未处理，需要进行修复。