安装threejs

npm install three

项目内引入

import * as THREE from 'three';

创建场景对象

容器主要用于保存需要渲染的物体

const scene = new THREE.Scene();

创建球型

基础形状也可选择其他形状，如方形（BoxGeometry）

const geometry = new THREE.SphereGeometry(60, 40, 40);

创建材质

const material = new THREE.MeshLambertMaterial({
    color: 0x0000ff
  });

创建网格对象

const mesh = new THREE.Mesh(geometry, material);

创建点光源

const point = new THREE.PointLight(0xffffff);

点光源位置

point.position.set(400, 200, 300);

环境光

const ambient = new THREE.AmbientLight(0x444444);

相机设置

像一扇窗户透过这个窗户观察场景内的物体

窗口宽度

const width = 200;

窗口高度

const height = 300;

窗口宽高比

const k = width / height;

显示范围系数

值越大，显示的物体越多，物体看起来就越小

const s = 100;

创建相机对象

const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 400);

设置相机位置

camera.position.set(200, 300, 200);

设置相机方向

这里将相机指向场景

camera.lookAt(scene.position);

创建渲染器对象

const renderer = new THREE.WebGLRenderer();

设置渲染区域

renderer.setSize(200, 400);

设置背景颜色

renderer.setClearColor(0xb9d3ff, 1);

将元素集合

添加网格模型

scene.add(mesh);

添加点光源

scene.add(point);

添加环境光

scene.add(ambient);

创建对象

renderer.render(scene, camera);

渲染

document.getElementById("oneThree")?.appendChild(renderer.domElement);

react内创建

React.useEffect(() => {
    document.getElementById("oneThree")?.appendChild(renderer.domElement);
  })
  
return (
  <>
    <div id='oneThree'></div>
  </>

一些threejs的相关库

Physijs

Physijs是一款物理引擎，可以协助基于原生WebGL或使用three.js创建模拟物理现象，比如重力下落、物体碰撞等物理现象

stats.js

JavaScript性能监控器，同样也可以测试webgl的渲染性能

dat.gui

轻量级的icon形用户界面框架，可以用来控制Javascript的变量，比如WebGL中一个物体的尺寸、颜色

tween.js

借助tween.js快速创建补间动画，可以非常方便的控制机械、游戏角色运动

ThreeBSP

可以作为three.js的插件，完成几何模型的布尔，各类三维建模软件基本都有布尔的概念

web前端 threejs之路 -- 1