THREE.js对象无法旋转

时间:2017-04-05 17:19:27

标签: javascript three.js

我有一个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);

1 个答案:

答案 0 :(得分:1)

我认为这是一个范围问题。您提供的代码会抛出错误。您可以尝试这样的事情:

([^_]+(?=_)) - match everything that not underscore till the first one and store it to $1
(?:\w+(?=_\d+)) - match chars until the numbers but (?:...) not store to var
(_\d+_\d+\.csv) -  match set of numbers and file extension and store it to $2

“光”对象的范围也未处理,需要修复。