如何将 Threejs 连接到 React? [英] How to connect Threejs to React?

问题描述

我使用 React 并使用画布.我想将画布更改为 WebGL(Threejs 库).如何将这个库连接到 React?

我有一些元素，例如

<div ref="threejs"></div>

如何使其成为 Threejs 库调用的字段?附:.我不想使用像 react-threejs 这样的扩展

解决方案

以下是如何设置的示例 (参见演示):

import React, { Component } from 'react'从三"导入 * 为三类场景扩展组件{构造函数(道具){超级(道具)this.start = this.start.bind(this)this.stop = this.stop.bind(this)this.animate = this.animate.bind(this)}componentDidMount() {const 宽度 = this.mount.clientWidthconst 高度 = this.mount.clientHeightconst 场景 = 新的 THREE.Scene()const camera = new THREE.PerspectiveCamera(75,宽度/高度，0.1,1000)const renderer = new THREE.WebGLRenderer({ antialias: true })const geometry = new THREE.BoxGeometry(1, 1, 1)const material = new THREE.MeshBasicMaterial({ color: '#433F81' })const cube = new THREE.Mesh(geometry, material)相机.位置.z = 4场景.添加(立方体)renderer.setClearColor('#000000')渲染器.setSize(宽度，高度)this.scene = 场景this.camera = 相机this.renderer = 渲染器this.material = 材料this.cube = 立方体this.mount.appendChild(this.renderer.domElement)this.start()}componentWillUnmount() {this.stop()this.mount.removeChild(this.renderer.domElement)}开始() {如果(！this.frameId){this.frameId = requestAnimationFrame(this.animate)}}停止() {取消动画帧(this.frameId)}动画(){this.cube.rotation.x += 0.01this.cube.rotation.y += 0.01this.renderScene()this.frameId = window.requestAnimationFrame(this.animate)}渲染场景(){this.renderer.render(this.scene, this.camera)}使成为() {返回 (
{ this.mount = mount }}/>)}}导出默认场景

您可能还对全屏示例感兴趣(请参阅GitHub).

这是一个使用 React Hooks 代替类的示例.

I work with React and use a canvas. I want to change the canvas to WebGL (Threejs library). How to connect this library to React?

I have some element, e.g.

<div ref="threejs"></div>

How to make it a field for the Threejs library call? P.S:. I don't want to use extensions like react-threejs

解决方案

Here is an example of how to set this up (see demo):

import React, { Component } from 'react'
import * as THREE from 'three'

class Scene extends Component {
  constructor(props) {
    super(props)

    this.start = this.start.bind(this)
    this.stop = this.stop.bind(this)
    this.animate = this.animate.bind(this)
  }

  componentDidMount() {
    const width = this.mount.clientWidth
    const height = this.mount.clientHeight

    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(
      75,
      width / height,
      0.1,
      1000
    )
    const renderer = new THREE.WebGLRenderer({ antialias: true })
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial({ color: '#433F81' })
    const cube = new THREE.Mesh(geometry, material)

    camera.position.z = 4
    scene.add(cube)
    renderer.setClearColor('#000000')
    renderer.setSize(width, height)

    this.scene = scene
    this.camera = camera
    this.renderer = renderer
    this.material = material
    this.cube = cube

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

  componentWillUnmount() {
    this.stop()
    this.mount.removeChild(this.renderer.domElement)
  }

  start() {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate)
    }
  }

  stop() {
    cancelAnimationFrame(this.frameId)
  }

  animate() {
    this.cube.rotation.x += 0.01
    this.cube.rotation.y += 0.01

    this.renderScene()
    this.frameId = window.requestAnimationFrame(this.animate)
  }

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

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

export default Scene

You might also be interested in a full screen example (see GitHub).

Here's an example using React Hooks instead of a class.

这篇关于如何将 Threejs 连接到 React?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！