lundi 24 décembre 2018

Ember three.js obj

i am using ember framework and testing three.js and i will need to import ojb file into the ember component.

i am am following and using this package https://www.npmjs.com/package/three-obj-mtl-loader

my code

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

the console said is loaded into but i did not see any model at screen , i found out i got a 304 error in feteching the ojb file.

if someone know what wrong with it can you let me know ? thanks appreciate your help.




Aucun commentaire:

Enregistrer un commentaire