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 操作css实现代码
Jun 11 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
微信小程序文章详情功能完整实例
Jun 03 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字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
javascript的几种写法总结
2016/09/30 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
解决Python对齐文本字符串问题
2019/08/28 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
施工安全责任协议书
2016/03/23 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android