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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
slice函数的用法 之不错的应用
Dec 29 Javascript
UI Events 用户界面事件
Jun 27 Javascript
PHP守护进程实例
Mar 06 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
node.js的事件机制
Feb 08 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 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/11/23 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
深入探讨前端框架react
2015/12/09 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
基于Python把网站域名解析成ip地址
2020/05/25 Python
python线程池如何使用
2020/05/28 Python
python中turtle库的简单使用教程
2020/11/11 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
思想专业自荐信范文
2013/12/25 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
医院见习总结
2015/06/24 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
php去除deprecated的实例方法
2021/11/17 PHP