THREE.js模型位置问题

时间:2012-11-22 09:37:29

标签: javascript webgl three.js

我正在尝试以下代码:

var loader = new THREE.JSONLoader();
var onGeometry = function(geom) {
var tooth = new THREE.Mesh( geom, new THREE.MeshFaceMaterial());
tooth.position.set(xpos,ypos,0);
teeth.push(tooth);
scene.add(tooth);
xpos+=10;
};
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);

模型没有按照我加载的顺序出现在屏幕上,这在我的情况下是必要的,因为我根据我加载它们的顺序定位对象。当我使用OBJLoader并使用其回调将对象添加到场景并将它们存储在数组中时,问题也是如此。 那么,我该如何实现这一点,如何在我可以指定的屏幕位置上显示多个对象。 有什么建议吗?

1 个答案:

答案 0 :(得分:2)

创建一个回调工厂,您可以为其传递所需的位置并将其保存在闭包中:

function getGeomHandler(posx) {
  return function(geom) {
    var tooth = new THREE.Mesh(geom, new THREE.MeshFaceMaterial());
    tooth.position.set(posx, posy, 0);
    teeth.push(tooth);
    scene.add(tooth);
  };
}
var posx = 123;
var loader = new THREE.JSONLoader();
loader.load('js/JsonModels/teeth1.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/tooth2.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/teeth1.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/tooth2.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/teeth1.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/tooth2.js', getGeomHandler(posx)); posx += 10;