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);//开始渲染

3.效果图

这里写图片描述