javascript中的Three.JS + OOP，无法将3D JSON对象传递给其他类

Question

很难单行描述问题，所以就是这种情况。

我将使用Three.js构建一个大型Javascript项目，因此我试图掌握它的OOP概念。

1）我创建了一个3D世界对象
2）具有子类的基本3D_object类
3）在示例波纹管中，您会看到一个选项1和一个选项2，它们应该产生相同的结果，但是以某种方式却不会。
知道为什么吗？ 完整的源代码在摘录中。

（在脚本之前应包含Three.js，我假设有一个'resources / object.json'文件）

这是项目的github链接 ，也许有人会以这种方式找到它。 （可能需要在本地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> 

Answer 1

您正在尝试传递材料列表，而无需告诉three.js这是一种多材料。

更改此行：

self._mesh = new THREE.Mesh( geometry , materials );

至：

var materialSet = new THREE.MultiMaterial( materials );
self._mesh = new THREE.Mesh( geometry , materialSet );

现在，您正在使用json提供的适当材料，您需要在场景中添加灯光，否则模型中的lambert材料将不会显示。 （朗伯材料需要光，基本材料不需要光，这就是立方体起作用的原因）。

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