three.js入门掉落的甜甜圈实战 | 大帅老猿threejs特训-卡咪卡咪哈-一个博客

随着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开发。

下载处理模型

在实际项目我们是需要和美术合作的，当然如果你或者你对象懂3d建模就再好不过了。打开资源网站，搜索模型，打开详情，点击download按钮。使用blender导入模型。使用blender导出glb模型文件。

使用vite搭建项目。

Vite 能帮我们快速搭建项目。

npm create vite@latest

three.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();