Three.js基础学习之场景对象


Posted in Javascript onSeptember 27, 2017

前言

本文主要给大家介绍了关于Three.js场景对象的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

通过这一段时间的学习,发现还没有介绍过场景的基本组件。这一节就简单的介绍一下相关的内容:

如果我们想让物体显示出来,首先,我们需要有一个渲染器(new THREE.WebGLRenderer() )来渲染模型和相机。

渲染的模型需要放到场景(THREE.Scene() )对象中,场景对象就是专门放置模型等一系列组件的地方,必须有一个模型和一个光源才可以显示出来模型。

最后需要使用调用实例化的渲染器的渲染方法将需要渲染的场景和相机传入,才可以显示出来。

如果需要查看在场景中放置的组件,可以打印一下

console.log(scene.children);

将返回一个由所有组件组成的组件数组。

向场景里面添加一个模型组件的方法将使用

scene.add(THREE.Object3D);

如果需要删除一个添加到场景内的组件,需要使用

scene.remove(THREE.Object3D);

遍历scene场景内的所有的子元素的方法:

scene.traverse(function(obj){console.log(obj)});

打印出来的将是场景的每个子元素。

如果组件设置了添加了id属性或者name属性,则我们可以通过以下方法从场景中获取到目标组件

scene.getObjectByName(name); 
scene.getObjectById(id);

有了上面的这些方法,我们就可以很方便的对场景内的模型组件进行操作。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Three.js具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS获取页面窗口大小的代码解读
Dec 01 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 #Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 #Javascript
基于复选框demo(分享)
Sep 27 #Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 #Javascript
angular内置provider之$compileProvider详解
Sep 27 #Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 #Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 #Javascript
You might like
php header()函数使用说明
2008/07/10 PHP
php 设计模式之 单例模式
2008/12/19 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
取选中的radio的值
2010/01/11 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
javascript History对象原理解析
2020/02/17 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python实现购物车程序
2018/04/16 Python
django富文本编辑器的实现示例
2019/04/10 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python numpy存取文件的方式
2020/04/01 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
String和StringBuffer的区别
2015/08/13 面试题
给老师的道歉信
2014/01/11 职场文书
表决心的诗句大全
2014/03/11 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers