随着webGL的热度越来越高，作为一个老前端也想去学习一下，我选择入门three.js了解一下。
webGL & Three.js 简介
WebGL 是一项在浏览器体现 3D 画面的技术。是一种3D绘图标准，允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染（部分计算GPU），这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
Three.js(Javascript 3D library)，使用JavaScript语言对WebGL进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发。
相关文档
- three.js中文文档
- 免费3D模型下载网站、模型下载
- blender下载，Blender是一款免费的三维全功能软件.
- Vite中文文档
- 素材源码
下载处理模型
在实际项目我们是需要和美术合作的，当然如果你或者你对象懂3d建模就再好不过了。
- 打开资源网站，搜索模型，打开详情，点击download按钮。
- 使用blender导入模型。
- 使用blender导出glb模型文件。
使用vite搭建项目。
Vite 能帮我们快速搭建项目。
npm create vite@latestthree.js 基本概念
三维的物体要渲染在二维的屏幕上。首先要创建一个场景来放置物体，那么最终怎么显示三维的内容，就应该找一个相机，将相机放在场景的某个位置，然后想要显示就要把相机拍的内容渲染出来。所以就引出三个基本概念：场景、相机、渲染器。
创建场景
const scene = new THREE.Scene();创建相机
three.js 中相机分为立方体相机、正交相机、远景相机。这里我们使用的是远景相机。
构造函数 PerspectiveCamera( fov, aspect, near, far )
- fov — 相机视锥体垂直视角
- aspect — 相机视锥体宽高比
- near — 相机视锥体近裁剪面
- far — 相机视锥体远裁剪面。
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10);渲染器
three.js 中渲染器分为Canvas渲染器（CanvasRenderer）、WebGL渲染器（WebGLRenderer）这里我使用WebGL渲染器。
构造函数 WebGLRenderer( parameters )
parameters 是一个可选对象，包含用来定义渲染器行为的属性。当没有设置该参数时，将使用默认值。
- canvas — 一个用来绘制输出的 Canvas 对象。
- context — 所用的 渲染上下文(RenderingContext) 对象。
- precision — 着色器的精度。可以是"highp", "mediump" 或 "lowp". 默认为"highp"，如果设备支持的话。
- alpha — Boolean, 默认为 false.
- premultipliedAlpha — Boolean, 默认为 true.
- antialias — Boolean, 默认为 false.
- stencil — Boolean, 默认为 true.
- preserveDrawingBuffer — Boolean, 默认为 false.
- depth — Boolean, 默认为 true.
- logarithmicDepthBuffer — Boolean, 默认为 false.
// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body中
document.body.appendChild(renderer.domElement);光照
three.js中光照有以下几种：环境光源（AmbientLight）、点光源（PointLight）、聚光光源（SpotLight）、平行光源（DirectionalLight）、半球光源（HemisphereLight）
其中支持阴影的光照有：点光源，聚光灯，平行光源。
这里我使用的是半球光源 DirectionalLight( hex, intensity )
- hex -- 光源颜色的RGB数值。
- intensity -- 光源强度的数值。
创建一个光照，从一个特定的方向，而不是从一个特定的位置。这个光看起来就像光源位于无限远处，因此它产生的光线都是平行的。 最好的类比是一个像太阳一样的光源：太阳是如此遥远，所有的阳光照射到物体上都几乎来自同一个角度。
// 创建环境光
const directionLight = new THREE.DirectionalLight(0xffffff, 0.4);
// 讲环境光添加到场景
scene.add(directionLight);加载资源
加载模型，播放模型中所有动画。
new GLTFLoader().load('../resources/models/donuts.glb', (gltf) => {
scene.add(gltf.scene);
donuts = gltf.scene;
mixer = new THREE.AnimationMixer(gltf.scene);
const clips = gltf.animations; // 播放所有动画
clips.forEach(function (clip) {
const action = mixer.clipAction(clip);
action.loop = THREE.LoopOnce;
// 停在最后一帧
action.clampWhenFinished = true;
action.play();
});
})加载环境贴图
new RGBELoader()
.load('../resources/sky.hdr', function (texture) {
scene.background = texture;
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = texture;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.render(scene, camera);
});动画
使用requestAnimationFrame 播放动画，设置动画播放参数。
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
if (donuts){
donuts.rotation.y += 0.01;
}
if (mixer) {
mixer.update(0.02);
}
}
animate();最后
github完整代码，感谢“大帅老猿”和“胖达”两位老师举办的这次活动，感兴趣同学，加入猿创营 (v:dashuailaoyuan)，一起交流学习。