为什么我在使用three.js渲染3d对象时会看到这些白线？

Question

当我使用three.js渲染我的3d模型时，我不确定为什么我会看到这些白线。它们是线框图的一部分吗？我知道有些网格并没有像它们应该的那样被分开。我也不确定如何删除线框，如果是这样的话，可以使用一些指导。我找不到我可以效仿的例子。这是这个问题的屏幕显示。

​

​

下面是我的three.js代码以供参考-

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

        import { DDSLoader } from '../dap/three.js-master/examples/jsm/loaders/DDSLoader.js';
        import { MTLLoader } from '../dap/three.js-master/examples/jsm/loaders/MTLLoader.js';
        import { OBJLoader } from '../dap/three.js-master/examples/jsm/loaders/OBJLoader.js';
        import { OrbitControls } from '../dap/three.js-master/examples/jsm/controls/OrbitControls.js';
        function main() {

          const canvas = document.querySelector('#c');
          const renderer = new THREE.WebGLRenderer({canvas});
          const renderer2 = new THREE.WebGLRenderer({canvas});

            var kitchenCameraActive = false;

            document.getElementById("roomSelect").addEventListener("change", changeIt);

        function changeIt(e) {
            //e.target.value
            document.getElementById(e.target.value).click();
            console.log(e);

        }

          var fov = 45;
          var aspect = 2;  // the canvas default
          var near = 0.1;
          var far = 100;
          var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
          camera.position.set(-97.570, 5.878, -5.289);
          camera.rotation.set(0,0,0);
          var controls;
          controls = new OrbitControls( camera, canvas );   
          //var controls = new THREE.OrbitControls(camera, canvas);
          controls.target.set(0, 5, 0);
          controls.update();

          document.getElementById("kitchen").addEventListener("click", changeCamera);         
          document.getElementById("bathroom").addEventListener("click", changeCamera);        
          document.getElementById("deck").addEventListener("click", changeCamera);        
          document.getElementById("livingRoom").addEventListener("click", changeCamera);        
          document.getElementById("bedRoom").addEventListener("click", changeCamera);
          document.getElementById("walkway").addEventListener("click", changeCamera);
          document.getElementById("sideHouse").addEventListener("click", changeCamera);
          document.getElementById("frontPorch").addEventListener("click", changeCamera);
          document.getElementById("garageDoor").addEventListener("click", changeCamera);
          document.getElementById("insideGarage").addEventListener("click", changeCamera);

        function changeCamera(e) {

            camera.rotation.set(e.toElement.attributes[5].nodeValue, e.toElement.attributes[6].nodeValue, e.toElement.attributes[7].nodeValue);             
            camera.fov = e.toElement.attributes[4].nodeValue;
            camera.position.set(e.toElement.attributes[1].nodeValue, e.toElement.attributes[2].nodeValue, e.toElement.attributes[3].nodeValue);         
            camera.updateProjectionMatrix();

            if (e.target.id == "walkway" || e.target.id == "frontPorch" || e.target.id == "garageDoor" || e.target.id == "insideGarage")
                {
                    controls.target.set(0, 5, 0);
                    controls.update();
                }               
            if(e.target.id == "kitchen"){
            controls.target.set(7, 6, 7);
            }
            if(e.target.id == "bathroom"){
            controls.target.set(-9,15,-7);
            }
            if(e.target.id == "deck"){
            controls.target.set(31, 7, 1);
            }
            if(e.target.id == "livingRoom"){
            controls.target.set(-12.5, 1.5, -18.5);
            }
            if(e.target.id == "bedRoom"){
            controls.target.set(-15.7, 14, -21);
            }
            if(e.target.id == "insideGarage"){
            controls.target.set(24.405, 6.733, -6.425);
            }
            controls.update();  
            console.log(e);
        }

          const scene = new THREE.Scene();
          scene.background = new THREE.Color('black');
          {
            const planeSize = 40;
          }

          {
            const skyColor = 0xB1E1FF;  // light blue
            const groundColor = 0xB97A20;  // brownish orange
            const intensity = 1;
            const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
            scene.add(light);
          }

          var light = new THREE.AmbientLight( 0x404040 ); // soft white light
          scene.add( light );

          var onProgress = function ( xhr ) {

                if ( xhr.lengthComputable ) {

                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

                }

            };

            var onError = function () { };

            var manager = new THREE.LoadingManager();
            manager.addHandler( /\.dds$/i, new DDSLoader() );     

          new MTLLoader( manager )
                .setPath( '' )
                .load( 'dapHouseGood5.mtl', function ( materials ) {

                    materials.preload();

                    new OBJLoader( manager )
                        .setMaterials( materials )
                        .setPath( '' )
                        .load( 'dapHouseGood5.obj', function ( object ) {

                            //object.position.y = - 95;
                            scene.add( object );

                        }, onProgress, onError );

                } );

          function resizeRendererToDisplaySize(renderer) {
            const canvas = renderer.domElement;
            const width = canvas.clientWidth;
            const height = canvas.clientHeight;
            const needResize = canvas.width !== width || canvas.height !== height;
            if (needResize) {
              renderer.setSize(width, height, false);
            }
            return needResize;
          }

          function render() {
            if (resizeRendererToDisplaySize(renderer)) {
              const canvas = renderer.domElement;
              camera.aspect = canvas.clientWidth / canvas.clientHeight;
              camera.updateProjectionMatrix();
            }

            renderer.render(scene, camera);
            requestAnimationFrame(render);
          }

          requestAnimationFrame(render);

            function onPositionChange(o) {
            console.log("position changed in object");
            console.log(o);
            console.log('camera_default: '+camera.position.x+', '+camera.position.y+', '+camera.position.z);
            console.log('camera_default: '+camera.rotation.x+', '+camera.rotation.y+', '+camera.rotation.z);
            console.log(camera.fov);
                console.log('quaternion_default: '+camera.quaternion.x+', '+
                camera.quaternion.y+', '+camera.quaternion.z+', '+camera.quaternion.w);
            }

            controls.addEventListener('change', onPositionChange);

        var mouse = new THREE.Vector2();
        var raycaster, mouse = { x : 0, y : 0};

        init();

        function init () {
            //Usual setup code here.
            raycaster = new THREE.Raycaster();
            renderer.domElement.addEventListener( 'click', raycast, false );
        }

        function raycast ( e ) {
            //1. sets the mouse position with a coordinate system where the center
            //   of the screen is the origin
            mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
            mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;

            //2. set the picking ray from the camera position and mouse coordinates
            raycaster.setFromCamera( mouse, camera );
            //raycaster.setFromCamera( mouse3D, camera );       

            //3. compute intersections
            var intersects = raycaster.intersectObjects( scene.children, true );

            for ( var i = 0; i < intersects.length; i++ ) {
                console.log( intersects[ i ].object.name );
            }
        }               
        }

        main();

            </script>

Answer 1

看起来这些线被定义为线段(每条线两个顶点)，但是加载器将它们创建为一条连续的线。

• Line
• LineSegments

我不确定是调整加载器的输出，还是只复制和修改加载器。但对于调整角度，请尝试以下操作：

scene.traverse( node => {
  if ( node.isLine ) {
    node.isLineSegments = true;
  }
} );
// re-render the scene

这应该将线条的绘制模式设置为线段，而不是连续的，而不重建对象。

(three.js r113)

Answer 2

可能是杂散线框材质，或者几何体可能未正确导出。

加载后，您可以尝试：

scene.traverse( (e)=>{ if(e.isMesh && e.material && e.material.wireframe)e.material.wireframe = false });

看看能不能“修好”它。