OBJ 文件未出现在 React 中 |三杰

Question

我正在使用 Threejs 在 React 中生成 3D 模型。

我有这个 Threejs 代码：

import * as THREE from 'three';
import { useEffect, useRef } from "react";
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

function Three() {
  const refContainer = useRef(null);
  useEffect(() => {
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xaaaaaa);
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    const loader = new OBJLoader();

    loader.load(
        'models/male02.obj',
        function ( object ) {

            scene.add( object );

        },
        function ( xhr ) {

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        function ( error ) {

            console.log( 'An error happened' );

        }
    );

    camera.position.z = 200;

    function animate() {
        requestAnimationFrame( animate );

        renderer.render( scene, camera );
    }
    animate();
  }, []);
  return (
    <div ref={refContainer}></div>
  );
}

export default Three

我使用以下方法将其导入到我的 App.js 文件中：

import Three from './THREE';

并使用此标签：

<Three />

问题是当我在本机 html 中运行此文件时，对象正在加载，但在反应中却没有加载。

我从这个网站复制了反应模板：在React中导入Threejs

这是我的模型文件下载链接：male02.obj

Answer 1

这样导入obj：

import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

https://thirdjs.org/docs/#examples/en/loaders/OBJLoader

...顺便说一句 你的教程写得很清楚

renderer.setSize(window.innerWidth, window.innerHeight);
  //  (!!!) document.body.appendChild( renderer.domElement );
    // use ref as a mount point of the Three.js scene instead of the document.body
    refContainer.current && refContainer.current.appendChild( renderer.domElement ); 

...尝试使用...

refContainer.current.appendChild(renderer.domElement);

...而不是

document