[英]unable to load .mtl and .obj through react-three-renderer
我正在嘗試通過react-three-renderer加載.obj和.mtl,但是我在加載模型時錯過了機會。 目前,我能夠在div中渲染一個多維數據集。 但是,我想用我的.obj模型替換多維數據集。
安裝:
npm install --save react@15.6.1 react-dom@15.6.1 three@0.86.0
npm install --save react-three-renderer
npm install --save three-obj-loader
npm install --save three-mtl-loader
用法:div內的多維數據集
import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import OBJLoader from 'three-obj-loader';// added while importing character .obj
import OBJLoader from 'three-mtl-loader';// added while importing character .mtl
class Simple extends React.Component {
static propTypes = {
width: React.PropTypes.number.isRequired,
height: React.PropTypes.number.isRequired,
};
constructor(props, context) {
super(props, context);
this.cameraPosition = new THREE.Vector3(0, 0, 5);
// construct the position vector here, because if we use 'new' within render,
// React will think that things have changed when they have not.
this.state = {
cubeRotation: new THREE.Euler(),
};
this._onAnimate = () => {
// we will get this callback every frame
// pretend cubeRotation is immutable.
// this helps with updates and pure rendering.
// React will be sure that the rotation has now updated.
this.setState({
cubeRotation: new THREE.Euler(
this.state.cubeRotation.x + 0.1,
this.state.cubeRotation.y + 0.1,
0
),
});
};
}
render() {
const {
width,
height,
} = this.props;
// or you can use:
// width = window.innerWidth
// height = window.innerHeight
return (<React3
mainCamera="camera" // this points to the perspectiveCamera below
width={width}
height={height}
onAnimate={this._onAnimate}
>
<scene>
<perspectiveCamera
name="camera"
fov={75}
aspect={width / height}
near={0.1}
far={1000}
position={this.cameraPosition}
/>
<mesh
rotation={this.state.cubeRotation}
>
<boxGeometry
width={1}
height={1}
depth={1}
/>
<meshBasicMaterial
color={0x00ff00}
/>
</mesh>
</scene>
</React3>);
}
}
export default Simple;
預期的3D模型.obj .mtl,但在何處添加此代碼?
const mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl(PATH);
mtlLoader.setPath(PATH); // One of these might not be needed
mtlLoader.crossOrigin = '*'; // Use as needed
mtlLoader.load(MTL_FILE, materials => {
materials.preload();
// OBJ Loader
const objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath(PATH);
objLoader.load(OBJ_FILE, object => {
for(let child of object.children) {
child.material.side = THREE.DoubleSide
}
}, onProgress, onError);
});
嘗試加載JSON對象時,我遇到了類似的問題。 最終這對我有用:
this.state = {
geometry: { vertices: [], faces: [] faceVertexUvs: []}
};
//in componentDidMount
const loader = new THREE.JSONLoader();
loader.load("new-origin.json", geometry => {
geometry.center();
this.setState({ geometry: geometry });
});
//in my render
<scene>
<perspectiveCamera
name="camera"
fov={45}
aspect={width / height}
near={0.1}
far={10000}
position={this.cameraPosition}
/>
<mesh
rotation={this.state.cubeRotation}
position={this.meshPosition}>
<geometry
vertices={this.state.geometry.vertices}
faces={this.state.geometry.faces}
faceVertexUvs={this.state.geometry.faceVertexUvs}
/>
<meshLambertMaterial />
</mesh>
</scene>
您真正需要注意的一件事是,在所有內容加載完畢之前,您不希望呈現任何內容。 所以我在返回渲染之前有一個條件,可以在渲染React3組件之前檢查this.state.geometry
是否實際加載。
我發現https://tweedegolf.nl/blog/14/react-and-threejs也非常有幫助,盡管我最終沒有走這條路。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.