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.PolyhedronGeometry和THREE.OctahedronGeometry，实如今场景平分别绘造八面体图形。当阅读器展现页面时，单击“利用多面体办法绘造八面体图形”按钮，则绘造的八面体图形如图1所示；单击“利用八面体办法绘造八面体图形”按钮，则绘造的八面体图形如图1所示。
展开全文
■ 图1
02
实现代码
!DOCTYPE html html head metacharset= "UTF-8"
src= "ThreeJS/three.js" /
src= "ThreeJS/jquery.js" /
src= "ThreeJS/OrbitControls.js" /
/ head
body p buttonid= "myButton1" 利用多面体办法绘造八面体图形 / button
buttonid= "myButton2" 利用八面体办法绘造八面体图形 / button / p
centerid= "myContainer" / center
//创建衬着器
varmyRenderer = newTHREE.WebGLRenderer( { antialias: true} );
myRenderer.setSize( window.innerWidth, window.innerHeight);
myRenderer.setClearColor( 'white', 1.0);
$( "#myContainer").append( myRenderer.domElement );
varmyCamera= newTHREE.PerspectiveCamera( 40,
window.innerWidth/ window.innerHeight, 1, 1000);
myCamera.position.set( 16, 19, 19);
varmyScene= newTHREE.Scene;
myScene.add(myCamera);
myCamera.add( newTHREE.PointLight( 0x00ff00));
//衬着八面体图形
animate;
functionanimate( ) {
myRenderer.render(myScene,myCamera);
requestAnimationFrame(animate);
varmyOrbitControls = newTHREE.OrbitControls(myCamera);
varmyPolyhedron,myOctahedron,myGeometry;
varmyMaterial= newTHREE.MeshLambertMaterial({ color: 0x00ff00});
//响应单击“利用多面体办法绘造八面体图形”按钮
$( "#myButton1").click( function( ) {
myScene.remove(myPolyhedron);
myScene.remove(myOctahedron);
varmyVertices=[ 1, 0, 0, -1, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 1, 0, 0, -1];
varmyIndices=[ 0, 2, 4, 0, 4, 3, 0, 3, 5, 0, 5, 2, 1, 2, 5, 1, 5, 3, 1, 3, 4, 1, 4, 2];
myGeometry= newTHREE.PolyhedronGeometry(myVertices,myIndices, 10);
myPolyhedron= newTHREE.Mesh(myGeometry,myMaterial);
myScene.add(myPolyhedron);
//响应单击“利用八面体办法绘造八面体图形”按钮
$( "#myButton2").click( function( ) {
myScene.remove(myPolyhedron);
myScene.remove(myOctahedron);
myGeometry = newTHREE.OctahedronGeometry( 10);
myOctahedron = newTHREE.Mesh(myGeometry, myMaterial);
myScene.add(myOctahedron);
/ / body / html
03
代码阐明
在上面那段代码中，myGeometry=new THREE.PolyhedronGeometry(myVertices, myIndices,10)语句在此实例顶用于绘造一个几何体(八面体)，myVertices表达几何体顶点坐标数组；myIndices表达几何体顶点索引数组，三个顶点确定一个三角面；10表达几何体半径，能够理解为顶点位置坐标的缩放系数。myGeometry=new THREE.OctahedronGeometry(10)语句用于绘造一个八面体(几何体)，10表达几何体半径，能够理解为顶点位置坐标的缩放系数，两者在此实例中实现的功用完全不异。此外需要重视：此实例需要添加OrbitControls.js文件。
04
填补阐明
本系列所有Three.js代码(版本号r119)在IntelliJ IDEA情况编写完成，在最新版的Firefox阅读器或Google Chrome阅读器测试胜利。因而定见读者在上述情况或前提下利用源代码。所有源代码不需要下载Three.js的其他文件，在利用时连结收集通顺即可。此外需要重视：Three.js版本更新较快，因而在开发利用本书的源代码时特殊需要重视版本问题。
05
源代码下载
扫描下方二维码获取 “Three.js代码083”源代码
06
参考册本
《Three.js前端三维图形开发案例集锦》
ISBN：978-7-302-58956-3
罗帅 罗斌 编著
订价：128.00元
扫码优惠购书