zoukankan html css js c++ java

3D模型展示以及体积、表面积计算

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

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

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

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

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

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

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

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

1 <head>
2     <meta charset="UTF-8" />
3     <title>WebGL</title>
4     <script type="text/javascript" charset="utf-8" src="js/three.js"></script>
5     <script src="js/STLLoader.js"></script>
6     <script src="js/TrackballControls.js"></script>
7     <script src="js/AsciiEffect.js"></script>
8     <style>body{overflow:hidden;background:#eee}</style>
9 </head>

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

接下来用JS定义一个画布

1     var WIDTH,HEIGHT;
2     var    renderer;

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

 1 function initThree() {
 2         WIDTH = document.documentElement.clientWidth/2;<!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} -->
 3         HEIGHT = document.documentElement.clientHeight/2;
 4         /* 渲染器 */
 5         renderer = new THREE.WebGLRenderer();
 6         renderer.setSize(WIDTH , HEIGHT);
 7         renderer.setClearColor(new THREE.Color(0x66666));
 8 
 9         renderer.gammaInput = true;
10         renderer.gammaOutput = true;
11 
12         document.body.appendChild(renderer.domElement);
13     }

下来是摄像头定义

 1 /* 摄像头 */
 2     var camera;
 3     function initCamera() {
 4         var VIEW_ANGLE = 45,
 5                 ASPECT = WIDTH / HEIGHT,
 6                 NEAR = 0.1,
 7                 FAR = 10000;
 8         camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
 9         camera.position.set(20, 0, 0);
10         //设置视野的中心坐标
11         camera.lookAt(scene.position);
12     }

场景植入

1 /* 场景 */
2     var scene;
3     function initScene() {
4         scene = new THREE.Scene();
5     }

灯光定义

 1 /* 灯光 */
 2     var light,light2,light3;
 3     function initLight() {
 4         //平行光
 5         light = new THREE.DirectionalLight(0xFFFFFF);
 6         light.position.set(0, 99, 0).normalize();
 7         scene.add(light);
 8         //环境光
 9         light2 = new THREE.AmbientLight(0x999999);
10         scene.add(light2);
11         //点光源
12         light3 = new THREE.PointLight(0x00FF00);
13         light3.position.set(300, 0, 0);
14         scene.add(light3);
15     }

动画定义

1 function animate() {
2         requestAnimationFrame( animate );
3         controls.update();
4         effect.render( scene, camera );
5     }

调用所有方法开始执行

1 function threeStart() {
2         initThree();
3         initScene();
4         initCamera();
5         initLight();
6         initObject();
7         initControl();
8         animate();
9     }

显示对象

/* 显示对象 */
    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; 求得体积

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

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

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

查看全文

相关阅读:
CSS之边界塌陷
 不用for loop循环一个读取一个文件
 CSS之毗邻选择器与普通兄弟选择器的区别
 python 一行代码
 Regex Golf 练习记录
 c实现双向链表
 c实现单向链表
 c++实现 String 类
 js获取指定小时日期格式化
 git clone Timed out 解决

原文地址：https://www.cnblogs.com/we-jack/p/8608623.html