Three.js前端三维图形开发案例｜利用线性雾设置场景的雾化效果
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.Fog创建线性雾并以此设置THREE.Scene的fog属性，实如今场景中的图形上产生雾化效果。当阅读器展现页面时，在场景中的球体产生的雾化效果如图1所示。
展开全文
■ 图1
02
实现代码
body centerid= "myContainer" / center
type= "text/java"
//创建衬着器
varmyRenderer = newTHREE.WebGLRenderer( { antialias: true} );
myRenderer.setSize( window.innerWidth, window.innerHeight);
myRenderer.setClearColor( 'white', 1.0);
$( '#myContainer')[ 0].(myRenderer.domElement);
varmyScene = newTHREE.Scene;
//利用线性雾设置场景的fog雾化属性
myScene.fog = newTHREE.Fog( 0xffffff, 50, 60);
varmyCamera = newTHREE.PerspectiveCamera( 45,
window.innerWidth / window.innerHeight, 30, 1000);
myCamera.position.set( -55, 17, 31);
myCamera.lookAt( newTHREE.Vector3( 0, 0, 0));
varmySpotLight = newTHREE.SpotLight( 'white');
mySpotLight.position.set( -30, 60, 60);
myScene.add(mySpotLight);
//创建圆球
varmyMaterial = newTHREE.MeshPhongMaterial({ color: 0x7777ff});
myMaterial.shininess = 100;
varmyGeometry = newTHREE.SphereGeometry( 16, 100, 100);
varmyMesh = newTHREE.Mesh(myGeometry, myMaterial);
myScene.add(myMesh);
//衬着圆球
myRenderer.render(myScene, myCamera);
/ / body
03
代码阐明
在上面那段代码中，myScene.fog=new THREE.Fog(0xffffff,50,60)语句用于创建线性雾并以此设置THREE.Scene的fog属性。THREE.Fog办法的语法格局如下：
THREE .Fog( color,near,far)
此中，参数color表达雾的颜色，假设设置为红色，则场景远处物体(对象)的颜色为黑色，场景比来间隔物体的颜色是本身颜色，最远和比来之间的物体颜色是物体自己颜色和雾颜色的混合效果；参数near表达利用雾化效果的最小间隔，间隔拍照机长度小于near的物体将不会被雾所影响；参数far表达利用雾化效果的更大间隔，间隔拍照机长度大于far的物体将不会被雾所影响。
04
填补阐明
本系列所有Three.js代码(版本号r119)在IntelliJ IDEA情况编写完成，在最新版的Firefox阅读器或Google Chrome阅读器测试胜利。因而定见读者在上述情况或前提下利用源代码。所有源代码不需要下载Three.js的其他文件，在利用时连结收集通顺即可。此外需要重视：Three.js版本更新较快，因而在开发利用本书的源代码时特殊需要重视版本问题。
05
源代码下载
“Three.js代码020” 下载链接为：
06
参考册本
《Three.js前端三维图形开发案例集锦》
ISBN：978-7-302-58956-3
罗帅 罗斌 编著
订价：128.00元
扫码优惠购书