Three.js

概述

Three.js允许使用JavaScript创建网页中的GPU加速的3D动画元素，而不是使用特定的浏览器插件。这归功于WebGL的出现。
高级的JavaScript函数库例如Three.js或GLGE、SceneJS、PhiloGL或一定数量的其他函数库使作者在浏览器中显示复杂的三维计算机动画而不需要使用传统的独立应用程序或插件成为可能。

历史

Three.js由Ricardo Cabello在2010四月于GitHub首次发布。它的起源可以追溯到他在本世纪初演示场景的参与。代码最初是在ActionScript，稍后2009年移植到JavaScript。在Cabello看来，转移到JavaScript有两个优点：每次运行前没有编译代码和平台独立性。随着WebGL的到来，Paul Brunt增加渲染功能，这使Three.js的设计与绘制的代码作为一个模块，而不是核心本身。Cabello的贡献包括API的设计、CanvasRenderer、 SVGRenderer并负责合并各种贡献到该项目。
该项目的二号贡献者Branislav Ulicny在2010年张贴在自己的网站一些WebGL演示后开始参与Three.js的开发工作。他希望Three.js中的WebGL渲染能力超过CanvasRenderer或SVGRenderer。他的主要贡献通常涉及素材、着色器和后处理。
稍后在WebGL 1.0 在2011年引入火狐4后，Joshua Koo开始参与工作。他在2011年9月创建了他的第一个面向3D文本的Three.js样本。 目前该项目总共有650次贡献。

使用

Three.js函数库是一个独立的JavaScript文件。它在网页中可以通过链接至本地或远程副本而链接在该页面中：
<script src="js/three.min.js"></script>
以下代码创造了一个场景，并添加摄像机和一个摄像机和一个立方体到场景中，且创建一个WebGL渲染并添加视图到document.body元素中。一旦被载入，这个立方体将以它的X轴线和Y轴线旋转。
<script>

    var camera, scene, renderer,
    geometry, material, mesh;

    init();
    animate();

    function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );
    }</script>