18 Three.js的场景对象
2017-08-03 23:08
260 查看
通过这一段时间的学习,发现还没有介绍过场景的基本组件。这一节就简单的介绍一下相关的内容:
如果我们想让物体显示出来,首先,我们需要有一个渲染器(new THREE.WebGLRenderer())来渲染模型和相机。
渲染的模型需要放到场景(THREE.Scene())对象中,场景对象就是专门放置模型等一系列组件的地方,必须有一个模型和一个光源才可以显示出来模型。
最后需要使用调用实例化的渲染器的渲染方法将需要渲染的场景和相机传入,才可以显示出来。
如果需要查看在场景中放置的组件,可以打印一下
向场景里面添加一个模型组件的方法将使用
如果需要删除一个添加到场景内的组件,需要使用
遍历scene场景内的所有的子元素的方法:
scene.traverse(function(obj){console.log(obj)});打印出来的将是场景的每个子元素。
如果组件设置了添加了id属性或者name属性,则我们可以通过以下方法从场景中获取到目标组件
有了上面的这些方法,我们就可以很方便的对场景内的模型组件进行操作。
如果我们想让物体显示出来,首先,我们需要有一个渲染器(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提升学习1:创建场景并渲染三维对象
- Three.js基础学习之场景对象
- [.net 面向对象程序设计深入](18)实战设计模式——设计模式使用场景及原则
- -Three.js开发指南---用three.js创建你的第一个三维场景(第一章)
- Three.js中网格对象MESH的属性与方法详解
- 12 Three.js官方文档介绍的相关对象功能列表
- THREE.JS之文本对象
- three.js--如何给一个场景贴图
- Three.js 中文手册-创建场景
- three.js 08-03 之 加载和保存对象
- three.js 02-01 之场景基本功能
- Three.js创建一个场景(Creating a scene)
- Three.js源码阅读笔记(基础的核心Core对象)
- three.js 01-02 之首个场景
- Three.js 保存camera(视角)设置到数据库,包括场景的缩放、旋转、移动等
- three.js旋转的场景canvas_camera_orthographic
- Three.JS提升学习2:构建Three.js场景的基本组件
- three.js自学之旅(5)—— 辅助对象的使用、扩展一个新的基础方法调整对象参数
- Three.js学习记录--html5的编辑和第一个场景
- three.js 场景入门