本文原创 如转载请注明出处！！！

本博客地址http://www.cnblogs.com/we-jack

本文原创，如果有同样需求的小伙伴请第一时间联系我 或者在留言区留言

上次为大家提供了3D模型的展示之后 发现网上有很多想要计算3D模型表面积和体积的需求 那么经过掉了几百根头发的艰辛历程之后 终于为大家解决了这一需求 按照惯例先上图为证

当然我这样写 有的人认为我在忽悠 你说你的体积 表面积是这就是这啊 没有可验证性么

那好~ 没有对比就没有伤害 下面是某3D打印网站上传同样模型后给出的数据 各位看官们看好了

实打实的讲道理 他给出的体积还是负值 我都给转正了[:斜眼笑]

好了 闲话少絮 直接给大家上代码 （JS代码如果有需要的直接留言找我）

 <head>

     <meta charset="UTF-8" />

     <title>WebGL</title>

     <script type="text/javascript" charset="utf-8" src="js/three.js"></script>

     <script src="js/STLLoader.js"></script>

     <script src="js/TrackballControls.js"></script>

     <script src="js/AsciiEffect.js"></script>

     <style>body{overflow:hidden;background:#eee}</style>

 </head>

先引入我们几个必须的JS （之前有人问OBJ模型怎么上传 这个问题可以直接百度three.js的使用方法）

接下来用JS定义一个画布

     var WIDTH,HEIGHT;

     var    renderer;

定义好了之后 我们初始化一下我们的three

 function initThree() {

         WIDTH = document.documentElement.clientWidth/2;<!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} -->

         HEIGHT = document.documentElement.clientHeight/2;

         /* 渲染器 */

         renderer = new THREE.WebGLRenderer();

         renderer.setSize(WIDTH , HEIGHT);

         renderer.setClearColor(new THREE.Color(0x66666));

         renderer.gammaInput = true;

         renderer.gammaOutput = true;

         document.body.appendChild(renderer.domElement);

     }

下来是摄像头定义

 /* 摄像头 */

     var camera;

     function initCamera() {

         var VIEW_ANGLE = 45,

                 ASPECT = WIDTH / HEIGHT,

                 NEAR = 0.1,

                 FAR = 10000;

         camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

         camera.position.set(20, 0, 0);

         //设置视野的中心坐标

         camera.lookAt(scene.position);

     }

场景植入

 /* 场景 */

     var scene;

     function initScene() {

         scene = new THREE.Scene();

     }

灯光定义

 /* 灯光 */

     var light,light2,light3;

     function initLight() {

         //平行光

         light = new THREE.DirectionalLight(0xFFFFFF);

         light.position.set(0, 99, 0).normalize();

         scene.add(light);

         //环境光

         light2 = new THREE.AmbientLight(0x999999);

         scene.add(light2);

         //点光源

         light3 = new THREE.PointLight(0x00FF00);

         light3.position.set(300, 0, 0);

         scene.add(light3);

     }

动画定义

 function animate() {

         requestAnimationFrame( animate );

         controls.update();

         effect.render( scene, camera );

     }

调用所有方法开始执行

 function threeStart() {

         initThree();

         initScene();

         initCamera();

         initLight();

         initObject();

         initControl();

         animate();

     }

显示对象

/* 显示对象 */

    var cube;

    function initObject(){

        // ASCII file

        var loader = new THREE.STLLoader();

        loader.addEventListener( 'load', function ( event ) {

            var loading = document.getElementById("Loading");

            loading.parentNode.removeChild(loading);

            var geometry = event.content;

            var Area = 0.0;

            var volumes = 0.0;

    for(var i = 0; i < geometry.faces.length; i++){

        var Pi = geometry.faces[i].a;

        var Qi = geometry.faces[i].b;

        var Ri = geometry.faces[i].c;

        var P = new THREE.Vector3(geometry.vertices[Pi].x, geometry.vertices[Pi].y, geometry.vertices[Pi].z);

        var Q = new THREE.Vector3(geometry.vertices[Qi].x, geometry.vertices[Qi].y, geometry.vertices[Qi].z);

        var R = new THREE.Vector3(geometry.vertices[Ri].x, geometry.vertices[Ri].y, geometry.vertices[Ri].z);

//        volumes += volumeOfT(P, Q, R);  会产生负数..............

        volumes += volumeOfT(R, Q, P);

         Area += AreaOfTriangle(R, Q, P);

    }

    SurfaceArea = (Area / 100).toFixed(2);

        console.log('表面积:'+SurfaceArea);

    loadedObjectVolume = (volumes / 1000).toFixed(2);

        console.log('体积:'+loadedObjectVolume);

    //砖红色

    var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } );

    //纯黑色

//            var material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'http://localhost:8080/textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true } ) ;

    //粉色 带阴影

//            var material = new THREE.MeshLambertMaterial( { color:0xff5533, side: THREE.DoubleSide } );

    //灰色

//            var material = new THREE.MeshLambertMaterial({color: 000000});    //材质设定  (颜色)

    var mesh = new THREE.Mesh( geometry, material );

    var center = THREE.GeometryUtils.center(geometry);

    var boundbox=geometry.boundingBox;

    var vector3 = boundbox.size(null);

    var vector3 = boundbox.size(null);

    console.log(vector3);

    var scale = vector3.length();

    camera.position.set(scale, 0, 0);

    camera.lookAt(scene.position);

    scene.add(camera);

    //利用一个轴对象以可视化的3轴以简单的方式。X轴是红色的。Y轴是绿色的。Z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。要添加这个帮手，使用下面的代码：

    var axisHelper = new THREE.AxisHelper(800);

    scene.add(axisHelper);

    //周围边框

    bboxHelper = new THREE.BoxHelper();

    bboxHelper.visible = true;

    var meshMaterial = material;

    mainModel = new THREE.Mesh(geometry, meshMaterial);

    bboxHelper.update(mainModel);

    bboxHelper.geometry.computeBoundingBox();

    scene.add(bboxHelper);

        //它吸引的特定对象3D对象（它看起来像金字塔）与线几何，这有助于可视化什么指定摄像机包含在它的视锥。

//            var cameraParObj = new THREE.Object3D();

//            cameraParObj.position.y = 200;

//            cameraParObj.position.z = 700;

//            scene.add(cameraParObj);

//            perspectiveCamera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 1500);

//            cameraParObj.add(perspectiveCamera);

//            var cameraHelper = new THREE.CameraHelper(perspectiveCamera);

//            scene.add(cameraHelper);

        //地板网格

        //var gridHelper = new THREE.GridHelper(500, 40); // 500 is grid size, 20 is grid step

        //gridHelper.position = new THREE.Vector3(0, 0, 0);

        //gridHelper.rotation = new THREE.Euler(0, 0, 0);

        //scene.add(gridHelper);

        //var gridHelper2 = gridHelper.clone();

        //gridHelper2.rotation = new THREE.Euler(Math.PI / 2, 0, 0);

        //scene.add(gridHelper2);

        //var gridHelper3 = gridHelper.clone();

        //gridHelper3.rotation = new THREE.Euler(Math.PI / 2, 0, Math.PI / 2);

        //scene.add(gridHelper3);

        //var grid = new THREE.GridHelper(300, 40, 25, [0, 0, 1], 0x000055, 0.2, true, "#FFFFFF", "left");

        //scene.add(grid);

        mesh.position.set(0,0,0);

//            mesh.position.x = scene.position.x;

//            mesh.position.y = scene.position.y ;

//            mesh.position.z = scene.position.z;

        scene.add(mesh);

        renderer.clear();

        renderer.render(scene, camera);

    } );

    // loader.load( '3dfile/莫比乌斯环.STL' );

    loader.load( '3dfile/狼人.STL' );

}

    //控制

    var effect;

    var controls;

    function initControl(){

        effect = new THREE.AsciiEffect( renderer );

        effect.setSize( WIDTH, HEIGHT );

        controls = new THREE.TrackballControls( camera,renderer.domElement);

    }

代码上面的注释都非常清楚了，根据这些我们很清楚的会看到在求体积的时候 我们必须先要得到一个四面体的有符号体积 - 基于你的三角形并在原点处排在最前面。音量的标志来自您的三角形是否指向原点的方向。（三角形的法线本身取决于顶点的顺序，这就是为什么你在下面看不到它的原因。）

这一点大家要是不懂的话 可以去搜索一下一种计算任意非凸多面体积分性质的符号方法 这个方法详细的讲解了 多面体的体积算法

在代码的77行处我们可以看到 我在拿到多面体的每一个面之后进行了遍历从而求出中心点到每个面的距离 再根据THREE提供的方法 得到三个有效点 然后将所有的点进行组合 使用 (-v321 + v231 + v312 - v132 - v213 + v123)/6.0; 求得体积

在计算表面积的时候出现了一点问题 如果模型出现在网格下面那么就会出现负值 但是数字的值是没有问题的 所以我们可以去将组合重新排序从而使负值转正 当然也可以使用绝对值的方法使数值转正

最后声明 如需转载请注明出处！！！

本文原创，如果有同样需求的小伙伴请第一时间联系我 或者在留言区留言

3D模型展示以及体积、表面积计算的更多相关文章

  1. three.js实现3D模型展示

    由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能 ...

  2. 基于playcanvas的3d模型展示

    1.使用基于playcanvas的离线编辑器制作模型效果 2.使用基于playcanvas的开发包读取编辑好的3d模型进行在线3d展示 效果如下:

  3. ANDROID嵌入式应用Unity3D视图(画廊3D模型)

    转载请注明来自大型玉米的博客文章(http://blog.csdn.net/a396901990),谢谢支持! 效果展示:   watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  4. 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

    在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的. 故事要从Right Hemisphere说起,这是一家专业的企业级2D/3D模型浏览及转换的软件供应 ...

  5. 基于 webGL 的元素周期表 3D 交互展示

    前言 之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”.“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青 ...

  6. 扒几个 3D 模型备用

    前言 在上一篇中,我展示了 OpenGL 开发的基本过程,算是向 3D 世界迈出的一小步吧.对于简单的 3D 物体,比如立方体.球体.圆环等等,我们只需要简单的计算就可以得到他们的顶点的坐标.但是仅仅 ...

  7. Mask裁切UI粒子特效或者3D模型

    刚好前几天有人问我这个问题,再加上新项目也可能用,所以这两天就研究了一下.其实如果粒子特效 和3D模型 都用RenderTexture来做的话就不会有裁切的问题,但是粒子特效用RenderTextur ...

  8. 如何让NGUI的对象在3D模型之上

    假设场景中有两台摄像机, 一台是NGUI的摄像机, 另外一台是投影摄像机. 投影摄像机看的是3D模型, Depth比NGUI的摄像机要大, Clear Flags设置的是Depth only. 现在想 ...

  9. 【Android界面实现】可旋转的汽车3D模型效果的实现

    转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 今天要给大家介绍的是怎样实现可旋转的汽车3D模型. 先看实现效果 这仅仅是静态图,实际上,这个模型是能够依据 ...

随机推荐

  1. 使用C#开发C/S框架高级版添加新项目实例

    操作步骤: 1.新建一个项目CSFramework3.test,在CSFramework3.test项目下新建一个FormMan窗口(此时不需要继承). 2.按F7打开类,替换一下引用 using S ...

  2. Opencv 330 如何進行圖像的旋轉？

    //圖像旋轉 cv::Mat Transformation(cv::Mat src,int angle) { cv::Mat dst = src.clone(); //中心点 cv::Point ce ...

  3. 《android开发艺术探索》读书笔记（八）--WindowManager

    接上篇<android开发艺术探索>读书笔记(七)--动画 No1: Window是一个抽象类,它的具体实现是PhoneWindow.创建一个Window是很简单的事,只需要通过Windo ...

  4. [Essay] Apache Flink：十分可靠，一分不差

    Apache Flink:十分可靠,一分不差 Apache Flink 的提出背景 我们先从较高的抽象层次上总结当前数据处理方面主要遇到的数据集类型(types of datasets)以及在处理数据 ...

  5. TCP/IP三次握手四次挥手

    本文通过图来梳理TCP-IP协议相关知识.TCP通信过程包括三个步骤:建立TCP连接通道,传输数据,断开TCP连接通道.如图所示,给出了TCP通信过程的示意图. TCP 三次握手四次挥手 主要包括三部 ...

  6. Luogu P1877 [HAOI2012]音量调节

    题目描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都需要改变一次音量.在演出开始之前,他已经做好一个列表,里面写着每首歌开始之前他想要改变的音量是多少. ...

  7. 面试为什么需要了解JVM

    匠心零度 转载请注明原创出处,谢谢! 说在前面 如果你经常注意面试题,你会发现现在面试题多多少少会含有jvm相关的面试题,之前也把一些jvm面试题汇总了下:面试题系列一,那么为什么现在面试需要了解或者 ...

  8. 深刻理解iosBlock

    深刻理解iosBlock ///一个控制器里的方法 - (void)setRefreshHeader { ACWeakSelf(self); self.tableView.mj_header = [M ...

  9. R语言︱构造新序列

    1.数值构造函数rep与seq #数值构造rep与seq rep(1:4,each=2)#依次重复1:4两遍 rep(1:4,2) #注意,重复1:4两遍 seq(from=3,to=5,by=0.2 ...

  10. WebService之CXF注解之四（测试类）

    TeacherTest.java: /** * @Title:TeacherTest.java * @Package:com.test.service * @Description: * @autho ...