带你进门Three.js｜绘造PointLight光源的辅助线
Three.js是一款基于原生WebGL的三维引擎框架(库)，该框架在WebGL的API根底上以简单、曲看的体例封拆了三维图形的常用对象，因而大大削减了法式员在Web前端开发三维图形利用的工做量，Three.js还利用了良多图形引擎的高级身手，极大地进步了利用性能。
跟着WebGL手艺和5G手艺的继续妥帖，各类产物的在线三维展现将会变得越来越普及，关于如今比力火爆的VR产物、AR产物，对WebGL手艺的妥帖，也是一个好动静。VR与Web3D手艺的连系天然就衍生出一个新的概念WebVR，也就是基于Web实现的VR内容，即通过三维拍照机对室内空间停止拍摄，即可在Web端以全景图的体例预览室内效果。Three.js对此也停止了封拆。
本文下面实例别离演示了 绘造PointLight光源的辅助线和光线暗影。
01
绘造PointLight光源的辅助线
此实例次要通过利用THREE.PointLightHelper，实如今场景中绘造THREE. PointLight光源的辅助线。当阅读器展现页面时，绿色的线框表达THREE.PointLight光源，当扭转的立方体的外表正对THREE.PointLight光源时，则该立方体外表闪现亮色，不然闪现暗色，如图1所示。
展开全文
■ 图1
次要代码如下：
body divid= "myContainer" / div
//创建衬着器
varmyRenderer= newTHREE.WebGLRenderer({ antialias: true});
myRenderer.setSize( window.innerWidth, window.innerHeight);
$( "#myContainer").append(myRenderer.domElement);
varmyScene = newTHREE.Scene;
myScene.background = newTHREE.Color( 'white');
varmyCamera = newTHREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 0.1, 1000);
myCamera.position.set( 160.51, 158.71, 127.6);
myCamera.lookAt( newTHREE.Vector3( 0, 0, 0));
myCamera.updateProjectionMatrix;
//创建并添加THREE.PointLight光源
varmyPointLight= newTHREE.PointLight( 'lightgreen');
myPointLight.position.set( 0, 100, 100);
myScene.add(myPointLight);
//绘造THREE.PointLight光源辅助线
varmyPointLightHelper= newTHREE.PointLightHelper(myPointLight, 50, 'green');
myScene.add(myPointLightHelper);
//创成立方体
varmyBoxGeometry = newTHREE.BoxGeometry( 50, 50, 50);
varmyMap = THREE.ImageUtils.loadTexture( "images/img002.jpg");
varmyMaterial = newTHREE.MeshPhongMaterial({ map: myMap});
varmyMesh = newTHREE.Mesh(myBoxGeometry, myMaterial);
myMesh.translateX( 100);
myScene.add(myMesh);
//衬着立方体
animate;
functionanimate( ) {
requestAnimationFrame(animate);
myMesh.rotation.x += 0.01;
myMesh.rotation.y += 0.01;
myMesh.rotation.z += 0.01;
myRenderer.render(myScene, myCamera);
/ / body
在上面那段代码中，myPointLightHelper=new THREE.PointLightHelper(myPointLight, 50,'green')语句表达根据myPointLight光源绘造指定尺寸(50)和指定颜色(green)的光源线框。THREE.PointLightHelper办法的语法格局如下：
THREE .PointLightHelper(light,sphereSize, color)
此中，参数light表达THREE.PointLight光源；参数sphereSize表达线框尺寸；参数color表达线框线条的颜色。
02
绘造PointLight光源的光线暗影
此实例次要通过在THREE.CameraHelper办法的参数中指定THREE.PointLight光源的光线暗影(myPointLight.shadow.camera)，实如今场景中绘造THREE.PointLight光源的光线暗影。当阅读器展现页面时，圆球表达THREE.PointLight光源(该光源本来不成见，此实例利用圆球模仿该光源)，射线表达光线(暗影)，当圆球处于差别的位置时，立方体将闪现差别大小的暗影，效果别离如图2和图3示。
■ 图2
■ 图3
次要代码如下：
body divid= "myContainer" / div
//创建衬着器
varmyRenderer = newTHREE.WebGLRenderer({ antialias: true});
myRenderer.setSize( window.innerWidth, window.innerHeight);
myRenderer.shadowMap.enabled = true;
$( "#myContainer").append(myRenderer.domElement);
varmyScene = newTHREE.Scene;
varmyCamera = newTHREE.PerspectiveCamera( 45,
window.innerWidth/ window.innerHeight, 0.1, 100);
myCamera.position.x = -30;
myCamera.position.y = 40;
myCamera.position.z = 40;
myCamera.lookAt(myScene.position);
myScene.add(myCamera);
//创建THREE.PointLight光源
varmyPointLight = newTHREE.PointLight( 0xffffff);
myPointLight.castShadow = true;
myPointLight.shadow.mapSize.set( 2048, 2048);
myPointLight.decay = 0.1
myScene.add(myPointLight);
//添加光源图形(被圆球取代)
varmyPointLightHelper = newTHREE.PointLightHelper(myPointLight);
//var myPointLightHelper=new THREE.PointLightHelper(myPointLight,5,'green');
myScene.add(myPointLightHelper);
//绘造(拍摄)光线暗影
varmyCameraHelper = newTHREE.CameraHelper(myPointLight.shadow.camera)
myScene.add(myCameraHelper)
myScene.add( newTHREE.AmbientLight( 0x353535, 1));
//创建圆球模仿光源
varmySphereLight = newTHREE.SphereGeometry( 3, 40, 40);
varmySphereLightMaterial = newTHREE.MeshBasicMaterial({ color: 0xffff00});
varmySphereLightMesh = newTHREE.Mesh(mySphereLight, mySphereLightMaterial);
mySphereLightMesh.position.set( 0, 8, 2);
myScene.add(mySphereLightMesh);
//创建领受暗影的平面
varmyPlaneGeomerty = newTHREE.PlaneGeometry( 60, 40, 1, 1);
varmyPlaneMaterial = newTHREE.MeshLambertMaterial({ color: 0xffffff});
varmyPlaneMesh = newTHREE.Mesh(myPlaneGeomerty, myPlaneMaterial);
myPlaneMesh.rotation.x = -0.5* Math.PI;
myPlaneMesh.receiveShadow = true;
myScene.add(myPlaneMesh);
//创成立方体
varmyBoxGeometry = newTHREE.BoxGeometry( 6, 6, 6);
varmyBoxMaterial = newTHREE.MeshLambertMaterial({ color: 0x00ffff});
varmyBoxMesh = newTHREE.Mesh(myBoxGeometry, myBoxMaterial);
myBoxMesh.castShadow = true;
myBoxMesh.position.x = 2;
myBoxMesh.position.y = 2;
myBoxMesh.position.z = 2;
myScene.add(myBoxMesh);
//衬着所有图形
varstep = 0;
animate;
functionanimate( ) {
myPointLightHelper.update;
myCameraHelper.update;
step += 0.01;
mySphereLightMesh.position.x = 20+ ( 10* Math.cos(step));
mySphereLightMesh.position.y = 12+ ( 10* Math.abs( Math.sin(step)));
mySphereLightMesh.translateX( -22);
//利用圆球的位置做为光源位置
myPointLight.position.copy(mySphereLightMesh.position);
requestAnimationFrame(animate);
myRenderer.render(myScene, myCamera);
/ / body
在上面那段代码中，myCameraHelper=new THREE.CameraHelper(myPointLight.shadow. camera)语句表达绘造PointLight的光线暗影，在此实例中，假设没有此代码，是不会呈现黄色的光线暗影的。
03
填补阐明
本系列所有Three.js代码(版本号r119)在IntelliJ IDEA情况编写完成，在最新版的Firefox阅读器或Google Chrome阅读器测试胜利。因而定见读者在上述情况或前提下利用源代码。所有源代码不需要下载Three.js的其他文件，在利用时连结收集通顺即可。此外需要重视：Three.js版本更新较快，因而在开发利用本书的源代码时特殊需要重视版本问题。
04
参考册本
《Three.js前端三维图形开发案例集锦》
ISBN：978-7-302-58956-3
罗帅 罗斌 编著
订价：128.00元
扫码优惠购书