技术背景介绍
技术在进步。javascript的计算能力因为google的V8引擎得到了迅猛的增强，做3D程序，做服务器都没有问题。
WebGL 标准
WebGL 是一项利用 JavaScriptAPI 渲染交互式 3D 电脑图形和 2D 图形的技术，可兼容任何的网页浏览器，无需加装插件。通过 WebGL 的技术，只需要编写网页代码即可实现 3D 图像的展示。GLSL-OpenGL Shading Language 也称作 GLslang ，是一个以 C 语言为基础的高阶着色语言。它是由 OpenGL ARB 所建立，提供开发者对绘图管线更多的直接控制，而无需使用汇编语言或硬件规格语言。
随着 WebGL 标准的快速推进，越来越多团队尝试在浏览器上推出可交互的 3D 作品。相较于二维场景，它更能为用户带来真实和沉浸的体验。然而 OpenGL 和 WebGL（基于 OpenGL ES） 都比较复杂，Three.js 则更适合初学者。
Three.js 介绍
Three.js源自github的一个开源项目https://github.com/mrdoob/three.js，发展相当迅速，Three.js基于简化WebGL开发复杂度和降低入门难度的目的，在WebGL标准基础上封装了一个轻量级的JS 3D库
Three.js本质上是Webgl，如果你的浏览器不支持Webgl，那么肯定你就不能完整的运行Three.js。支持Webgl的浏览器很多，例如Chrome、FireFox、360安 全浏览器6.0等
不说废话，直接开始 (请自行下载)
Threejs.png
1.浏览器兼容
Moziller Firefox：4.0版本以后开始支持；
Google Chrome：第9版以后开始支持
Safari：5.1版本开始支持；
Opera：12.00版本以后开始支持。要让Opera支持WebGL，你还需要打开opera:config文件，设置WebGL，并将Enable hardare Acceleration设置为1;
Inernet Explorer：从IE11开始支持WebGL
如果想让旧版本IE支持WebGL,可以使用iewebgl插件，下载网址是[http://iewebgl.com/](http://iewebgl.com/)。
2.Three.js 基本三要素
/**
* three.js
* 绘制3D图形基本三要素 ：
* - 1.scene (场景)
* - 2.camera (相机)
* - 3.renderer (渲染器)
*/
- 1.scene (场景)
- 2.camera (相机)
- 3.renderer (渲染器)
完整案例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js</title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="vendor/three.min.js"></script>
</head>
<body>
<script>
/**
* three.js
* 绘制3D图形基本三要素 ：
* - 1.scene (场景)
* - 2.camera (相机)
* - 3.renderer (渲染器)
*/
//场景
var scene = new THREE.Scene();
//相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
//渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//在场景中添加一个网格模型
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
//渲染
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
效果：
1.jpg
完整代码：github地址 欢迎star
网友评论