Three.js 基础入门--第03课：基础功能之 Scene 场景

紫微前端

已于 2023-04-11 09:05:41 修改

阅读量429

点赞数

CC 4.0 BY-SA版权

分类专栏： three.js基础入门（案例代码及效果在最后一节课的底部）文章标签： javascript 前端开发语言 three.js

于 2023-04-11 09:02:00 首次发布

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/130075329

three.js基础入门（案例代码及效果在最后一节课的底部）专栏收录该内容

16 篇文章 ¥299.90 ¥399.90

订阅专栏

超级会员免费看

本文介绍了Three.js中Scene场景的基本概念，包括如何添加、删除和查找3D对象，以及如何修改对象的位置、大小和旋转。此外，还详细讲解了THREE.Object3D基类，并通过dat.GUI展示了实时调试场景参数的方法。

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

场景是我们每个 Three.js 项目里面放置内容的容器，我们也可以拥有多个场景进行切换展示，你可以在场景内放置你的模型、灯光和照相机。还可以通过调整场景的位置，让场景内的所有内容都一起跟着调整位置。

场景的结构

之前在刚刚开始学 JavaScript 基础时，我们总免不了去操作 DOM 对象，而且我们都知道 DOM 的结构是树形结构的，Three.js 也遵循了这样的理念，将所有可以添加到场景内的结构梳理成了一种树形的结构，方便我们能够更好的理解Three.js。

我们可以把 Scene 想象成一个 body，body 内可以添加 DOM 对象，scene 内也可以添加它的 3D 对象，这样一层层的嵌套出来，组成了我们现在需要的项目。所以，在 Three.js 中，为了方便操作，将所有 3D 对象共同的内容抽象成了一个基类，就是 THREE.Object3D。

THREE.Object3D

为了方便操作，Three.js 将每个能够直接添加到场景内的对象都继承自一个基类——THREE.Object3D，以后我们将继承自这个基类的对象称为 3D 对象，判断一个对象是否是继承自 THREE.Object3D，我们可以这么做：

obj instanceof THREE.Object3D
//继承至返回 true 否则返回false

这个基类上封装了我们常用的一些方法，下面我们分别介绍下。

向场景内添加一个 3D 对象

了解本专栏

超级会员免费看