Casco van de auto

het casco van de auto

 

 

wireframe

wireframe van de auto

  

 

material preview, linker voorwiel is gemaakt, de overige wielen zijn gespiegeld

material preview,
linker voorwiel is gemaakt,
de overige wielen zijn ,mbv Apply modifiers, gespiegeld

  

 

de auto klaar voor de export

de auto klaar voor de export

  

onderdelen lijst

onderdelen lijst

 

de export afdeling met Apply Modifiers aangevinkt

de export afdeling met Apply Modifiers aangevinkt

Low poly car als glTF bestand  in Three.js.                       terug naar de inleiding

De low poly car is in Blender versie 2.91.2 gemaakt mbv de youtube tutorial van Hans  
In Blender kan je de 3D creatie oa exporteren als glTF bestand en vervolgens mbv de GLTFLoader weer importer in een Three.js schets
De GLTFLoader werkt alleen als module.  De loader en de overige scripts moeten daarom van het type "module" zijn (regel 13 t/m 15).
De scripts zitten muv het three.js script in de map jsm (java script module). De schets moet dan in de body ook tussen deze <script>..</script> tags staan
In de functie createAuto wordt de auto geladen (regel 61 t/m 63). De auto wordt met 5 directionalLight lampjes beschenen (regel 55 t/m 759)
De scene draait in x en y richting (regel 83 en 84) omdat ik ook de onderkant wil laten zien.

 

 
 <html>
  <head>
    <title>glTF auto</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./styles/main.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8" />
  </head>
 
  <body>
    <div id="scene-container"</div>
 
    <script type="module">
    import * as THREE from './build/three.module.js';
    import {GLTFLoader} from './examples/jsm/loaders/GLTFLoader.js';
 
    let container, scene, camera, ambient;
    let renderer, controls, loader, bgTexture, directionalLight;
 
    init();
    play();
 
    function init() {
       createScenecontainer();
       createBackground();
       createCamera();
       createDirectionalLight();
       createAuto();         //uitschakelen dan zie je alleen de omgeving
       createRenderer();
    }
 
    function createScenecontainer(){
      container = document.querySelector( '#scene-container' );
      scene = new THREE.Scene();
    }
 
    function createBackground() {
       //scene.background = new THREE.Color( 0xE6FBFF );
       loader = new THREE.TextureLoader();
       bgTexture = loader.load('./textures/cloud.jpg');
       scene.background = bgTexture;
     }
 
    function createCamera(){
      camera = new THREE.PerspectiveCamera( 70, container.clientWidth / container.clientHeight, 1, 1000 );
      camera.position.set( 0, 0, 5 );
    }
 
     function createDirectionalLight(x,y,z){
       directionalLight = new THREE.DirectionalLight(0xffffff, 1);
       directionalLight.position.set(x,y,z);
       scene.add(directionalLight);
  }
   //met vijf lichtpuntjes
     createDirectionalLight(0, 3,-2);  //bovenlamp
     createDirectionalLight(3, 2, 0);  //rechterlamp
     createDirectionalLight(0,-2, 2);  //onderlamp
     createDirectionalLight(-2, 2, 2); //linkerlamp
     createDirectionalLight(0, 0, 5);  //voorlicht
 
     function createAuto(){
       const loader = new GLTFLoader();
       loader.load('./textures/gltf/auto4.gltf', function (gltf) { scene.add(gltf.scene); });
    }
 
     function createRenderer(){
       renderer = new THREE.WebGLRenderer();
       renderer.setPixelRatio( window.devicePixelRatio );
       renderer.setSize( container.clientWidth, container.clientHeight );
       document.body.appendChild( renderer.domElement );
       renderer.outputEncoding = THREE.sRGBEncoding;
       window.addEventListener( 'resize', onWindowResize );
     }
 
     function onWindowResize() {
       camera.aspect = container.clientWidth / container.clientHeight;
       camera.updateProjectionMatrix();
       renderer.setSize( container.clientWidth, container.clientHeight );
     }
 
     function animate() {
       renderer.render( scene, camera );
       scene.rotation.y += 0.02;
       scene.rotation.x += 0.01;
     }
 
     function play() {
       renderer.setAnimationLoop( () => {animate()} );
     }
 
   </script>
  </body>
</html>