关于前端:第一天-Blender操作-大帅老猿threejs特训超详细

前言

这一天次要是基础理论的学习。

自己学习材料仓库

• 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)
}

成果如下

加下背景色、旋转，完结撒花！