我正在使用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错误。
如果有人知道问题出在哪里,您能告诉我吗?谢谢您的帮助。