Question

你好，我从thrrejs开始，在互联网上找到了这个示例，我想知道如何使用钩子重写它，我尝试使用useRef（null），但是它给出了错误，如果有人知道的话让我知道。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";
class App extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();
    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
    this.mount.appendChild( renderer.domElement );
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;
    var animate = function () {
      requestAnimationFrame( animate );
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render( scene, camera );
    };
    animate();
  }
  render() {
    return (
      <div ref={ref => (this.mount = ref)} />
    )
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

    import React, { useRef, useEffect } from "react";
    import ReactDOM from "react-dom";
    import * as THREE from "three";



    clet App = () => {
  const mount = useRef(null);

      useEffect(()=>{
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer();
        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
        mount.appendChild( renderer.domElement );
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );
        camera.position.z = 5;
        var animate = function () {
          requestAnimationFrame( animate );
          cube.rotation.x += 0.01;
          cube.rotation.y += 0.01;
          renderer.render( scene, camera );
        
animate();
},[])
        
      
      render() {
        return (
          <div ref={ref => (mount = ref)} />
        )
      }
    }
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

可能

Answer 2

这是一个非常简单的重构。基本上，我们可以使用useRef()钩子来创建一个新的ref，并将其传递给return语句中的元素。

接下来，我们用useEffect()钩子替换componentDidMount函数。唯一缺少的是卸载组件时返回的清理回调。但是，由于这是一个简单的示例，因此此处可能不需要。

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";

function App() {
  const ref = useRef();

  useEffect(() => {
    const scene = new THREE.Scene();
    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 );
    // use ref as a mount point of the Three.js scene instead of the document.body
    ref.current.appendChild(renderer.domElement);
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
    const animate = function () {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();

    return () => {
        // Callback to cleanup three js, cancel animationFrame, etc
    }
  }, []);

  return <div ref={ref} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何在此代码中使用react挂钩？来三个js”

2 个答案: