0

我尝试使用three.js 的Marching Cubes 库实现一个显示不同类型的空间二次曲线的小程序，以呈现隐式表面。虽然出现的形状不正确，我想我没有THREE.MarchingCubes根据需要实现属性。小程序的核心有以下代码

        quadricData = {
            a11: 1,
            a22: 1,
            a33: 1,
            a12: 0,
            a13: 0,
            a23: 0,
            a1: 0,
            a2: 0,
            a3: 0,
            a: -1
        };

        quadValue = function (data, x, y, z) {
            return data.a11*x*x+
                   data.a22*y*y+
                   data.a33*z*z+
                   data.a12*2*x*y+
                   data.a13*2*x*z+
                   data.a23*2*y*z+
                   data.a1*x+
                   data.a2*y+
                   data.a3*z+
                   data.a;
        }

        var res = 50;
        var material = new THREE.MeshPhongMaterial( {
            color: '#1565C0', // blue 800
            transparent: true,
            opacity: 0.8,
            side: THREE.DoubleSide,
            flatShading: true
        } );

        quadric = new THREE.MarchingCubes( res, material );
        quadric.isolation = 0;

        for ( var k = 0 ; k < res ; k++ ) {
            for ( var j = 0 ; j < res ; j++ ) {
                for ( var i = 0 ; i < res ; i++ ) {

                var x = 8*(i-res/2)/res;
                var y = 8*(j-res/2)/res;
                var z = 8*(k-res/2)/res;

                quadric.field[ i + j*res + k*res*res ] = quadValue(quadricData,x,y,z);

                }
            }
        }

但完整的代码可以在这里检查。我想field属性必须用函数的值填充，但也许这不是正确的方法。例如，当a11变大时会出现奇怪的效果，这会扩大椭圆体而不是缩小它；“行进立方体网格”似乎也在扩展，这有点有趣。

在此处输入图像描述

许多其他配置与预期结果不匹配。哪个是正确的使用方法THREE.MarchingCubes？

4

1 回答 1

2

To use THREE.MarchingCubes:

  • Include MarchingCubes.js via <script src="https://threejs.org/examples/js/MarchingCubes.js"></script>

  • Allocate the volume with resolution R, which will be a voxel cube with resolution R x R x R, via V = new THREE.MarchingCubes( R, material )

  • Fill in the voxel values, which are a linear array of float values. The index for a voxel at location [X,Y,Z] is (X + (Y * R) + ( Z * R * R)). Set the values via V.field[ i + j*R + k*R*R ] = f

  • Set the isolation value. The displayed volume will be all voxels less than this value, so this could all be called iso-surface value. Set the value via V.isolation = s.

It seems your code is working correctly. Increasing a11 does reduce the volume in the x dimension as expected.

enter image description here

The only thing I noticed is the code multiplying a12 and a13 and a23 by 2. If a quadric equation is expressed as:

Ax^2 + By^2 + Cz^2 + Dxy + Exz + Fyz + Gz + Hy + Iz + J = 0

And the calculation is: data.a11*x*x + data.a22*y*y + data.a33*z*z + data.a12*2*x*y + data.a13*2*x*z + data.a23*2*y*z + data.a1*x + data.a2*y + data.a3*z + data.a, then it seems to multiply D E and F by two for no reason?

Otherwise, was there a bug you've resolved since posting the question? Or could you be more specific about the problem?

Bug report: There's a bug report 14060 logged against three.js here. As of May 2018, with three.js version r92, it appears the Marching Cubes library is working in (1) Firefox in Windows and MacOS, (2) Safari on MacOS. It appears buggy in Firefox on Linux, and in Chrome on any system. Turning off flat shading may resolve the problem.

于 2018-05-14T02:17:38.167 回答