共计 2197 个字符，预计需要花费 6 分钟才能阅读完成。
前言
这一天次要是基础理论的学习。
自己学习材料仓库
- https://gitee.com/zhang_dezhe…
- YCY-TrainingCamp-S2: 在原有的文件上增加自己的学习记录
- 第一天 Blender 操作 | 大帅老猿 threejs 特训【超具体】【我在掘金的同名文章】
一、纲要
二、THREE 根底概念
透视相机模仿人眼的视角，通常用的比拟多。正交相机，远近一样，没有近小远大的感觉。
环境光给一点就行，给太多不实在。
方向光，暗影太暗时补光，
漫反射，根底色彩，如给苹果加红色。
三、THREE API
个别用右边的，左边的会节约空间
四、获取模型
glTF 格局，blender 是目前 3D 软件惟一可导入导出该格局的软件。
五、Blender 快捷键
六、Blender 初体验
导入甜甜圈文件，记得抉择 gltf 格局，
因为模型尺寸过大，要略微挪动下，就看不到前面的局部，因而，需进行放大操作。
缩放后，需 ctrl + a 抉择 全副变换 进行利用，免得缩放比例对前面操作的影响。
点击物体，选中了物体，这时左上角的 物体模式 就能够去切换为 编辑模式【tab】.
拆散选中项，可拆分出局部模型。利用此操作能够把上图组合选中的面包拆分成单个，如下图的操作。
如下图，发现每一次只能拆出一小部分，多次重复操作，就能拆出一个残缺的面包！！
模仿甜甜圈从地面掉落到托盘的过程
别离给每个甜甜圈加 刚体
给托盘加 刚体 ，设置 被动
成果如下
烘焙到关键帧
导出为 win10 可辨认的 glb 格局，关上预览
七、操作阐明
编辑模式下，可切换点线面，ctrl + 点击选中，能够实现点线面的多选。
按键 / 能够独立操作物体
八、开始应用咱们后面创立的面包动画
不懂的属性查文件，文档写的很分明
依照前文常识，我的代码如下
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10)
// camera.position.set(0,0,2) 放开后即可看到绿色的正方体
// 渲染器 WebGL1Renderer
const renderer = new THREE.WebGL1Renderer({
// 抗锯齿
antialias: true
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 创立环境光，让所有货色都亮起来
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight)
// 物体 创立立方体：长宽高均为 1
const boxGeometry = new THREE.BoxGeometry(1, 1, 1)
// 材质 MeshBasicMaterial: 根底材质
const boxMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00})
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial)
scene.add(boxMesh)
// 帧循环
function animation() {requestAnimationFrame(animation)
renderer.render(scene, camera)
}
// 动画入口
animation()此时眼前一黑，啥也看不见。
补充常识
上面我创立面片 plane, 这里存在 反面剔除 的 3d 学知识点，如下图所示
让咱们进入透视相机的视角【此处为右手坐标系】
回到后面，“眼前一黑”是因为没设置相机地位，前文的代码里我加了这个正文，放开后就可看到正方体了
加控制器，就能够用鼠标管制物体
const controls = new OrbitControls(camera, renderer.domElement)导入 donuts.glb
应用 THREE.AnimationMixer 创立动画混合器，让所有动画共享该混合器，遍历执行，记得要在真循环外面执行该混合器的更新 mixer?.update(0.02)【0.02 是必要的，没数值，它不晓得隔多久更新】，就能够让动画动起来了。当初默认是循环播放，优化一下，设置播放一次，停在最初一帧。代码如下
// 当场景中的多个对象独立动画时，每个对象都能够应用同一个动画混合器。mixer = new THREE.AnimationMixer(gltf.scene)
// play each animation
const clips = gltf.animations
clips.forEach(clip => {const action = mixer.clipAction(clip)
// 只播放一次
action.loop = THREE.LoopOnce
action.play()
// 动画停在最初一帧
action.clampWhenFinished = true
})function animation() {requestAnimationFrame(animation)
renderer.render(scene, camera)
controls.update()
// 0.02 必须填否则没有数据
mixer?.update(0.02)
}成果如下
加下背景色、旋转，完结撒花！
