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.Web glr enderer()
// 设置渲染器的清除颜色（即背景色）和尺寸。
// 若想用 body 作为背景，则可以不设置 clearColor，然后在创建渲染器时设置 alpha: true，即 new THREE.Web glr enderer({ alpha: true })
renderer.setClearColor(0xffffff)
renderer.setSize(width,height)
// 创建 一个 长宽高均为 4 个单位长度的立方体（几何体）
var cubeGeometry = new THREE. Box Geometry(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/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。