ep02 – Load 3D models using the Three.js gltf loader

ep02 – Load 3D models using the Three.js gltf loader

Load 3D models using the Three.js gltf loader / Responsive canvas / Change camera position related by mouse position

HTML & script

<!-- Real 3D with Webgl(Three.js) -->

<div class="section_threejs p-5 text-light">
  <div class="container text-center bg-primary" id="M3DDiv">
    <h3 class="display-3 w100" style="padding-top: 320px;"><span class="w500">Real 3D</span> with Webgl</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
<script type="module">

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

  //import { OrbitControls } from './jsm/controls/OrbitControls.js';
  import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
  import { RGBELoader } from './jsm/loaders/RGBELoader.js';
  import { RoughnessMipmapper } from './jsm/utils/RoughnessMipmapper.js';

  var controls;
  var camera, scene, renderer;



  var mouseX = 0, mouseY = 0;

  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;


  const container = document.getElementById('M3DDiv');
  let WIDTH = container.clientWidth;
  let HEIGHT = container.clientHeight;

  init();
  animate();

  function init() {

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

    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 3000 );
    camera.position.set( 1, 3, 3);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xdeebed );
    scene.add(camera);


    //LIGHT
    var light = new THREE.DirectionalLight(0xdfebff, 1);
    light.position.set(50,200,10);
    light.position.multiplyScalar( 1.3 );
    light.shadow.mapSize.width = 1024;
    light.shadow.mapSize.height = 1024;
    light.castShadow = true;
    scene.add( light );



    var light2 = new THREE.DirectionalLight( 0xffffff );
    light2.position.set(1,1,1);
    light2.castShadow = false;
    scene.add( light2 );



    var loader = new GLTFLoader().setPath( './' );
        loader.load( 'mountain.gltf', function ( gltf ) {

          gltf.scene.traverse( function ( child ) {

            if ( child.isMesh ) {

              child.castShadow = true;
              child.receiveShadow = true;
              child.rotation.y = Math.PI / 3;

              // TOFIX RoughnessMipmapper seems to be broken with WebGL 2.0
              // roughnessMipmapper.generateMipmaps( child.material );

            }

          } );

          scene.add( gltf.scene );

          //roughnessMipmapper.dispose();

          animate();

        } );




    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( WIDTH, HEIGHT );
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1;
    renderer.outputEncoding = THREE.sRGBEncoding;

    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
       
    container.appendChild( renderer.domElement );

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    window.addEventListener( 'resize', onWindowResize, false );

}

  function onWindowResize() {

    // windowHalfX = window.innerWidth / 2;
    // windowHalfY = window.innerHeight / 2;

    // camera.aspect = window.innerWidth / window.innerHeight;


    let WIDTH = container.clientWidth;
    let HEIGHT = container.clientHeight;
    camera.aspect = WIDTH / HEIGHT;


    camera.updateProjectionMatrix();

    renderer.setSize( WIDTH, HEIGHT );
    render();
  }

  function onDocumentMouseMove( event ) {

    mouseX = ( event.clientX - windowHalfX ) / 2000;
    mouseY = ( event.clientY - windowHalfY ) / 1500;

  }





  function animate() {

    requestAnimationFrame( animate );
    render();

  }

  function render() {

      camera.position.x += ( mouseX - camera.position.x ) * .05;
      camera.position.y += ( - mouseY - camera.position.y ) * .05 + 0.1;
      camera.position.z += (mouseX - camera.position.z ) * 0.5 + 3;


      camera.lookAt( scene.position );

      renderer.render( scene, camera );

}

</script>

gltf file – https://blog.naver.com/archyland/222104996717

Three.js – https://threejs.org/

episode – 01

Load 3D models using the Three.js gltf loader