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 相关文章推荐
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
JavaScript 下载svg图片为png格式
Jun 21 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 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
SONY SRF-40W电路分析
2021/03/02 无线电
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
详解jQuery选择器
2016/12/21 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
es6新特性之 class 基本用法解析
2018/05/05 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python中Django 后台自定义表单控件
2017/03/28 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python之list对应元素求和的方法
2018/06/28 Python
Flask框架web开发之零基础入门
2018/12/10 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python阶乘求和的代码详解
2020/02/14 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
python 基于opencv去除图片阴影
2021/01/26 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
图书馆标语
2014/06/19 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
英语演讲开场白
2015/05/29 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python