ReactThree入门1-快速场景搭建

简介与安装

react-three-fiber 是一款集成了 threejs 绝大部分功能且以标签的形式来构建 3d 场景的库

由于版本更新，最新的库改名为：@react-three/fiber

所以下载方式更新为：npm i @react-three/fiber

最简案例

以下代码创建了一个简单的自旋转立方体，立方体的颜色为粉红色，且带有照明光源，摄像机角度以默认调整好

开发前需要记住的两个特性：

• 每个画布通过标签 <Canvas> 构建
• 其余标签均以小写开头，库会自动识别并进行转换，这个设置是为了和 react 内部组件区别开

import React, {
    
     useRef } from "react";
import {
    
     Canvas, useFrame } from "@react-three/fiber";

// 将渲染立方体的函数抽离，单独为一个子组件
function Cube() {
    
    
	// meshref获取mesh标签的DOM
	const meshRef = useRef(null);

	// 使用库提供的钩子useFrame，实现实时更新模型状态
	useFrame(() => {
    
    
		// 如果检测到模型不存在，那么return
		if (!meshRef.current) {
    
    
			return;
		}

		// 如果模型存在，则每一帧在x和y轴旋转量加0.01
		meshRef.current.rotation.x += 0.01;
		meshRef.current.rotation.y += 0.01;
	});

	return (
		// mesh通过ref传送DOM给指定属性
		// boxGeometry渲染一个立方体
		// meshStandardMaterial给予一个标准材质
		<mesh ref={
    
    meshRef}>
			<boxGeometry args={
    
    [2, 2, 2]} />
			<meshStandardMaterial color="hotpink" />
		</mesh>
	);
}

// 组件主函数
const ThreeDemo = () => {
    
    
	return (
		// Canvas画布
		// ambientLight设置光源条件
		// pointLight设置点光源，position指定点光源位置
		// Cube生成立方体的子组件
		<Canvas>
			<ambientLight />
			<pointLight position={
    
    [10, 10, 10]} />
			<Cube />
		</Canvas>
	);
};

export default ThreeDemo;