1.Three三大基本元素:
scene:场景
camera:相机
renderer:渲染器
新建html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
基本js代码:
var scene = new THREE.Scene();//设置场景
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//设置相机
var renderer = new THREE.WebGLRenderer();//设置渲染器
renderer.setSize( window.innerWidth, window.innerHeight );//设置大小
document.body.appendChild( renderer.domElement );//将渲染器元素添加到dom中
创建几何体:
1.几何体
2.材质
二.三大基本元素讲解
1.scene 保存所有物体、光源、摄像机以及渲染所需的其他对象,继承自Three.object3D的对象
属性:
方法 | 描述 |
add(object) | 用于向场景中添加对象。使用该方法还可以创建对象组。 |
children | 用于返回一个场景中所有对象的列表,包括摄像机和光源 |
getObjectByName(name,recursive) | 在创建对象时可以指定唯一的标识 name,使用该方法可以查找特定名字的对象。
|
remove(object) | object 为场景中对象的引用,使用该方法可以将对象从场景中移除 |
traverse(function) | 该方法也可以遍历调用者和调用者的所有后代,function 参数是一个函数,被调用者和每一个后代对象调用 function 方法。 |
fog | 使用该属性可以为场景添加雾化效果,可以产生隐藏远处物体的浓雾效果。 |
overrideMaterial | 使用该属性可以强制场景中的所有物体使用相同的材质。 |
2.camera
分为正交相机和透视相机,正交投影理解为到面的投影,投影线垂直于投影面进行投影,因此物体投影之后的比例是保持不变的。而对于透 视 投影我们可以理解为到点的投影,所有的投影线最后都将汇聚于一点,透视投影的特点就是近大远小。
如图;
a>OrthographicCamera( left, right, top, bottom, near, far )
left就是视锥左侧面,
right就是视锥右侧面,
top就是视锥上侧面,
而bottom就是视锥下侧面。
near是到距离相机较近的那一面的距离,
far是离距离相机较远的那一面的距离,这六个投影面围成的区域就是相机投影的可见区域。
b>PerspectiveCamera( fov, aspect, near, far )
fov:角度
aspect:
near:最近距离
far:最远距离
属性:
position:设置相机位置
lookAt()看向某个位置;例如:lookAt({x:0,y:0,z:0})
up,指向上的方向为某个轴(设置为1,则为向上方向)camera.up.x=1
3.three.js渲染器分支:
renderers:
a.CanvasRenderer
b.DOMRenderer
c.SVGRenderer
d.WebGLRenderer
e.WebGLRenderTarget
f.WebGLRenderTargetCube
g.WebGLShaders
我们把canvasRenderer和webglRenderer进行比较
区别:
1.调用方式不同:
canvasRenderer:renderer=new THREE.CanvasRenderer();
WebGLRenderer:renderer=new THREE.WebGLRenderer();
2.效果图对比:
WebGL在渲染效果上更胜一筹,WebGL的渲染能够最大程度表现你制作精美的场景
CanvasRenderer拥有更好的兼容性
4.灯光
有四种常见灯光:1》环境光(AmbientLight)笼罩在整个空间无处不在的光
2》点光源(PointLight)3》聚光灯(SpotLight)4》平行光(DirectinalLight)
还有半球光光源( HemisphereLight ),平面光光源( AreaLight )
相对于能产生阴影:平行光>聚光灯>点光源