很难用一行描述这个问题,所以这就是情况。
我将使用 Three.js 构建一个大型 Javascript 项目,因此我试图掌握它的 OOP 概念。
1) 我创建了一个 3D 世界对象
2) 带有子类的 3D_object 基类
3) 在下面的示例中,您会看到选项 1 和选项 2 应该产生相同的结果,但不知何故却没有。
知道为什么吗?完整的源代码位于代码片段中。
(脚本之前应包含 Three.js,我假设有一个“resources/object.json”文件)
这是一个github link项目的内容,也许有人会这样发现。 (可能需要在本地Python服务器上运行它,例如绕过chrome中的跨源文件加载问题)
//create world
var myWorld = new World(500,500);
myWorld.AddWorldToPage();
//load simple model in the world
var cube = new Cube();
myWorld.addToScene(cube);
// load json model in the world
//option 1
// myWorld.addToSceneTemp();
//option 2 OO (not working)
var jsonObject = new Object_3D_JSON();
function afterModelLoaded(){
console.log("after loading is done");
myWorld.addToScene(jsonObject);
}
jsonObject.loadModel(afterModelLoaded);
myWorld.render();
// Inhertit convencience method
//=====================================================================================================
function inheritsF / rom(child, parent) {
child.prototype = new parent();
child.prototype.constructor = child;
}
// 3D Objects
//=====================================================================================================
// 3D object class
//=====================================================================================================
function Object_3DClass() {
this._geometry = new THREE.BoxGeometry(1, 1, 1);
this._material = new THREE.MeshBasicMaterial({
color: 0xff00ff
});
this._mesh = new THREE.Mesh(this._geometry, this._material);
}
//Get 3D mesh
Object_3DClass.prototype.getMesh = function() {
return this._mesh;
}
//Animate Object
Object_3DClass.prototype.animateFrame = function() {
this._mesh.rotation.x += 0.01;
this._mesh.rotation.y += 0.01;
}
Object_3DClass.prototype.setPosition = function(x, y, z) {
this._mesh.position.set(x, y, z);
}
// END 3D object class
//===================================================================================================
// 3D Cube class
//=====================================================================================================
function Cube() {
this._geometry = new THREE.BoxGeometry(1, 1, 1);
this._material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
this._mesh = new THREE.Mesh(this._geometry, this._material);
}
inheritsFrom(Cube, Object_3DClass)
// END OF 3D Cube class
//=====================================================================================================
// 3D JSON Model class
//=====================================================================================================
function Object_3D_JSON() {
// instantiate a loader
this._loader = new THREE.JSONLoader();
this._mesh = null;
}
inheritsFrom(Object_3D_JSON, Object_3DClass);
//loadModel
Object_3D_JSON.prototype.loadModel = function(whenReady_Fn) {
// _geometry = this._geometry;
var self = this;
// load a resource
this._loader.load(
// resource URL
'resources/object.json',
// Function when resource is loaded
function(geometry, materials) {
console.log("loading");
// this._material = new THREE.MultiMaterial( materials );
self._material = new THREE.MeshBasicMaterial({
color: 0xffffff
});
self._mesh = new THREE.Mesh(geometry, materials);
self._geometry = geometry;
whenReady_Fn();
// scene.add( this._mesh );
},
//onProgress
function() {},
//onError
function() {
console.log("resource not found");
}
);
}
// END OF 3D JSON Model class
//=====================================================================================================
// World class
//=====================================================================================================
var World = (function() {
// World constructor
function World(width, height) {
//private members
//===========================
this._width = width;
this._height = height;
this._scene = new THREE.Scene();
this._camera = new THREE.PerspectiveCamera(75, this._width / this._height, 0.1, 1000);
this._camera.position.set(6.8, 9.5, 12.2);
this._camera.lookAt(new THREE.Vector3(0, 0, 0));
this._renderer = new THREE.WebGLRenderer();
this._renderer.setSize(this._width, this._height);
this._worldName = "Tubrines";
this._object_3DList = [];
return _privatePrintMessage.call(this, "message");
}
//public
//===========================
//functions
World.prototype.AddWorldToPage = function() {
document.body.appendChild(this._renderer.domElement);
}
World.prototype.render = function() {
//zichzelf meegeven aan AnimationFrame
requestAnimationFrame(this.render.bind(this));
this._object_3DList[0].animateFrame();
this._renderer.render(this._scene, this._camera);
}
World.prototype.addToScene = function(object_3DClass) {
this._scene.add(object_3DClass.getMesh());
this._object_3DList.push(object_3DClass);
}
World.prototype.addToSceneTemp = function() {
_scene = this._scene;
_object_3DList = this._object_3DList;
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'resources/object.json',
// Function when resource is loaded
function(geometry, materials) {
// var material = new THREE.MultiMaterial( materials );
var material = new THREE.MeshBasicMaterial({
color: 0xff00ff
});
var mesh = new THREE.Mesh(geometry, material);
_scene.add(mesh);
_object_3DList.push(mesh);
});
}
//private functions
//===========================
function _privatePrintMessage(message) {
// return prefix + this._foo;
console.log("World class: " + this._worldName + " " + message);
}
return World;
})();
// END OF World class
//=====================================================================================================
//create world
var myWorld = new World(500, 500);
myWorld.AddWorldToPage();
//load simple model in the world
var cube = new Cube();
myWorld.addToScene(cube);
// load json model in the world
//option 1
// myWorld.addToSceneTemp();
//option 2 OO (not working)
var jsonObject = new Object_3D_JSON();
function afterModelLoaded() {
console.log("after loading is done");
myWorld.addToScene(jsonObject);
}
jsonObject.loadModel(afterModelLoaded);
myWorld.render();
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
最佳答案
您试图传递 Material 列表而不告诉 Three.js 它是多种 Material 。
更改此行:
self._mesh = new THREE.Mesh( geometry , materials );
至:
var materialSet = new THREE.MultiMaterial( materials );
self._mesh = new THREE.Mesh( geometry , materialSet );
现在您正在使用正确的 json 提供的 Material ,您需要向场景添加灯光,否则模型中的兰伯特 Material 将不会显示。 (朗伯 Material 需要灯光,而基本 Material 不需要,这就是立方体起作用的原因)。
this._scene = new THREE.Scene();
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;
this._scene.add( spotLight );
关于javascript - 三.javascript中的JS + OOP,无法将3D JSON对象传递给其他类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41879375/