在 three.js 中以线框模式显示加载的 OBJ 模型

Question

我想以线框模式显示我加载的 .obj 文件.. 我开始了解 WireFrameGeometry 但出于某种原因，.mtl 纹理只能显示。

下面是代码..

  /* Model */

 var mtlLoader = new THREE.MTLLoader();
 mtlLoader.setBaseUrl('assets/');
 mtlLoader.setPath('assets/');
 mtlLoader.load('materialfile.mtl', function(materials) {

     materials.preload();


     var objLoader = new THREE.OBJLoader();
     objLoader.setMaterials(materials);
     objLoader.setPath('assets/');
     objLoader.load('Objectfile.obj', function(object) {

         object.traverse(function(child) {

             if (child.isMesh) {

                 var wireframeGeomtry = new THREE.WireframeGeometry(child.geometry);
                 var wireframeMaterial = new THREE.LineBasicMaterial({
                     color: 0xffffff
                 });
                 var wireframe = new THREE.LineSegments(wireframeGeomtry, wireframeMaterial);
                 child.add(wireframe);

             }
         });
         scene.add(object);

     });

 });

我只想要模型的线框，没有任何填充..

提前致谢。

完整代码如下...


<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="three.js"></script>
    <script src="TrackballControls.js"></script>
    <script src="cannon.js"></script>
    <script src="Detector.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="OBJLoader.js"></script>
    <script src="MTLLoader.js"></script>


</head>

<body>

    <script>
        if (!Detector.webgl) {
            Detector.addGetWebGLMessage();
        }

        var container;

        var camera, controls, scene, renderer;
        var lighting, ambient, keyLight, fillLight, backLight;

        init();
        animate();

        function init() {

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

            /* Camera */

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.z = 50;


            /* Scene */

            scene = new THREE.Scene();
            lighting = false;

            ambient = new THREE.AmbientLight(0xffffff, 1.0);
            scene.add(ambient);

            // keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
            // keyLight.position.set(-100, 0, 100);

            // fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
            // fillLight.position.set(100, 0, 100);

            // backLight = new THREE.DirectionalLight(0xffffff, 1.0);
            // backLight.position.set(100, 0, -100).normalize();

            /* Model */

            // var mtlLoader = new THREE.MTLLoader();
            // mtlLoader.setBaseUrl('assets/');
            // mtlLoader.setPath('assets/');
            // mtlLoader.load('mtlfile.mtl', function(materials) {

            //     materials.preload();

            // materials.materials.default.map.magFilter = THREE.NearestFilter;
            // materials.materials.default.map.minFilter = THREE.LinearFilter;

            var objLoader = new THREE.OBJLoader();
            // objLoader.setMaterials(materials);
            objLoader.setPath('assets/');
            objLoader.load('objectfile.obj', function(object) {

                object.traverse(function(child) {

                    if (child.isMesh) {

                        var wireframeGeomtry = new THREE.WireframeGeometry(child.geometry);
                        var wireframeMaterial = new THREE.LineBasicMaterial({
                            color: 0xeeeeee
                        });
                        var wireframe = new THREE.LineSegments(wireframeGeomtry, wireframeMaterial);

                        // add to child so we get same orientation
                        child.add(wireframe);
                        // to parent of child. Using attach keeps our orietation
                        child.parent.attach(wireframe);
                        // remove child (we don't want child)
                        child.parent.remove(child);

                    }
                });
                scene.add(object);

            });

            // });

            /* Renderer */

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(new THREE.Color("hsl(0, 0%, 10%)"));

            container.appendChild(renderer.domElement);

            /* Controls */

            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.25;
            controls.enableZoom = true;
            controls.autoRotate = true;


            /* Events */

            window.addEventListener('resize', onWindowResize, false);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {

            requestAnimationFrame(animate);

            controls.update();

            render();

        }

        function render() {

            renderer.render(scene, camera);

        }
    </script>

</body>

</html>

这就是完整的代码.. 它只是基本的对象加载器.. 不知道问题出在代码上还是模型上。它显示为完全填充的白色模型

Answer 1


         object.traverse(function(child) {

             if (child.isMesh) {

                child.material.wireframe = true;

             }
         }

Answer 2

这对我有用

 objLoader.load('Objectfile.obj', function(object) {

     object.traverse(function(child) {

         if (child.isMesh) {

             var wireframeGeomtry = new THREE.WireframeGeometry(child.geometry);
             var wireframeMaterial = new THREE.LineBasicMaterial({
                 color: 0xffffff
             });
             var wireframe = new THREE.LineSegments(wireframeGeomtry, wireframeMaterial);

             // add to child so we get same orientation
             child.add(wireframe);
             // to parent of child. Using attach keeps our orietation
             child.parent.attach(wireframe);
             // remove child (we don't want child)
             child.parent.remove(child);

         }
     });
     scene.add(object);

 });

示例：

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/controls/OrbitControls.js';
import {OBJLoader2} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/loaders/OBJLoader2.js';

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

  const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 10, 20);

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);
  controls.update();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('black');

  {
    const objLoader = new OBJLoader2();
    objLoader.load('https://threejsfundamentals.org/threejs/resources/models/windmill/windmill.obj', (root) => {
      root.traverse(child => {
             if (child.isMesh) {

                 var wireframeGeomtry = new THREE.WireframeGeometry(child.geometry);
                 var wireframeMaterial = new THREE.LineBasicMaterial({
                     color: 0xffffff
                 });
                 var wireframe = new THREE.LineSegments(wireframeGeomtry, wireframeMaterial);
                 child.add(wireframe);
                 child.parent.attach(wireframe);
                 child.parent.remove(child);
             }
      });
      scene.add(root);
    });
  }

  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);
}

main();

</script>

你也可以按照 manthrax 建议的方式来做，除非你需要检查 child.material 是否是一个数组，然后对于每个 material 删除贴图（这样纹理就不会被使用）并将 emissive 设置为某种颜色（您可能还想将 color 设置为黑色）`.

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/controls/OrbitControls.js';
import {OBJLoader2} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/loaders/OBJLoader2.js';

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

  const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 10, 20);

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);
  controls.update();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('black');

  function makeWireframe(material) {
    material.wireframe = true;
    material.emissive.set('#0FF');
    material.map = undefined;
  }

  {
    const objLoader = new OBJLoader2();
    objLoader.load('https://threejsfundamentals.org/threejs/resources/models/windmill/windmill.obj', (root) => {
      root.traverse(child => {
             if (child.isMesh) {
                if (Array.isArray(child.material)) {
                  child.material.forEach(makeWireframe);
                } else {
                  makeWireframe(child.material)
                }
             }
      });
      scene.add(root);
    });
  }

  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);
}

main();

</script>

在 three.js 中以线框模式显示加载的 OBJ 模型

Display loaded OBJ model in wireframe mode in three.js

wireframe

three.js

3d-model