three.js的认识
一、什么是three.js
three.js 是一个跨浏览器 JavaScript 库/API ,用于在web 浏览器中创建和显示3D图形。 three.js 是基于 WebGL开发的。它的代码托管在GitHub上。
二、three.js的三要素
1.scene(场景)
scene 是一个容器,用来保存并跟踪所有我们想渲染的物体。
2.camera(相机)
camera 变量定义了我们能够在渲染好的 scene 里看到什么。
主要有正交相机和透视相机。
3.renderer(渲染器)
renderer 对象负责计算渲染指定相机角度下,浏览器中 scene 的样子。主要采用基于 WebGL 的渲染器。
除基于 WebGL 的渲染器外,还有有基于画板 ( Canvas)的渲染器,甚至还有基于 SVG 的渲染器。 尽管它们可以工作,也能渲染简单的场景,但它们十分耗费 CPU 资源,也缺乏某些功能,例如支持复杂材质和阴影。
三、简单示例
1.首先创建HTML页面框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="libs/three.js"></script>//加载three.js
<title>demo</title>
</head>
<body>
<div id="show"></div>//将three.js渲染器的输出指向这个元素
<script type="text/javascript">
//js调用three.js
</script>
</body>
</html>
2.运用js调用three.js
(1)创建场景
var scene = new THREE.Scene();
(2)定义相机
var camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.01,1000);//定义为透视相机
camera.position.set(-30,30,30);//指定相机的位置
camera.lookAt(new THREE.Vector3(0,0,0));//指定相机看向的点的位置
scene.add(camera);//将相机添加进入场景(可不添加)
透视相机的定义:
THREE.Perspective(fov:Number, aspect:Number, near:Number, far:Number)
参数解析:
fov:视角(field of view),从相机位置能够看到的部分场景。推荐默认值:45
aspect:长宽比,渲染结果输出区的横向长度和纵向长度的比值。这个比值决定了水平视角和垂直视角的比例关系。推荐默认值:window.innerWidth/window.innerHeight(窗口长宽比)
near:近面,定义从距离相机多近的地方开始渲染场景。通常设置很小值,从而可以渲染从相机位置可以看到的所有物体。推荐默认值:0.1
far:远面,定义相机可以从它所处的位置看多远。默认值:1000
正交相机的定义:
THREE.OrthographicCamera(left:Number,right:Number,top:Number,bottom:Number,near:Number,far:Number)
参数解析:
left:左边界
right:右边界
top:上边界
bottom:下边界
near:近面,定义从距离相机多近的地方开始渲染场景。
far:远面,定义相机可以从它所处的位置看多远。
(3)定义渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);//设置渲染的背景色
renderer.setSize(window.innerWidth,window.innerHeight);//设置渲染的大小
document.getElementById('show').appendChild(renderer.domElement);//将渲染器添加进入页面(若未添加,无法显示)
(4)添加一个几何体,开始渲染
var cubeGeometry = new THREE.BoxGeometry(10,10,10);//创建一个正方体
var cubeMaterial = new THREE.MeshBasicMaterial({color:0x123456});//创建一个材质
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);//将材质添加到正方体上
cube.position.set(0,0,0);//设置正方体的放置位置
scene.add(cube);//将正方体添加入场景中(若未添加,无法显示)
renderer.render(scene,camera);//开始渲染