WEB 3D Technology A brief introduction to the three.js method used in React Hook/Class components

I have already talked about using vue combined with three.js for development
Then react is naturally indispensable

Let’s create a folder first

Terminal execution

npm init vite@latest

Enter the project name and select react as the technology

I don’t know the basics of everyone, so choose the simplest js
and then we will create it.

Then we use the editor to open the created project directory

Then execute in the terminal

npm install three

Introduce threeJS because we must use it

Then we execute

npm install

Reintroduce the project dependencies as a whole

If the node version is not suitable, there will be some problems
You can use cnpm

Then execute it after installation

npm run dev

Then the browser accesses

without any problems

Then we find App.css under src
and add the following code

*{
    
    
  margin: 0;
  padding: 0;
}
canvas {
    
    
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 108vw;
  height: 108vh;
}

Then change the App.jsx code as follows

import {
    
     useEffect } from 'react'
import * as THREE from "three";
import './App.css'

function App() {
    
    

  useEffect(()=>{
    
    
    //创建场景
    const scene = new THREE.Scene();

    //创建相机
    const camera = new THREE.PerspectiveCamera(
        45, //视角 视角越大  能看到的范围就越大
        window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
        0.1,  //近平面  相机能看到最近的距离
        1000  //远平面  相机能看到最远的距离
    );

    //c创建一个canvas容器  并追加到 body上
    const renderer = new THREE.WebGLRenderer(0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //创建一个几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    //创建材质
    const material = new THREE.MeshBasicMaterial({
    
     color:0x08ffe });
    //创建网格
    const cube = new THREE.Mesh(geometry, material);
    //将网格添加到场景中
    scene.add(cube);
    //设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
    camera.position.z = 5;
    //设置相机默认看向哪里   三个 0  代表 默认看向原点
    camera.lookAt(0, 0, 0);
    //将内容渲染到元素上
    renderer.render(scene, camera);
    function animate() {
    
    
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();
  },[])

  return (
    <div id = "app"></div>
  )
}

export default App

This is a way of writing Hook. First introduce three
and then use it directly in the useEffect declaration cycle. Obviously the logic is OK

If it is a class The component is directly like this

import {
    
     Component } from 'react'
import * as THREE from "three";
import './App.css'

class App extends Component{
    
    

  componentDidMount() {
    
    
    //创建场景
    const scene = new THREE.Scene();

    //创建相机
    const camera = new THREE.PerspectiveCamera(
        45, //视角 视角越大  能看到的范围就越大
        window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
        0.1,  //近平面  相机能看到最近的距离
        1000  //远平面  相机能看到最远的距离
    );

    //c创建一个canvas容器  并追加到 body上
    const renderer = new THREE.WebGLRenderer(0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //创建一个几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    //创建材质
    const material = new THREE.MeshBasicMaterial({
    
     color:0x08ffe });
    //创建网格
    const cube = new THREE.Mesh(geometry, material);
    //将网格添加到场景中
    scene.add(cube);
    //设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
    camera.position.z = 5;
    //设置相机默认看向哪里   三个 0  代表 默认看向原点
    camera.lookAt(0, 0, 0);
    //将内容渲染到元素上
    renderer.render(scene, camera);
    function animate() {
    
    
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();
  }

  render() {
    
    
    return <div id = "app"></div>
  }
}

export default App

Because componentDidMount can get the dom node, we use it to mount it. In fact, it is the same