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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
angular select 默认值设置方法
Jun 23 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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集成动态口令认证
2016/07/21 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
js转html实体的方法
2016/09/27 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue 项目常用加载器及配置详解
2018/01/22 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
python实现推箱子游戏
2020/03/25 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python 安装impala包步骤
2020/03/28 Python
python如何实时获取tcpdump输出
2020/09/16 Python
极简的HTML5模版
2015/07/09 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
环保建议书400字
2014/05/14 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
薪资证明范本
2015/06/19 职场文书
教师节大会主持词
2015/07/06 职场文书
网络舆情信息简报
2015/07/21 职场文书
《青山不老》教学反思
2016/02/22 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP