【选修】React + Three.js开发环境

视频讲解 (opens new window)

• 在React开发环境引入threejs
• 如果你不熟悉React，直接跳过本节课即可，不用学习
• 本节课是选修内容，即便不学习本节课，也不影响你学习threejs后面的知识点。

脚手架create-react-app

脚手架create-react-app创建react项目。

npx create-react-app 项目名字

创建一个名为reactthree的项目文件。

npx create-react-app reactthree

启动项目

进入reactthree项目目录，命令行输入npm run start,启动打开项目

npm run start

你可以删除react默认页面对应的HTML和CSS代码，再写threejs代码。

npm安装threejs

你可以选择你想安装的threejs版本。

// 比如安装157版本
npm install three@0.157.0 -S

知识点回顾

回顾下前面1.6. 第一个3D案例 (opens new window)知识点

大家都知道three.js执行渲染命令.render();会输出一个canvas画布renderer.domElement，这个Canvas画布本质上就是一个HTML元素，你可以插入到web页面任何一个元素中。

// WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); 
renderer.render(scene, camera);
//three.js执行渲染命令会输出一个canvas画布(HTML元素)
document.body.appendChild(renderer.domElement);

React与threejs结合思路

threejs与React结合的时候，你只需要把Canvas画布renderer.domElement插入到你的react页面上就行，可以放在web网页的任何位置，插入任何一个div或其它元素中，或者放到某个React组件中。

你写的threejs代码结构，并不一定就要和我视频完全一致，你可以根据你自己项目情况，自由封装。

新建indexThree.js文件

新建indexThree.js文件,把threejs代码写在indexThree.js里面。

引入three.jsimport * as THREE from 'three';。

// indexThree.js文件
import * as THREE from 'three';

你可以把前面第一个3D案例 (opens new window)的代码复制到indexThree.js文件。

// 三维场景
const scene = new THREE.Scene();
// 模型对象
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, 
});
const mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 
// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(250);
scene.add(axesHelper);
const width = 800; //宽度
const height = 500; //高度
// 相机
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0);
// WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); 
renderer.render(scene, camera);
//three.js执行渲染命令会输出一个canvas画布(HTML元素)，你可以插入到web页面中
document.body.appendChild(renderer.domElement);

然后把indexThree.js引入到index.js文件执行即可,这样threejs的代码会跟着index.js执行，当然你也可以在其的React文件，比如某个组件中调用threejs代码。

// index.js文件
import React from 'react';
...
// 执行threejs代码
import './indexThree.js'
...
const root = ReactDOM.createRoot(document.getElementById('root'));
...

设置canvas画布全屏

上面画布设置了固定宽高度，下面改成文档区域宽高度，也就是所谓canvas画布全屏

const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);

// 可以放到react项目index.css文件中
body{
    // 把canvas画布与body区域边距设置为0
    margin: 0px;
}

引入扩展库OrbitControls

查看你npm安装文件node_modules，在目录three/examples/jsm下面有threejs的很多扩展库，一般你用到那个，单独引入即可，下面以OrbitControls为例给大家展示。

OrbitControls功能就是旋转缩放平移，在1.9小节有具体讲解：1.9. 相机控件OrbitControls (opens new window)，如果还没学习，可以提前看下。

// 引入路径
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

复制1.9. 相机控件OrbitControls (opens new window)里面关于相机控件的代码。

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件