three.js

three.js 介绍

three.js它能写出在浏览器上流畅运行的3D程序，通过js让浏览器对3D的支持。

Three.js本质上是Webgl，如果你的浏览器不支持Webgl，那么肯定你就不能完整的运行Three.js。支持Webgl的浏览器很多，例如Chrome、FireFox、360安 全浏览器6.0等 

Three.js 的基本使用 

// 引入 Three.js 库

<script src="https://unpkg.com/three"></script>

function init () {

// 获取浏览器窗口的宽高，后续会用

var width = window.innerWidth

var height = window.innerHeight

// 创建一个场景

var scene = new THREE.Scene()

// 创建一个具有透视效果的摄像机

var camera = new THREE.PerspectiveCamera(45,width / height,0.1,800)

// 设置摄像机位置，并将其朝向场景中心

camera.position.x = 10

camera.position.y = 10

camera.position.z = 30

camera.lookAt(scene.position)

// 创建一个 WebGL 渲染器，Three.js 还提供 <canvas>,<svg>,css3D 渲染器。

var renderer = new THREE.Webglrenderer()

// 设置渲染器的清除颜色（即背景色）和尺寸。

// 若想用 body 作为背景，则可以不设置 clearColor，然后在创建渲染器时设置 alpha: true，即 new THREE.Webglrenderer({ alpha: true })

renderer.setClearColor(0xffffff)

renderer.setSize(width,height)

// 创建一个长宽高均为 4 个单位长度的立方体（几何体）

var cubeGeometry = new THREE.BoxGeometry(4,4,4)

// 创建材质（该材质不受光源影响）

var cubeMaterial = new THREE.MeshBasicMaterial({

color: 0xff0000

})

// 创建一个立方体网格（mesh）：将材质包裹在几何体上

var cube = new THREE.Mesh(cubeGeometry,cubeMaterial)

// 设置网格的位置

cube.position.x = 0

cube.position.y = -2

cube.position.z = 0

// 将立方体网格加入到场景中

scene.add(cube)

// 将渲染器的输出（此处是 canvas 元素）插入到 body 中

document.body.appendChild(renderer.domElement)

// 渲染，即摄像机拍下此刻的场景

renderer.render(scene,camera)

}

init()

网站地址:http://threejs.org/

GitHub:https://github.com/mrdoob/three.js

网站描述:一个轻量的，易用的 3D 图形库。提供了canvas,svg,CSS3D和WebGL的渲染器

three.js

官方网站：http://threejs.org/