React 和 Three.js

Question

我的 3d 图像没有渲染到屏幕上。我将 React 与 Three.js 结合使用。我收到此错误：

“THREE.Object3D.add：对象不是 THREE.Object3D 的实例。”

这是我的组件：（下面的文件树）。

import React, { Component } from "react"
import * as THREE from "three"
import * as MTLLoader from "three-mtl-loader"
import * as OBJLoader from "three-obj-loader"

OBJLoader(THREE)
MTLLoader(THREE)
const mesh = null
let obj

const SPEED = 0.015
class Scene extends Component {
  // constructor(props) {
  //   super(props)
  // }

  componentDidMount() {
    const scene = new THREE.Scene()
    this.scene = scene

    const onError = xhr => {}
    const width = 200
    const height = 850
    const onProgress = xhr => {
      if (xhr.lengthComputable) {
        const percentComplete = xhr.loaded / xhr.total * 100
        console.log(`${Math.round(percentComplete, 2)}% downloaded`)
      }
    }

    const mtlLoader = new MTLLoader()
    mtlLoader.setPath("../3d/")
    this.THREE = THREE
    mtlLoader.load("./Bottle_v06.mtl", materials => {
      materials.preload()

      const objLoader = new this.THREE.OBJLoader()
      objLoader.setMaterials(materials)
      objLoader.setPath("../3d/")
      objLoader.load(
        "./Bottle_v06.obj",
        object => {
          console.log("hiiiii")
          object.position.y = -25
          object.position.x = 0
          object.scale.x = 1
          object.scale.y = 1
          object.scale.z = 1
          obj = this.object
          scene.add(obj)
        },
        onProgress,
        onError
      )
    })

    const camera = new THREE.PerspectiveCamera(45, 200 / 850, 1, 1000)
    camera.position.z = 320
    camera.lookAt(scene.position)
    this.camera = camera

    const light = new THREE.AmbientLight(0xffffff, 1)
    scene.add(light)

    const dirLight = new THREE.DirectionalLight(0xffffff, 1)
    dirLight.position.set(100, 100, 50)
    scene.add(dirLight)

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
    renderer.setSize(width, height)
    this.renderer = renderer

    this.mount.appendChild(this.renderer.domElement)
  }

  rotateMesh = () => {
    if (!obj) {
      return
    }
    obj.rotation.y -= SPEED
  }

  renderScene() {
    this.renderer.render(this.scene, this.camera)
    this.rotateMesh
  }

  render() {
    return (
      <div
        style={{ width: "400px", height: "400px" }}
        ref={mount => {
          this.mount = mount
        }}
      />
    )
  }
}

export default Scene

文件树：

   /src
     /3d
       -Bottle_v06.mtl
       -Bottle_v06.obj
       -Image_01.png
     /components
       -Scene.js

StackOverflow 说我应该输入更多细节，所以我会一直打字，直到错误消失，我才能真正发布这个。请忽略这一点。我不明白他们为什么不让我提交我的问题。

Answer 1

您可能还需要这样的东西，可能在您创建渲染器之后：

function animationLoop(){
   requestAnimationFrame( animationLoop );
   renderScene();
}

animationLoop();