Reputation: 319

Display loaded OBJ model in wireframe mode in three.js

I wanted to display my loaded .obj file in wireframe mode.. I got to know about the WireFrameGeometry But for somereason the .mtl texture only gets display .

Below is the code ..

  /* 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);

     });

 });

I only want the wireframe of the model without any fill..

Thanks in advance.

The entire code is below...


<!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>

So this is the entire code.. Its just the basic obj loader .. I don't know whether the problem is in the code or model . It shows as a fully filled white model

Upvotes: 3

Answers (2)

user128511

Reputation:

This worked for me

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

 });

Example:

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>

You can also do it the way manthrax suggested except you need to check if child.material is an array or not, then for each material remove the map (so the texture is not used) and set emissive to some color (you might also want to set color to black)`.

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>

Upvotes: 2

manthrax

Reputation: 5036


         object.traverse(function(child) {

             if (child.isMesh) {

                child.material.wireframe = true;

             }
         }

Upvotes: 5

Display loaded OBJ model in wireframe mode in three.js

Answers (2)

Related Questions