Three.js前端三维图形开发案例｜使用多面体方法绘制八面体

清华计算机学堂 2023-02-08

742

WebGL是一种三维绘图标准，该绘图标准允许把JavaScript和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对此也进行了封装。

本文下面这个实例演示了使用多面体方法绘制八面体。

实例功能

此实例主要通过分别使用THREE.PolyhedronGeometry和THREE.OctahedronGeometry，实现在场景中分别绘制八面体图形。当浏览器显示页面时，单击“使用多面体方法绘制八面体图形”按钮，则绘制的八面体图形如图1所示；单击“使用八面体方法绘制八面体图形”按钮，则绘制的八面体图形如图1所示。

■ 图1

实现代码

<!DOCTYPE html><html><head><meta charset="UTF-8">
 <script src="ThreeJS/three.js"></script>
 <script src="ThreeJS/jquery.js"></script>
 <script src="ThreeJS/OrbitControls.js"></script>
</head>
<body><p><button id="myButton1">使用多面体方法绘制八面体图形</button>
 <button id="myButton2">使用八面体方法绘制八面体图形</button></p>
<center id="myContainer"></center>
<script>
 //创建渲染器
 var myRenderer = new THREE.WebGLRenderer( {antialias: true} );
 myRenderer.setSize(window.innerWidth,window.innerHeight);
 myRenderer.setClearColor('white', 1.0);
 $("#myContainer").append( myRenderer.domElement );
 var myCamera=new THREE.PerspectiveCamera(40,
     window.innerWidth/window.innerHeight,1,1000);
 myCamera.position.set(16,19,19);
 var myScene=new THREE.Scene();
 myScene.add(myCamera);
 myCamera.add(new THREE.PointLight(0x00ff00));
 //渲染八面体图形
 animate();
 function animate(){
  myRenderer.render(myScene,myCamera);
  requestAnimationFrame(animate);
 }
 var myOrbitControls = new THREE.OrbitControls(myCamera);
 var myPolyhedron,myOctahedron,myGeometry;
 var myMaterial=new THREE.MeshLambertMaterial({color:0x00ff00});
 //响应单击“使用多面体方法绘制八面体图形”按钮
 $("#myButton1").click(function(){
  myScene.remove(myPolyhedron);
  myScene.remove(myOctahedron);
  var myVertices=[1,0,0, -1,0,0, 0,1,0, 0,-1,0, 0,0,1, 0,0,-1];
  var myIndices=[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=new THREE.PolyhedronGeometry(myVertices,myIndices,10);
  myPolyhedron=new THREE.Mesh(myGeometry,myMaterial);
  myScene.add(myPolyhedron);
 });
 //响应单击“使用八面体方法绘制八面体图形”按钮
 $("#myButton2").click(function(){
  myScene.remove(myPolyhedron);
  myScene.remove(myOctahedron);
  myGeometry = new THREE.OctahedronGeometry(10);
  myOctahedron = new THREE.Mesh(myGeometry, myMaterial);
  myScene.add(myOctahedron);
 });
</script></body></html>

代码说明

在上面这段代码中，myGeometry=new THREE.PolyhedronGeometry(myVertices, myIndices,10)语句在此实例中用于绘制一个几何体(八面体)，myVertices表示几何体顶点坐标数组；myIndices表示几何体顶点索引数组，三个顶点确定一个三角面；10表示几何体半径，可以理解为顶点位置坐标的缩放系数。myGeometry=new THREE.OctahedronGeometry(10)语句用于绘制一个八面体(几何体)，10表示几何体半径，可以理解为顶点位置坐标的缩放系数，两者在此实例中实现的功能完全相同。此外需要注意：此实例需要添加OrbitControls.js文件。

补充说明

本系列所有Three.js代码(版本号r119)在IntelliJ IDEA环境编写完成，在最新版的Firefox浏览器或Google Chrome浏览器测试成功。因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Three.js的其他文件，在使用时保持网络畅通即可。此外需要注意：Three.js版本更新较快，因此在开发应用本书的源代码时特别需要注意版本问题。

源代码下载

扫描下方二维码获取“Three.js代码083”源代码