fbpx
维基百科

Three.js

十月 19, 2023

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

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

概述 编辑

Three.js允许使用JavaScript创建网页中的GPU加速的3D动画元素，而不是使用特定的浏览器插件。[5][6]这归功于WebGL的出现。[7]

高级的JavaScript函数库例如Three.js或GLGE、SceneJS、PhiloGL或一定数量的其他函数库使作者在浏览器中显示复杂的三维计算机动画而不需要使用传统的独立应用程序或插件成为可能。[8]

历史 编辑

Three.js由Ricardo Cabello在2010四月于GitHub首次发布。[2]它的起源可以追溯到他在本世纪初演示场景的参与。代码最初是在ActionScript，稍后2009年移植到JavaScript。在Cabello看来，转移到JavaScript有两个优点：每次运行前没有编译代码和平台独立性。随着WebGL的到来，Paul Brunt增加渲染功能，这使Three.js的设计与绘制的代码作为一个模块，而不是核心本身。[9]Cabello的贡献包括API的设计、CanvasRenderer、 SVGRenderer并负责合并各种贡献到该项目。

该项目的二号贡献者Branislav Ulicny在2010年张贴在自己的网站一些WebGL演示后开始参与Three.js的开发工作。他希望Three.js中的WebGL渲染能力超过CanvasRenderer或SVGRenderer。[9]他的主要贡献通常涉及素材、着色器和后处理。

稍后在 WebGL 1.0 在2011年引入火狐4后，Joshua Koo开始参与工作。他在2011年9月创建了他的第一个面向3D文本的Three.js样本。[9] 目前该项目总共有650次贡献。[9]

特性 编辑

Three.js包括以下特性：[10]

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

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

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

使用 编辑

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

参考文献 编辑

  1. ^ 1.0 1.1 1.2 Three.js/license. github.com/mrdoob. [20 May 2012]. （原始内容于2017-05-07）. 
  2. ^ 2.0 2.1 First commit. github.com/mrdoob. [20 May 2012]. （原始内容于2010-04-30）. 
  3. ^ https://registry.npmjs.com/three; 检索日期: 2023年4月9日.
  4. ^ Release 156. 2023年9月5日 [2023年9月19日]. 
  5. ^ O3D
  6. ^ Unity (game engine)
  7. ^ Khronos Releases Final WebGL 1.0 Specification. Khronos Group. March 3, 2011 [2 June 2012]. （原始内容于2016-11-08）. 
  8. ^ Crossley, Rob. . Intent Media Ltd. 11 January 2010 [2 June 2012]. （原始内容存档于2010-01-13）. 
  9. ^ 9.0 9.1 9.2 9.3 Three.js White Paper. Github.com. 2012-05-21 [2013-05-09]. （原始内容于2019-02-18）. 
  10. ^ mrdoob. Features mrdoob/three.js Wiki GitHub. Github.com. 2012-11-26 [2013-05-09]. （原始内容于2014-06-01）. 
  11. ^ Stats.js. Github.com. [2013-05-09]. （原始内容于2013-05-12）. 
  12. ^ WebGL Inspector. Benvanik.github.com. [2013-05-09]. （原始内容于2010-11-24）. 
  13. ^ Three.js Inspector Labs. Zz85.github.com. [2013-05-09]. （原始内容于2013-01-30）. 

参考书目 编辑

  • 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

十月 19, 2023
three, 此條目翻譯品質不佳, 2022年9月22日, 翻譯者可能不熟悉中文或原文語言, 也可能使用了機器翻譯, 請協助翻譯本條目或重新編寫, 并注意避免翻译腔的问题, 明顯拙劣的翻譯請改掛, href, template, html, class, redirect, title, template, href, wikipedia, html, class, redirect, title, wikipedia, 提交刪除, 是一个跨浏览器的脚本, 使用javascript函数库或api来在网页浏览器中创建. 此條目翻譯品質不佳 2022年9月22日 翻譯者可能不熟悉中文或原文語言 也可能使用了機器翻譯 請協助翻譯本條目或重新編寫 并注意避免翻译腔的问题 明顯拙劣的翻譯請改掛 a href Template D html class mw redirect title Template D d a a href Wikipedia CSD html G13 class mw redirect title Wikipedia CSD G13 a 提交刪除 Three js是一个跨浏览器的脚本 使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形 Three js使用WebGL 源代码托管在GitHub Three jsThree js作品样例原作者Ricardo Cabello Mr doob 開發者Three js Authors 1 首次发布2010年4月24日 13年前 2010 04 24 2 当前版本0 151 3 2023年4月3日 穩定版本 3 156 2023年9月5日 穩定版本 4 源代码库github wbr com wbr mrdoob wbr three wbr js编程语言JavaScript类型JavaScript函式庫许可协议MIT許可證 1 网站threejs wbr org 目录 1 概述 2 历史 3 特性 4 使用 5 参见 6 参考文献 7 参考书目 8 外部链接概述 编辑Three js允许使用JavaScript创建网页中的GPU加速的3D动画元素 而不是使用特定的浏览器插件 5 6 这归功于WebGL的出现 7 高级的JavaScript函数库例如Three js或GLGE SceneJS PhiloGL或一定数量的其他函数库使作者在浏览器中显示复杂的三维计算机动画而不需要使用传统的独立应用程序或插件成为可能 8 历史 编辑Three js由Ricardo Cabello在2010四月于GitHub首次发布 2 它的起源可以追溯到他在本世纪初演示场景的参与 代码最初是在ActionScript 稍后2009年移植到JavaScript 在Cabello看来 转移到JavaScript有两个优点 每次运行前没有编译代码和平台独立性 随着WebGL的到来 Paul Brunt增加渲染功能 这使Three js的设计与绘制的代码作为一个模块 而不是核心本身 9 Cabello的贡献包括API的设计 CanvasRenderer SVGRenderer并负责合并各种贡献到该项目 该项目的二号贡献者Branislav Ulicny在2010年张贴在自己的网站一些WebGL演示后开始参与Three js的开发工作 他希望Three js中的WebGL渲染能力超过CanvasRenderer或SVGRenderer 9 他的主要贡献通常涉及素材 着色器和后处理 稍后在 WebGL 1 0 在2011年引入火狐4后 Joshua Koo开始参与工作 他在2011年9月创建了他的第一个面向3D文本的Three js样本 9 目前该项目总共有650次贡献 9 特性 编辑Three js包括以下特性 10 效果 浮雕 对眼和视差屏障 场景 在运行时添加和删除对象 雾 镜头 视角和正字法 控制器 轨迹球 FPS 路径等 动画 电枢 运动学 逆运动学 变形和关键帧 灯光 环境 方向 点和点光 阴影 投射和接收 材料 Lambert 海防 光滑阴影 纹理和更多 材质 访问完整的OpenGL着色语言 GLSL 能力 镜头光晕 经过深入而广泛的后置处理库 对象 网格 粒子 精灵 线 带 骨头和更多 所有细节层次 几何 平面 立方体 球体 圆环 3D文本等 修改器 车床 挤压和管 数据加载器 二进制 图像 JSON和场景 事业 全套时间和三维数学函数包括锥 矩阵 四元 UVs等 输入输出 three js compatible JSON文件 Blender openctm FBX Max OBJ 支持 API文档正在建设中 公共论坛和维基全面运作 例子 超过150个文件的编码例子加字体 模型 纹理 声音和其他支持文件 调试 Stats js 11 WebGL检查员 12 Three js检查员 13 Three js在所有支持WebGL 1 0的浏览器皆可运行 Three js依据MIT公用许可证发布 1 使用 编辑Three js函数库是一个独立的JavaScript文件 它在网页中可以通过链接至本地或远程副本而链接在该页面中 lt script src js three min js gt lt script gt 以下代码创造了一个场景 并添加摄像机和一个摄像机和一个立方体到场景中 且创建一个WebGL渲染并添加视图到document body元素中 一旦被载入 这个立方体将以它的X轴线和Y轴线旋转 lt script gt 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 lt script gt 参见 编辑 nbsp 自由软件主题 nbsp Software主题 Google Chrome实验项目 WebGL框架列表 Verge3D参考文献 编辑 1 0 1 1 1 2 Three js license github com mrdoob 20 May 2012 原始内容存档于2017 05 07 2 0 2 1 First commit github com mrdoob 20 May 2012 原始内容存档于2010 04 30 https registry npmjs com three 检索日期 2023年4月9日 Release 156 2023年9月5日 2023年9月19日 O3D Unity game engine Khronos Releases Final WebGL 1 0 Specification Khronos Group March 3 2011 2 June 2012 原始内容存档于2016 11 08 Crossley Rob Study Average dev costs as high as 28m Intent Media Ltd 11 January 2010 2 June 2012 原始内容存档于2010 01 13 9 0 9 1 9 2 9 3 Three js White Paper Github com 2012 05 21 2013 05 09 原始内容存档于2019 02 18 mrdoob Features mrdoob three js Wiki GitHub Github com 2012 11 26 2013 05 09 原始内容存档于2014 06 01 Stats js Github com 2013 05 09 原始内容存档于2013 05 12 WebGL Inspector Benvanik github com 2013 05 09 原始内容存档于2010 11 24 Three js Inspector Labs Zz85 github com 2013 05 09 原始内容存档于2013 01 30 参考书目 编辑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 amp Associates Inc 2012 ISBN 9781449323578 Seidelin Jacob HTML5 games creating fun with HTML5 CSS3 and WebGL Chichester West Sussex U K John Wiley amp 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官方网站 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 页面存档备份 存于互联网档案馆 取自 https zh wikipedia org w index php title Three js amp oldid 73778793, 维基百科，wiki，书籍，书籍，图书馆，

文章

，阅读，下载，免费，免费下载，mp3，视频，mp4，3gp， jpg，jpeg，gif，png，图片，音乐，歌曲，电影，书籍，游戏，游戏。