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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
js禁止表单重复提交
Aug 29 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 Javascript
Layui数据表格之单元格编辑方式
Oct 26 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经典的给图片加水印程序
2006/12/06 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
node实现定时发送邮件的示例代码
2017/08/26 Javascript
Vue渲染函数详解
2017/09/15 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
会计专业应届生求职信
2013/11/24 职场文书
计划生育目标责任书
2015/05/09 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
python中使用redis用法详解
2022/12/24 Redis