React中使用threejs创建立方体

使用基本对象

在渲染3D场景的时候，有几点必须要创建的对象

• 场景 - 承载要显示内容的容器
• 相机 - 呈现的视角，或者可以理解为眼睛
• 渲染器 - 利用场景和相机进行渲染

安装three

// 安装three
// yarn add three

// 使用ts的，可以安装对应的types
// yarn add -D @types/three

渲染立方体

下面以渲染一个立方体为例简单说明下基本使用的步骤

1. 创建基本的三对象

import { useEffect, useRef } from 'react';
import * as THREE from 'three';

export default function DemoComponent() {
  const boxRef = useRef<HTMLDivElement>(null);
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 场景
  const scene = new THREE.Scene();

  // 相机
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
  camera.position.set(100, 100, 150);
  camera.lookAt(scene.position);

  // 渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);// 设置渲染区域大小
  renderer.setClearColor(0xb9d3ff, 1);// 设置渲染区域背景

  // 执行渲染操作-指定场景、相机作为参数
  renderer.render(scene, camera);

  useEffect(() => {
    boxRef.current?.appendChild(renderer.domElement);
    return () => {
      boxRef.current?.removeChild(renderer.domElement);
    };
  }, [boxRef, renderer]);

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

2. 添加坐标辅助

有坐标辅助，有助于调整坐标位置及角度等

  // 坐标
  const axes = new THREE.AxesHelper(1000);
  axes.name = "AxesHelper";
  scene.add(axes);

3. 创建立方体模型

此时需要创建立方体并添加到场景中进行显示

  // 创建一个立方体几何体
  const geometry = new THREE.BoxGeometry(50, 50, 50);
  // 创建一个材质
  const material = new THREE.MeshLambertMaterial({
    color: 0xff00ff,
  })
  // 利用几何体和材质生成网格模型
  const mesh = new THREE.Mesh(geometry, material);
  // 把网格模型添加到场景中
  scene.add(mesh);

4. 设置光源

此时看到的立方体是一块黑色的区域，需要添加光源来进行显示

  // 环境光-显示物体
  const ambient = new THREE.AmbientLight(0x888888);
  scene.add(ambient);

  // 点光源-具备立体感
  const point = new THREE.PointLight(0xffffff);
  point.position.set(150, 100, 500); // 点光源位置
  scene.add(point); // 点光源添加到场景中

5. 最终效果
   

参考文档

Three.js教程
threejs手册