Three学习笔记(1)

最新推荐文章于 2025-02-21 14:14:57 发布

原创最新推荐文章于 2025-02-21 14:14:57 发布 · 338 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Three

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，使用该方法可以查找特定名字的对象。当参数 recursive 设置为 false 时，在调用者子元素上查找当参数 recursive 设置为 true 时，在调用者的所有后代对象上查找
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 )

相对于能产生阴影：平行光>聚光灯>点光源