Threejs定义
Threejs运行在浏览器的3d javascript库(three表示3D的意思,js表示javascript)
Three主要对象
1.场景(Scene):是物体、光源等元素的容器,
2.相机(Camera):控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机
3.渲染器(Renderer):指定渲染方式,如webGL\canvas2D\Css2D\Css3D等。
4.物体对象(Mesh):包括二维物体(点、线、面)、三维物体、粒子
5.光源(Light):包括全局光、平行光、点光源
6.控制器(Control): 相机控件,可通过键盘、鼠标控制相机的移动
场景(Scene)
物体、光源、控制器的添加必须使用secen.add(object)添加到场景中才能渲染出来。一个3D项目中可同时存在多个scene,通过切换render的scene来切换显示场景
var scene = new THREE.Scene(); // 创建场景对象
var mesh=scene.getObjectByName("sky");//获取场景中命名的name=sky的对象
方法 | 属性 |
---|---|
add(object) | 用于向场景中添加对象。使用该方法还可以创建对象组。(几何体、光源等对象) |
children | 用于返回一个场景中所有对象的列表,包括摄像机和光源。 |
getObjectByName(name,recursive) | 在创建对象时可以指定唯一的标识 name,使用该方法可以查找特定名字的对象。当参数 recursive 设置为 false 时,在调用者子元素上查找,当参数 recursive 设置为 true 时,在调用者的所有后代对象上查找 |
remove(object) | 用于向场景中添加对象。使用该方法还可以创建对象组。 |
fog | 使用该属性可以为场景添加雾化效果,可以产生隐藏远处物体的浓雾效果。 |
overrideMaterial | 使用该属性可以强制场景中的所有物体使用相同的材质。 |
相机(Camera)
相机根据投影方式分两种:正交投影相机和透视投影相机
正交投影相机:THREE.OrthographicCamera(left, right, top, bottom, near, far),大小不因远近而变化
透视投影相机:THREE.PerspectiveCamera(fov, aspect, near, far),遵循近大远小的空间规则
一般情况下,我们使用的是透视投影相机,其参数为:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200130151335169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4Znl0ZWVu,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200130151336406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4Znl0ZWVu,size_16,color_FFFFFF,t_70)
来源:CSDN
作者:txfyteen
链接:https://blog.csdn.net/txfyteen/article/details/104114955