HTML5 Three.js 3D特效
http://blog.csdn.net/l294333475/article/details/9399035
一、Three.js基本介绍
Three.js是JavaScript编写的WebGL第三方库。 提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的 主页 上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏，基本没有中文的）Three.js的代码托管在github上面。
点击查看最终效果
二、基本 Demo
1.最基本的Hello World： http://stemkoski.github.io/Three.js/HelloWorld.html
2.在网页上调用摄像头： http://stemkoski.github.io/Three.js/Webcam-Texture.html
3.体感操作： http://stemkoski.github.io/Three.js/Webcam-Motion-Detection-Texture.html
4.支持游戏手柄： http://stemkoski.github.io/Three.js/Mesh-Movement-Gamepad.html
5.3D建模和方向键控制移动方向： http://stemkoski.github.io/Three.js/Model-Animation-Control.html
6.SkyBox和三个气泡的渲染： http://stemkoski.github.io/Three.js/Metabubbles.html
7.3D红蓝偏光的名车展： http://threejs.org/examples/webgl_materials_cars_anaglyph.html
8.跑车游戏： http://hexgl.bkcore.com/
三、Three.js编写环境准备
1.Three.js库文件下载： https://github.com/mrdoob/three.js/
2.已安装IIS或Tomcat或Apache，这些例子必须挂到服务器上才能正常运行，本地打开会出现各种无法理解的问题。
四、动手编写第一个 Demo
[html] view plain copy
< html lang = "en" >
< head >
< title > Template (Three.js)
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" >
< link rel = stylesheet href = "css/base.css" />
< body >
< script src = "../js/Three.js" >
< script src = "../js/Detector.js" >
< script src = "../js/Stats.js" >
< script src = "../js/OrbitControls.js" >
< script src = "../js/THREEx.KeyboardState.js" >
< script src = "../js/THREEx.FullScreen.js" >
< script src = "../js/THREEx.WindowResize.js" >
< script src = "../js/Texture.js" >
< div id = "ThreeJS"
style = "z-index: 1; position: absolute; left: 0px; top: 0px" >
< script >
//
// MAIN //
//
// standard global variables
var container, scene, camera, renderer, controls, stats; // 几个变量代表的含义：容器、场景、摄像机（视角）、渲染器、控制装置
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var cube;
// initialization
init();
// animation loop / game loop
animate();
///
// FUNCTIONS //
///
function init() { // 初始化
///
// SCENE //
///
scene = new THREE.Scene(); // 定义场景
// CAMERA //
// set the view size in pixels (custom or according to window size)
// var SCREEN_WIDTH = 400 , SCREEN_HEIGHT = 300 ;
var SCREEN_WIDTH = window .innerWidth, SCREEN_HEIGHT = window .innerHeight;
// camera attributes
var VIEW_ANGLE = 45 , ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0 .1, FAR = 20000 ;
// set up camera
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); // 定义视角
// add the camera to the scene
scene.add(camera);
// the camera defaults to position (0,0,0)
// so pull it back ( z = 400 ) and up ( y = 100 ) and set the angle towards the scene origin
camera.position.set(-400, 150, 200); // 视角的位置
camera.lookAt(scene.position);
//
// RENDERER //
//
// create and start the renderer; choose antialias setting.
if (Detector.webgl)
renderer = new THREE.WebGLRenderer({
antialias : true
});
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
// attach div element to variable to contain the renderer
container = document .getElementById('ThreeJS');
// alternatively: to create the div at runtime, use:
// container = document .createElement( 'div' );
// document.body.appendChild( container );
// attach renderer to the container div
container.appendChild(renderer.domElement);
// EVENTS //
// automatically resize renderer
THREEx.WindowResize(renderer, camera);
// toggle full-screen on given key press
THREEx.FullScreen.bindKey({
charCode : 'm'.charCodeAt(0)
});
//
// CONTROLS //
//
// move mouse and: left click to rotate,
// middle click to zoom,
// right click to pan
controls = new THREE.OrbitControls(camera, renderer.domElement); // 设置控制，这里只有鼠标操作
///
// STATS //
///
// displays current and past frames per second attained by scene
stats = new Stats();
stats.domElement.style.position = 'absolute' ;
stats.domElement.style.bottom = '0px' ;
stats.domElement.style.zIndex = 100 ;
container.appendChild(stats.domElement);
///
// LIGHT //
///
// create a light
var light = new THREE.PointLight(0xffffff); // 设置光源
light.position.set(0, 250, 0);
scene.add(light);
// CUBE
var cubeGeometry = new THREE.CubeGeometry(260, 35, 185, 1, 1, 1); // 定义一个立方体，就是那本书的模型
var cubeMaterialArray = [];
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-up.png') // 给每一面上贴图，下同
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-up.png')
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/up.png')
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/down.png')
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-right.png')
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-left.png')
}));
var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);
cube = new THREE.Mesh(cubeGeometry, cubeMaterials);
cube.position.set(0, 0, 0); // 立方体放置的位置
scene.add(cube);
}
function animate() {
requestAnimationFrame(animate);
render();
update();
}
function update() {
// delta = change in time since last call (in seconds)
var delta = clock .getDelta();
controls.update();
stats.update();
}
function render() {
renderer.render(scene, camera);
}
效果图：