引入three
npm i three -S
在react中使用
- 创建场景
后续模型、光源等都通过scene.add函数添加至场景中
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xffffff)
- 创建相机
相机主要有正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）。透视相机模范人眼，一般采用透视相机比较多。
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 400 //相机位置
可以添加OrbitControls控件来自由的旋转缩放预览效果。此处导入OrbitControls的地址与官网不同，当前three版本0.162.0。添加方式：
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', function () {
renderer.render(scene, camera)
})
- 创建渲染器
renderer.domElement 本质上是一个canvas元素。
可以用renderer.render(scene, camera)来渲染需要绘制的内容。如果需要动画之类的效果，可以使用requestAnimationFrame，在每一帧修改模型等的属性，如位置、旋转等
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
animate()
- 创建3D文本
- 导入FontLoader、TextGeometry 以及字体的json格式描述文件（three源码中内置了几种字体）
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
import HelvetikerFont from 'three/examples/fonts/helvetiker_bold.typeface.json'
2.绘制字体
loader.load的第一个参数需要是url地址，使用URL.createObjectURL创建url。
const loader = new FontLoader()
const jsonUrl = URL.createObjectURL(new Blob([JSON.stringify(HelvetikerFont)], { type: 'application/json' }));
loader.load(jsonUrl, function (font) {
const geometry = new TextGeometry('Hello three.js!', {
font: font, //THREE.Font的实例
size: 100, //字体大小，默认值为100
height: 5, //挤出文本的厚度。默认值为50
curveSegments: 12,//表示文本的）曲线上点的数量。默认值为12
bevelEnabled: true, //是否开启斜角，默认为false
bevelThickness: 10, //文本上斜角的深度，默认值为20
bevelSize: 2, //斜角与原始文本轮廓之间的延伸距离。默认值为8
bevelSegments: 5 //斜角的分段数。默认值为3
});
geometry.computeBoundingBox()
const centerOffset = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x)
const material = new THREE.MeshPhongMaterial({ color: 0xffffff })
const textMesh = new THREE.Mesh(geometry, material)
textMesh.position.x = centerOffset
textMesh.position.y = 10
textMesh.position.z = 0
scene.add(textMesh)
}, (e) => {
console.log('progress', e)
}, (e) => {
console.log('err', e)
});
