我遇到错误,需要帮助。我真的没有太多时间来解决此问题,我觉得我已经尝试了一切。我是Three.js的一个完整的初学者(可能会注意到),但是我已经不喜欢它了(我的海滩是后端和数学),并且我承受着很大的压力来完成此:/。
因此,我在Blender上创建了一个奇特的pancy模型,然后尝试以成千上万的方式将其导出到three.js,但收效甚微。大量错误,最好是黑屏。我最后使用FBXLoader的最好之处是,它散发出可爱的丰富黑屏,我们都学会了厌恶,但是我尝试了JSONLoader(我在.mtl文件中苦苦挣扎)和OBJLoader&MTLLoader,也都没有成功。现在说真的,我想我太急于专注于理解这一点,并发现潜伏在这堆垃圾后面的可能相当简单的错误。我将不胜感激,博学多才,无判断力。
import React, {Component} from "react";
import * as THREE from "three";
class ThreeScene extends Component {
componentDidMount = () => {
let THREE = require('three');
let FBXLoader = require('three-fbx-loader');
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
//ADD SCENE
this.scene = new THREE.Scene();
//ADD CAMERA
this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
this.camera.position.z = 4;
//ADD RENDERER
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setClearColor("#ffffff");
this.renderer.setSize(width, height);
this.mount.appendChild(this.renderer.domElement);
//ADD CUBE
this.loader = new FBXLoader();
this.loader.load('scene2.fbx', object =>{
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
} );
this.light = new THREE.DirectionalLight(0xffffff, 1);
this.light.position.set(10, 10, 10);
this.scene.add(object);
this.scene.add(this.light);
this.start();
});
this.camera.position.z = 70;
};
componentWillUnmount = () => {
this.stop();
this.mount.removeChild(this.renderer.domElement);
};
start = () => {
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate);
}
};
stop = () => {
cancelAnimationFrame(this.frameId);
};
animate = () => {
this.renderScene();
this.frameId = window.requestAnimationFrame(this.animate);
};
renderScene = () => {
this.renderer.render(this.scene, this.camera);
};
render() {
return (
<div
style={{width: "444vw", height: "40vw"}}
ref={mount => {
this.mount = mount;
}}
/>
);
}
}
export default ThreeScene;