WebGL是一种三维绘图原则，该绘图原则容许把Java和OpenGL ES 2.0连系在一路，如许Web开发人员就能够借助硬件在阅读器中更顺畅地展现三维场景和模子，以创建复杂的导航和数据视觉化。Three.js是一款基于原生WebGL的三维引擎框架(库)，该框架在WebGL的API根底上以简单、曲看的体例封拆了三维图形的常用对象，因而大大削减了法式员在Web前端开发三维图形利用的工做量，Three.js还利用了良多图形引擎的高级身手，极大地进步了利用性能。
跟着WebGL手艺和5G手艺的继续妥帖，各类产物的在线三维展现将会变得越来越普及，关于如今比力火爆的VR产物、AR产物，对WebGL手艺的妥帖，也是一个好动静。VR与Web3D手艺的连系天然就衍生出一个新的概念WebVR，也就是基于Web实现的VR内容，即通过三维拍照机对室内空间停止拍摄，即可在Web端以全景图的体例预览室内效果。Three.js对此也停止了封拆。
本文下面那个实例演示了在场景中自定义光源绘造立方体。
01
实例功用
此实例次要通过利用THREE.PointLight、THREE.Scene、THREE.OrthographicCamera、THREE.WebGLRenderer、THREE.BoxGeometry、THREE.MeshLambertMaterial、THREE.Mesh等，实如今场景中绘造自定义光源照射的立方体。当阅读器展现页面时，将在场景中绘造自定义光源照射的红色立方体，如图1所示。
展开全文
■ 图1
02
实现代码
!DOCTYPE html html head metacharset= "UTF-8"
src= "ThreeJS/three.js" /
src= "ThreeJS/jquery.js" /
/ head
body centerid= "myContainer" / center
varmyRenderer = newTHREE.WebGLRenderer; //创建衬着器
varmyWidth = 480; //设置窗口宽度
varmyHeight = 320; //设置窗口高度
myRenderer.setSize(myWidth, myHeight); //设置衬着区域
myRenderer.setClearColor( "white", 1); //设置清空颜色
$( "#myContainer").append(myRenderer.domElement);
varmyScene = newTHREE.Scene; //创建场景
varmyLight = newTHREE.PointLight( "red"); //创建红色光源
myLight.position.set( 400, 800, 300); //设置光源位置
myScene.add(myLight); //在场景中添加光源
vark = myWidth / myHeight; //计算窗口宽高比
vars = 120; //三维场景展现范畴掌握系数
varmyCamera = newTHREE.OrthographicCamera(-s * k,
s * k, s, -s, 1, 1000); //创建相机
myCamera.position.set( 400, 300, 200); //设置相机位置
myCamera.lookAt(myScene.position);
varmyGeometry = newTHREE.BoxGeometry( 100, 100, 100); //创成立方体
varmyMaterial =
newTHREE.MeshLambertMaterial({ color: 0xFFBF00}); //创建材量
varmyMesh = newTHREE.Mesh(myGeometry, myMaterial); //创建网格
myScene.add(myMesh); //在场景中添加网格(立方体)
myRenderer.render(myScene, myCamera); //衬着立方体
/ / body / html
03
代码阐明
在上面那段代码中，myGeometry=new THREE.BoxGeometry(100,100,100)语句用于创建一个立方体(几何体)，三个“100”别离代表立方体的长、宽、高。myLight=new THREE.PointLight ("red")语句用于创建一个红色的点光源，red 也能够利用颜色代码取代，如myLight=new THREE.PointLight(0xff0000)。myLight.position.set(400,800,300)语句用于设置光源的位置，myScene.add(myLight)用于将光源添加参加景中。一般情状下，利用Three.js绘造一个三维图形需要下面那些步调(或元素)。
(1) 创建衬着器，如new THREE.WebGLRenderer；
(2) 指定衬着器在何处闪现，如$("#myContainer").append(myRenderer.domElement)；
(3) 创建场景，如new THREE.Scene；
(4) 创建相机，如new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000)；
(5) 在衬着器中指定场景和相机，如myRenderer.render(myScene,myCamera)；
(6) 创建光源，如new THREE.PointLight("red")；
(7) 在场景中添加光源，如myScene.add(myLight)；
(8) 创建几何体，如new THREE.BoxGeometry(100,100,100)；
(9) 创建材量，如new THREE.MeshLambertMaterial({color:0xffbf00})；
(10) 根据几何体和材量创建网格，如new THREE.Mesh(myGeometry,myMaterial)；
(11) 在场景中添加网格，如myScene.add(myMesh)；
(12) 起头衬着，如myRenderer.render(myScene,myCamera)。
在Web前端中，利用Three.js开发三维图形利用需要添加three.js文件(库)，假设在利用中利用了jQuery代码，则还应添加jquery.js文件(库)。本系列所有Three.js的源代码如无特殊阐明，均利用了上述两个文件，因而其他实例的纸量文字阐明不再录进那些内容，只供给在body标签中的源代码。
04
填补阐明
本系列所有Three.js代码(版本号r119)在IntelliJ IDEA情况编写完成，在最新版的Firefox阅读器或Google Chrome阅读器测试胜利。因而定见读者在上述情况或前提下利用源代码。所有源代码不需要下载Three.js的其他文件，在利用时连结收集通顺即可。此外需要重视：Three.js版本更新较快，因而在开发利用本书的源代码时特殊需要重视版本问题。
05
源代码下载
“Three.js代码001” 下载链接为：
06
参考册本
《Three.js前端三维图形开发案例集锦》
ISBN：978-7-302-58956-3
罗帅 罗斌 编著
订价：128.00元
扫码优惠购书