Three.js

Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。Three.js使用WebGL。源代码托管在GitHub。

Three.js

Three.js作品样例
原作者	Ricardo Cabello (Mr.doob)
開發者	Three.js Authors
首次发布	2010年4月24日​（2010-04-24）
当前版本	0.151.3 (2023年4月3日；穩定版本) 161 (2024年1月31日；穩定版本)
源代码库	github.com/mrdoob/three.js
编程语言	JavaScript
类型	JavaScript函式庫
许可协议	MIT許可證
网站	threejs.org

概述

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包括以下特性：

• 效果：浮雕，对眼和视差屏障。
• 场景：在运行时添加和删除对象；雾
• 镜头：视角和正字法；控制器：轨迹球、FPS、路径等
• 动画：电枢，运动学，逆运动学，变形和关键帧
• 灯光：环境、方向、点和点光；阴影：投射和接收
• 材料：Lambert、海防、光滑阴影，纹理和更多
• 材质：访问完整的OpenGL着色语言（GLSL）能力：镜头光晕，经过深入而广泛的后置处理库
• 对象：网格、粒子、精灵、线、带、骨头和更多-所有细节层次
• 几何：平面，立方体，球体，圆环，3D文本等；修改器：车床，挤压和管
• 数据加载器：二进制，图像，JSON和场景
• 事业：全套时间和三维数学函数包括锥、矩阵、四元、UVs等
• 输入输出：three.js-compatible JSON文件：Blender，openctm，FBX，Max，OBJ
• 支持：API文档正在建设中，公共论坛和维基全面运作
• 例子：超过150个文件的编码例子加字体，模型，纹理，声音和其他支持文件
• 调试：Stats.js， WebGL检查员，Three.js检查员

Three.js在所有支持WebGL 1.0的浏览器皆可运行。

Three.js依据MIT公用许可证发布。

使用

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>

参见

• Google Chrome实验项目
• WebGL框架列表
• Verge3D

参考书目

• Dirksen, Jos. Learning Three.js: The JavaScript 3D Library for WebGL. UK: Packt Publishing. 2013 [2017-06-06]. ISBN 9781782166283. （原始内容存档于2014-07-08）. 
• Parisi, Tony. Webgl Up and Running. Sebastopol: Oreilly & Associates Inc. 2012. ISBN 9781449323578. 
• Seidelin, Jacob. HTML5 games : creating fun with HTML5, CSS3, and WebGL. Chichester, West Sussex, U.K: John Wiley & Sons. 2012: 412–414. ISBN 1119975085.  - "Three.js can make game development easier by taking care of low-level details"
• Williams, James. Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL. Upper Saddle River, NJ: Addison-Wesley. 2012: 117–120, 123–131, 136, 140–142. ISBN 0321767365. 
• Raasch, Jon. Smashing WebKit. Chichester: Wiley. 2011: 181, 182, 216. ISBN 1119999138. 

• Williams, James. Three.js By Example. Vancouver, Canada: Leanpub. 2013 [2017-06-06]. （原始内容存档于2018-08-19）. 

外部链接

• 官方网站
• Three.js source（页面存档备份，存于互联网档案馆） in GitHub
• AlteredQualia（页面存档备份，存于互联网档案馆）
• Stemkoski Three.js Examples（页面存档备份，存于互联网档案馆）
• 1-2-three: graphic simulation by example（页面存档备份，存于互联网档案馆）
• Learning Three.js（页面存档备份，存于互联网档案馆）
• kepo-ing Zz85
• Learning WebGL* WebGL Review Site（页面存档备份，存于互联网档案馆）