灰烬three.js obj

时间:2018-12-24 07:12:47

标签: ember.js three.js

我正在使用ember框架并测试three.js,因此我需要将ojb文件导入ember组件。

我正在关注并使用此软件包 https://www.npmjs.com/package/three-obj-mtl-loader

我的代码

import Component from '@ember/component';
import THREE from 'three';
import {MTLLoader, OBJLoader} from 'three-obj-mtl-loader';

export default Component.extend({
    didInsertElement(){
        var scene = new THREE.Scene();
        var manager = new THREE.LoadingManager();
        var renderer, camera, banana;

        var ww = window.innerWidth,
            wh = window.innerHeight;

        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('scene')
        });
        renderer.setSize(ww, wh);

        camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
        camera.position.set(0, 0, 500);
        scene.add(camera);

        manager.onProgress = function (url, itemsLoaded, itemsTotal){
              console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
        }

        manager.onError = function ( url ) {

              console.log( 'There was an error loading ' + url );

        };

        var render = function() {
            requestAnimationFrame(render);

            banana.rotation.z += .01;

            renderer.render(scene, camera);
        };

        var loadOBJ = function() {
            //Loader for Obj from Three.js
            var loader = new OBJLoader(manager);

            //Launch loading of the obj file, addBananaInScene is the callback when it's ready
            loader.setPath('/assets/3d/');
            loader.load('banana.obj', function(object) {
                banana = object;
                //Move the banana in the scene
                banana.rotation.x = Math.PI / 2;
                banana.position.y = -200;
                banana.position.z = 50;
                //Go through all children of the loaded object and search for a Mesh
                object.traverse(function(child) {
                    //This allow us to check if the children is an instance of the Mesh constructor
                    if (child instanceof THREE.Mesh) {
                        child.material.color = new THREE.Color(0X00FF00);
                        //Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
                        child.geometry.computeVertexNormals();
                    }
                });

                scene.add(banana);
                render();
            });
        };

        loadOBJ();
    }
});

说控制台已装入,但我在屏幕上没有看到任何模型,我发现在对ojb文件进行fetech处理时出现304错误。

如果有人知道问题出在哪里,您能告诉我吗?谢谢您的帮助。

0 个答案:

没有答案