上次为大家提供了3D模型的展示之后 发现网上有很多想要计算3D模型表面积和体积的需求 那么经过掉了几百根头发的艰辛历程之后 终于为大家解决了这一需求 按照惯例先上图为证
当然我这样写 有的人认为我在忽悠 你说你的体积 表面积是这就是这啊 没有可验证性么
那好~ 没有对比就没有伤害 下面是某3D打印网站上传同样模型后给出的数据 各位看官们看好了
实打实的讲道理 他给出的体积还是负值 我都给转正了[:斜眼笑]
好了 闲话少絮 直接给大家上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>WebGL</title> 6 <script type="text/javascript" charset="utf-8" src="js/three.js"></script> 7 <script src="js/STLLoader.js"></script> 8 <script src="js/TrackballControls.js"></script> 9 <script src="js/AsciiEffect.js"></script> 10 <style>body{overflow:hidden;background:#eee}</style> 11 </head> 12 <script> 13 var WIDTH,HEIGHT; 14 var renderer; 15 function initThree() { 16 WIDTH = document.documentElement.clientWidth/2;<!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} --> 17 HEIGHT = document.documentElement.clientHeight/2; 18 /* 渲染器 */ 19 renderer = new THREE.WebGLRenderer(); 20 renderer.setSize(WIDTH , HEIGHT); 21 renderer.setClearColor(new THREE.Color(0x66666)); 22 23 renderer.gammaInput = true; 24 renderer.gammaOutput = true; 25 26 document.body.appendChild(renderer.domElement); 27 } 28 29 /* 摄像头 */ 30 var camera; 31 function initCamera() { 32 var VIEW_ANGLE = 45, 33 ASPECT = WIDTH / HEIGHT, 34 NEAR = 0.1, 35 FAR = 10000; 36 camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 37 camera.position.set(20, 0, 0); 38 //设置视野的中心坐标 39 camera.lookAt(scene.position); 40 } 41 42 /* 场景 */ 43 var scene; 44 function initScene() { 45 scene = new THREE.Scene(); 46 } 47 48 /* 灯光 */ 49 var light,light2,light3; 50 function initLight() { 51 //平行光 52 light = new THREE.DirectionalLight(0xFFFFFF); 53 light.position.set(0, 99, 0).normalize(); 54 scene.add(light); 55 //环境光 56 light2 = new THREE.AmbientLight(0x999999); 57 scene.add(light2); 58 //点光源 59 light3 = new THREE.PointLight(0x00FF00); 60 light3.position.set(300, 0, 0); 61 scene.add(light3); 62 } 63 64 /* 显示对象 */ 65 var cube; 66 function initObject(){ 67 // ASCII file 68 var loader = new THREE.STLLoader(); 69 70 loader.addEventListener( 'load', function ( event ) { 71 var loading = document.getElementById("Loading"); 72 loading.parentNode.removeChild(loading); 73 var geometry = event.content; 74 var Area = 0.0; 75 var volumes = 0.0; 76 77 for(var i = 0; i < geometry.faces.length; i++){ 78 var Pi = geometry.faces[i].a; 79 var Qi = geometry.faces[i].b; 80 var Ri = geometry.faces[i].c; 81 82 var P = new THREE.Vector3(geometry.vertices[Pi].x, geometry.vertices[Pi].y, geometry.vertices[Pi].z); 83 var Q = new THREE.Vector3(geometry.vertices[Qi].x, geometry.vertices[Qi].y, geometry.vertices[Qi].z); 84 var R = new THREE.Vector3(geometry.vertices[Ri].x, geometry.vertices[Ri].y, geometry.vertices[Ri].z); 85 // volumes += volumeOfT(P, Q, R); 会产生负数.............. 86 volumes += volumeOfT(R, Q, P); 87 Area += AreaOfTriangle(R, Q, P); 88 } 89 SurfaceArea = (Area / 100).toFixed(2); 90 console.log('表面积:'+SurfaceArea); 91 loadedObjectVolume = (volumes / 1000).toFixed(2); 92 console.log('体积:'+loadedObjectVolume); 93 94 //砖红色 95 var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } ); 96 //纯黑色 97 // var material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'http://localhost:8080/textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true } ) ; 98 //粉色 带阴影 99 // var material = new THREE.MeshLambertMaterial( { color:0xff5533, side: THREE.DoubleSide } ); 100 //灰色 101 // var material = new THREE.MeshLambertMaterial({color: 000000}); //材质设定 (颜色) 102 103 var mesh = new THREE.Mesh( geometry, material ); 104 var center = THREE.GeometryUtils.center(geometry); 105 var boundbox=geometry.boundingBox; 106 var vector3 = boundbox.size(null); 107 var vector3 = boundbox.size(null); 108 console.log(vector3); 109 var scale = vector3.length(); 110 camera.position.set(scale, 0, 0); 111 camera.lookAt(scene.position); 112 scene.add(camera); 113 114 //利用一个轴对象以可视化的3轴以简单的方式。X轴是红色的。Y轴是绿色的。Z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。要添加这个帮手，使用下面的代码： 115 var axisHelper = new THREE.AxisHelper(800); 116 scene.add(axisHelper); 117 118 //周围边框 119 bboxHelper = new THREE.BoxHelper(); 120 bboxHelper.visible = true; 121 var meshMaterial = material; 122 mainModel = new THREE.Mesh(geometry, meshMaterial); 123 bboxHelper.update(mainModel); 124 bboxHelper.geometry.computeBoundingBox(); 125 scene.add(bboxHelper); 126 127 128 //它吸引的特定对象3D对象（它看起来像金字塔）与线几何，这有助于可视化什么指定摄像机包含在它的视锥。 129 // var cameraParObj = new THREE.Object3D(); 130 // cameraParObj.position.y = 200; 131 // cameraParObj.position.z = 700; 132 // scene.add(cameraParObj); 133 // perspectiveCamera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 1500); 134 // cameraParObj.add(perspectiveCamera); 135 // var cameraHelper = new THREE.CameraHelper(perspectiveCamera); 136 // scene.add(cameraHelper); 137 138 139 //地板网格 140 //var gridHelper = new THREE.GridHelper(500, 40); // 500 is grid size, 20 is grid step 141 //gridHelper.position = new THREE.Vector3(0, 0, 0); 142 //gridHelper.rotation = new THREE.Euler(0, 0, 0); 143 //scene.add(gridHelper); 144 //var gridHelper2 = gridHelper.clone(); 145 //gridHelper2.rotation = new THREE.Euler(Math.PI / 2, 0, 0); 146 //scene.add(gridHelper2); 147 //var gridHelper3 = gridHelper.clone(); 148 //gridHelper3.rotation = new THREE.Euler(Math.PI / 2, 0, Math.PI / 2); 149 //scene.add(gridHelper3); 150 151 //var grid = new THREE.GridHelper(300, 40, 25, [0, 0, 1], 0x000055, 0.2, true, "#FFFFFF", "left"); 152 //scene.add(grid); 153 154 mesh.position.set(0,0,0); 155 // mesh.position.x = scene.position.x; 156 // mesh.position.y = scene.position.y ; 157 // mesh.position.z = scene.position.z; 158 scene.add(mesh); 159 160 renderer.clear(); 161 renderer.render(scene, camera); 162 } ); 163 // loader.load( '3dfile/莫比乌斯环.STL' ); 164 loader.load( '3dfile/狼人.STL' ); 165 } 166 167 //控制 168 var effect; 169 var controls; 170 function initControl(){ 171 effect = new THREE.AsciiEffect( renderer ); 172 effect.setSize( WIDTH, HEIGHT ); 173 controls = new THREE.TrackballControls( camera,renderer.domElement); 174 } 175 176 //计算表面积 177 178 //计算体积 179 180 function animate() { 181 requestAnimationFrame( animate ); 182 controls.update(); 183 effect.render( scene, camera ); 184 } 185 function threeStart() { 186 initThree(); 187 initScene(); 188 initCamera(); 189 initLight(); 190 initObject(); 191 initControl(); 192 animate(); 193 } 194 </script> 195 <body onload="threeStart()"> 196 <div id="Loading" style="color:#fff">Loading...</div> 197 </body> 198 </html>