0

我已经测试了这里介绍的 PCL 三角测量：

从实验中我得到了一个 .vtk 文件。我试图通过 web 浏览器在 windows 上使用 three.js 来渲染它。如下所示：

看！ 有很多洞

看！有很多洞。这些孔是具有相反法线向量的三角形。

法线向量未对齐

我需要的是翻转那些与其他相反的法线向量。这样我相信我会得到干净的网格图像，如下所示：

这是我想要的预期图像

我怎样才能做到这一点？我是否使用three.js？我是否可以更好地使用 pcl 库？- 三角测量？

这是我测试的html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--title>four.js webgl - loaders - vtk loader</title-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>

  <body>
    <script type="module">

      var console = (window.console = window.console || {});

      import * as THREE from '../build/three.module.js';

      import { TrackballControls } from './jsm/controls/TrackballControls.js';
      import { VTKLoader } from './jsm/loaders/VTKLoader.js';

      import { VertexNormalsHelper } from './jsm/helpers/VertexNormalsHelper.js';

      let container, camera, controls, scene, renderer, vnh;

      init();
      animate();

      function init() {
            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10);
            camera.position.set( -1, 0, 0 );

            scene = new THREE.Scene();

            scene.add( camera );

            // light

            const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
            scene.add( hemiLight );

            const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
            dirLight.position.set( 2, 2, 2 );
            scene.add( dirLight );

            const material = new THREE.MeshLambertMaterial( { color: 0xffffff } );

            const loader = new VTKLoader();
            loader.load( "models/vtk/point_cloud_mesh.vtk", function ( geometry )
            //loader.load( "models/vtk/point_cloud_mesh_not_smoothed.vtk", function ( geometry )
            {

                    //geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, -1,-1));
                    //geometry.computeFaceNormals();

                    //var tmp;
                    //console.log(geometry.index.count);
                    //console.log(geometry.userData);

                    geometry.computeVertexNormals();

                    const mesh = new THREE.Mesh( geometry, material );
                    mesh.position.set( - 0.075, 0.005, 0 );
                    mesh.scale.multiplyScalar( 0.2 );

                    scene.add( mesh );

                    //vnh = new VertexNormalsHelper(mesh, 0.001, 0x00ff00, 1);
                    //scene.add( vnh );

            } );

            // renderer

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container = document.createElement( 'div' );
            document.body.appendChild( container );
            container.appendChild( renderer.domElement );

            // controls

            controls = new TrackballControls( camera, renderer.domElement );
            controls.minDistance = .1;
            controls.maxDistance = 0.5;
            controls.rotateSpeed = 5.0;

            window.addEventListener( 'resize', onWindowResize );

            }

            function onWindowResize() {
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize( window.innerWidth, window.innerHeight );
                    controls.handleResize();
            }

            function animate() {
                    requestAnimationFrame( animate );
                    controls.update();

                    //if (vnh) vnh.update();

                    renderer.render( scene, camera );
            }

    </script>

  </body>
</html>

感谢WestLangley，我终于得到了预期的结果，如下所示：

这是预期的结果！

谢谢 WestLangley 和 Stackoverflow！

但问题仍然存在。WestLangley 的建议有所帮助，但它不是唯一的解决方案。正如你在下面看到的，一些法线向量正对着我的手的身体。我相信有一种方法可以使所有法线向量都从我的手体中取出。这个问题的答案仍然需要......

一些法线向量仍然面向我的手体

4

0 回答 0