掉落的甜甜圈｜大帅老猿threejs特训【无标题】

蹦蹦跳跳的niki

于 2023-01-12 22:17:51 发布

阅读量129

点赞数

文章标签： js

本文链接：https://blog.csdn.net/VInalla_Q/article/details/128667282

版权

本文记录了作者在threejs实训中学习到的基础知识，包括模型加载、材质设置、光照处理和动画制作。通过使用blender创建的甜甜圈模型，展示了如何在网页中实现3D甜甜圈从空中掉落的动画效果，详细介绍了从场景设置到动画控制的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大帅老师邀请胖达老师进行了为期三天的threejs实训，三天的直播课下来，学到了很多，包括：

写一篇文章小小记录一下学习的成果，本篇文章主要介绍第一节课的内容：掉落的甜甜圈。

例行先上最终效果：

trim.52D72501-87FD-42BC-A76E-C77AFEEBC6CF.gif

这样的效果是怎么实现的呢？
首先需要有一个模型，模型可以去一些模型网站（比如https://sketchfab.com/ ）下载并使用blender修改成所需要的样子，我这里用了胖达老师预先做好的模型。

模型长这样：

截屏2023-01-12 21.38.33.png

那么如何让它在网页中展示并且动起来呢？一步一步跟我做吧～

首先，最最重要的是基础场景三大件：场景、相机、渲染器

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10<

掉落的甜甜圈 ｜大帅老猿threejs特训【无标题】