我尝试了更好的组织场景的方法。最终的想法是,我希望能够简单地添加属性或更改参数,而无需查找声明变量的位置,因为许多初学者示例都充满了var this和var。我有什么看起来应该工作,但由于某种原因,对象不会添加到场景中。
这是我的代码
var setup = {
container: function () {
return $("#test");
},
WIDTH: function () {
return this.container().width();
},
HEIGHT: function () {
return this.container().height();
},
renderer: function () {
var renderer = Detector.webgl ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
return renderer;
},
scene: function () {
return new THREE.Scene();
}
};
var sceneObjects = {
cameras: {
cam1: {
init: function () {
var camera = new THREE.PerspectiveCamera(
this.properties.VIEW_ANGLE,
this.properties.ASPECT(),
this.properties.NEAR,
this.properties.FAR);
return camera;
},
properties: {
VIEW_ANGLE: 45,
ASPECT: function () {
return setup.WIDTH() / setup.HEIGHT();
},
NEAR: 0.1,
FAR: 10000
},
position: {
x: undefined,
y: undefined,
z: 300
}
}
},
meshes: {
sphere: {
size: {
radius: 50,
segments: 16,
rings: 16
},
color: 0xCC0000,
material: function () {
return new THREE.MeshLambertMaterial({
color: this.color
});
},
init: function () {
return new THREE.Mesh(
new THREE.SphereGeometry(
this.size.radius,
this.size.segments,
this.size.rings),
this.material());
}
}
},
lights: {
pointLight1: {
position: {
x: 10,
y: 50,
z: 130
},
color: 0xFFFFFF,
init: function () {
return new THREE.PointLight(this.color);
}
}
}
};
function init() {
for (var objectGroup in sceneObjects) {
if (sceneObjects.hasOwnProperty(objectGroup)) {
for (var object in sceneObjects[objectGroup]) {
if (sceneObjects[objectGroup].hasOwnProperty(object)) {
object = sceneObjects[objectGroup][object];
var scene = setup.scene();
console.log(object.init());
scene.add(object.init());
if (object.hasOwnProperty('position')) {
for (var coord in object.position) {
if (object.position.hasOwnProperty(coord)) {
if (coord) {
object.init().position[coord] = object[coord];
}
}
}
}
}
}
}
}
var renderer = setup.renderer();
renderer.setSize(setup.WIDTH(), setup.HEIGHT());
setup.container().append(renderer.domElement);
renderer.render(scene, sceneObjects.cameras.cam1.init())
console.log(scene)
}
init();
当我记录对象变量时,它肯定会返回预期的MESH对象以及Camera对象和light对象。当我记录场景时,会创建一个明确的场景,但奇怪的是,在webglobjects属性下有一个空数组。为什么scene.add()
无法在此模型中运行?