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在统一目录下。
怎么解决问题，请大佬们告知！多谢
q253614460

jsp动作元素的用处

1条回答

为你推荐
