react项目使用three.js导入obj模型不成功
代码如下:
import React, { Component } from 'react';
import * as THREE from 'three';
// @ts-ignore
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
import { RoughnessMipmapper } from 'three/examples/jsm/utils/RoughnessMipmapper';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader';
class GroundPressuer extends Component {
constructor(props: {} | Readonly<{}>) {
super(props);
this.state = {};
}
initThree() {
threeStart();
var renderer: THREE.WebGLRenderer, width: number, height: number, controls,loader: OBJLoader,mtlLoader,fbxloader;
function init() {
// @ts-ignore
width = document.getElementById('canvas-frame').clientWidth;
// @ts-ignore
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true,
});
renderer.setSize(width, height);
// @ts-ignore
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xffffff, 1.0);
}
function render() {
renderer.render(scene, camera);
}
var camera: THREE.PerspectiveCamera | THREE.Camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.set(0, 0, 0);
camera.lookAt(0, 0, 0);
camera.position.set(100, 200, 300);
//相机控件
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
}
var scene: THREE.Scene | THREE.Object3D;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.AmbientLight(0xffffff);
light.position.set(300, 300, 0);
scene.add(light);
}
function initObject() {
loader = new OBJLoader(); //obj格式
//loader.setPath('/ground-pressure-page/src/pages/index/components/');
loader.load(
'./3D-YKS-XD.obj',
function ( object ) {
object.name='YKSmodel';
console.log(object);
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
console.log(xhr.total);
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
}
function threeStart() {
init();
initCamera();
initScene();
initLight();
initObject();
animation();
}
function animation() {
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
}
/**
* 开始Three
*
* @memberof ThreeBim
*/
componentDidMount() {
this.initThree();
}
render() {
return (
<div id="canvas-frame" style={{ width: '100%', height: '100%' }}></div>
);
}
}
export default GroundPressuer;
obj模型和GroundPressuer.tsx在统一目录下。
怎么解决问题,请大佬们告知!多谢