Отображение загруженной модели OBJ в каркасном режиме в три раза. js - PullRequest
Новая
       65

Отображение загруженной модели OBJ в каркасном режиме в три раза. js

1 голос
/ 20 апреля 2020

Я хотел показать мой загруженный файл .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>

Так что это весь код .. Это просто основной c загрузчик obj .. Я не знаю, в чем проблема в коде или модели. Это показывает, как полностью заполненная белая модель

Ответы [ 2 ]

2 голосов
/ 20 апреля 2020 

         object.traverse(function(child) {

             if (child.isMesh) {

                child.material.wireframe = true;

             }
         }
1 голос
/ 20 апреля 2020

Это сработало для меня 

 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>

Вы также можете сделать это так, как предлагает мантракс, за исключением того, что вам нужно проверить, является ли child.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>
...