Web3D初窥

小记

如果没有ai，我将来的兴趣可能扎根在前端艺术影视效果展示，有ai后基本就废了。到最后还是建模占大头，就大一的时候学了ps和ai，之后的剪辑以及建模搁置了，也没那个精力了，以后有需要再学吧。

我在主页里放了 front_show ，灵感来源：

https://dogstudio.co/

https://sketchfab.com/3d-models

其实想把 dog 的颜色渐变效果也搞出来的，大致原理其实就是颜色的映射，但当前效果也还行，就这样凑合了

Web3D Three.js 学习网站：https://threejs-learning.com/zh/guide/introduction.html

核心就是三要素以及你的建模

scene   // 世界（容器）
camera  // 眼睛
renderer// 画笔
animate // 循环（每秒 60 次重画）

scene.add(modelRoot)          // 定位 + 缩放
modelRoot.add(scrollGroup)    // 滚动位移/旋转
scrollGroup.add(tiltGroup)    // 鼠标倾斜
tiltGroup.add(model)          // 真正的模型

const bounds = new THREE.Box3().setFromObject(object); // 求包围盒
const size   = bounds.getSize(new THREE.Vector3());    // 求尺寸
const scale  = MODEL_MAX_SIZE / Math.max(size.x, size.y, size.z);
object.scale.setScalar(scale);                         // 统一大小
object.position.set(-center.x * scale, ...);           // 居中

pointer.lerp(pointerTarget, 0.045);
// 等价于：
pointer.x += (pointerTarget.x - pointer.x) * 0.045;

const theta = Math.random() * Math.PI * 2;      // 经度，均匀
const phi   = Math.acos(2 * Math.random() - 1); // 纬度，要 acos