Three.js and webgl – cube reflection Try 3D on the Internet

1

At the end of the week I have some fantastic 3D animations for you. The animated 3D car illustrations are from the sample collection of three.js . With the JavaScript library three.js you can create animated representations in 3D in the browser. three.js creates a spatial impression using the anaglyph image technique.

My regular readers can still remember the 3D teapot on a bridge?

navigation Help

Rotate 3D model: Press the left mouse button and move the mouse
Zoom In / Zoom Out: Turn the mouse wheel
Move: hold down the middle mouse button and move the mouse

The examples can be displayed in a new browser window.
https://blog.r23.de/3d/loader/cubemap.html

On the bridge today we turn the cars in the air: Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 and Chevrolet Camaro. In the 3D animations, we can change the paint with a click. Bugatti Veyron was created by Troyano , Lamborghini Gallardo was made by machman_3d , Ferrari F50 was made by daniel sathya and Chevrolet Camaro was created by dskfnwn .

Before we take a look at the 3D animation, we’ll have some physics.

The one-body problem

Imagine a universe that is completely empty except for a single celestial body (mass), such as a star or planet. In such a universe, the following one-body problem arises:

From an initial position and velocity for mass, how can you predict the mass’s motion as a function of time?

The answer, as you may know, is simple:

  • When the speed v of the mass is 0 , the mass never moves (no movement).
  • If the velocity v of the mass is not 0 , the mass moves at a constant velocity and direction corresponding to v .

Although there is no interesting dynamics in the one-body problem, it does offer the opportunity to set up a Three.js “universe.”

 

The example can be displayed in a new browser window.
https://blog.r23.de/r23webvr/three.js-r86/examples/webgl_materials_cars.html

code

The source code for the 3D surface models is available.

 

<style>
         body {<br />            background:#000;<br />           color:#fff;<br />          padding:0;<br />           margin:0;<br />            overflow:hidden;<br />           font-family:georgia;<br />          text-align:center;<br />         }<br />        h1 { }<br />         a { color:skyblue; text-decoration:none }<br />       canvas { pointer-events:none; z-index:10; position:relative; }</p>
<p>         #d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }</p>
<p>         .bwrap { margin:0.5em 0 0 0 }<br />       button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }<br />         button:hover { background:#333 }<br />       #buttons_cars button { color:#fa0 }</p>
<p>         #car_info { text-align:center; }<br />       #car_name { font-size:1em }<br />         #car_author { font-size:1em }</p>
<p>         #oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }<br />      </style>

&nbsp;

&nbsp;
<div id="d">
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl demo :
texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a> :
<span id="car_info">
<span id="car_name">Bugatti Veyron model</span>
by <span id="car_author"><a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a></span>
</span></div>
<div id="buttons_cars" class="bwrap"><button id="veyron">Bugatti Veyron</button>
<button id="gallardo">Lamborghini Gallardo</button>
<button id="f50">Ferrari F50</button>
<button id="camaro">Chevrolet Camaro</button></div>
<div id="buttons_materials" class="bwrap"></div>
</div>
<script src="../build/three.js"></script>

<script src="js/loaders/BinaryLoader.js"></script>

<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

<script>
 
         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
         var STATS_ENABLED = false;
 
         var CARS = {
 
            "veyron":   {
 
               name: "Bugatti Veyron",
               url:  "obj/veyron/VeyronNoUv_bin.js",
               author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a>',
               init_rotation: [ 0, 0, 0 ],
               scale: 5.5,
               init_material: 4,
               body_materials: [ 2 ],
 
               object: null,
               buttons: null,
               materials: null
 
            },
 
            "gallardo": {
 
               name:    "Lamborghini Gallardo",
               url:  "obj/gallardo/GallardoNoUv_bin.js",
               author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank" rel="noopener">machman_3d</a>',
               init_rotation: [ 0, 0, 0 ],
               scale: 3.7,
               init_material: 9,
               body_materials: [ 3 ],
 
               object:  null,
               buttons: null,
               materials: null
 
            },
 
            "f50": {
 
               name:    "Ferrari F50",
               url:  "obj/f50/F50NoUv_bin.js",
               author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1687" target="_blank" rel="noopener">daniel sathya</a>',
               init_rotation: [ 0, 0, 0 ],
               scale: 0.175,
               init_material: 2,
               body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ],
 
               object:  null,
               buttons: null,
               materials: null
 
            },
 
            "camaro": {
 
               name:    "Chevrolet Camaro",
               url:  "obj/camaro/CamaroNoUv_bin.js",
               author: '<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank" rel="noopener">dskfnwn</a>',
               init_rotation: [ 0.0, 0.0, 0.0 /*0, 1, 0*/ ],
               scale: 75,
               init_material: 0,
               body_materials: [ 0 ],
 
               object:  null,
               buttons: null,
               materials: null
 
            }
 
         };
 
 
         var container, stats;
 
         var camera, scene, renderer;
 
         var m, mi;
 
         var directionalLight, pointLight;
 
         var mouseX = 0, mouseY = 0;
 
         var windowHalfX = window.innerWidth / 2;
         var windowHalfY = window.innerHeight / 2;
 
         var loader = new THREE.BinaryLoader();
 
         init();
         animate();
 
         function init() {
 
            container = document.createElement( 'div' );
            document.body.appendChild( container );
 
            // CAMERAS
 
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
            // SCENE
 
            var textureCube = new THREE.CubeTextureLoader()
               .setPath( 'textures/cube/Bridge2/')
               .load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
 
            scene = new THREE.Scene();
            scene.background = textureCube;
 
            // LIGHTS
 
            var ambient = new THREE.AmbientLight( 0x050505 );
            scene.add( ambient );
 
            directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
            directionalLight.position.set( 2, 1.2, 10 ).normalize();
            scene.add( directionalLight );
 
            directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
            directionalLight.position.set( -2, 1.2, -10 ).normalize();
            scene.add( directionalLight );
 
            pointLight = new THREE.PointLight( 0xffaa00, 2 );
            pointLight.position.set( 2000, 1200, 10000 );
            scene.add( pointLight );
 
            //
 
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setFaceCulling( THREE.CullFaceNone );
 
            container.appendChild( renderer.domElement );
 
            if ( STATS_ENABLED ) {
 
               stats = new Stats();
               container.appendChild( stats.dom );
 
            }
 
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
            // common materials
 
            var mlib = {
 
            "Orange":   new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
            "Blue":  new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
            "Red":      new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
            "Black":    new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ),
            "White": new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
            "Carmine":  new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ),
            "Gold":  new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ),
            "Bronze":   new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
            "Chrome":   new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
            "Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MultiplyOperation } ),
            "Blue metal":  new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MultiplyOperation } ),
            "Red metal":   new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ),
            "Green metal":    new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ),
            "Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
            "Pure chrome":    new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
            "Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
            "Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ),
 
            "Black glass":    new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ),
            "Dark glass":  new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ),
            "Blue glass":  new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ),
            "Light glass": new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
            "Red glass":   new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ),
            "Yellow glass":   new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ),
            "Orange glass":   new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ),
 
            "Orange glass 50":   new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
            "Red glass 50":   new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),
 
            "Fullblack rough":   new THREE.MeshLambertMaterial( { color: 0x000000 } ),
            "Black rough":    new THREE.MeshLambertMaterial( { color: 0x050505 } ),
            "Darkgray rough": new THREE.MeshLambertMaterial( { color: 0x090909 } ),
            "Red rough":      new THREE.MeshLambertMaterial( { color: 0x330500 } ),
 
            "Darkgray shiny": new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ),
            "Gray shiny":     new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } )
 
            };
 
            // Gallardo materials
 
            CARS[ "gallardo" ].materials = {
 
               body: [
 
                  [ "Orange",    mlib[ "Orange" ] ],
                  [ "Blue",      mlib[ "Blue" ] ],
                  [ "Red",       mlib[ "Red" ] ],
                  [ "Black",     mlib[ "Black" ] ],
                  [ "White",     mlib[ "White" ] ],
 
                  [ "Orange metal",    mlib[ "Orange metal" ] ],
                  [ "Blue metal",   mlib[ "Blue metal" ] ],
                  [ "Green metal",  mlib[ "Green metal" ] ],
                  [ "Black metal",  mlib[ "Black metal" ] ],
 
                  [ "Carmine",   mlib[ "Carmine" ] ],
                  [ "Gold",      mlib[ "Gold" ] ],
                  [ "Bronze",    mlib[ "Bronze" ] ],
                  [ "Chrome",    mlib[ "Chrome" ] ]
 
               ]
 
            };
 
            m = CARS[ "gallardo" ].materials;
            mi = CARS[ "gallardo" ].init_material;
 
            CARS[ "gallardo" ].mmap = {
 
               0: mlib[ "Pure chrome" ],  // wheels chrome
               1: mlib[ "Black rough" ],   // tire
               2: mlib[ "Black glass" ],  // windshield
               3: m.body[ mi ][ 1 ],      // body
               4: mlib[ "Red glass" ],       // back lights
               5: mlib[ "Yellow glass" ],  // front lights
               6: mlib[ "Dark chrome" ]   // windshield rim
 
            };
 
            // Veyron materials
 
            CARS[ "veyron" ].materials = {
 
               body: [
 
                  [ "Orange metal",    mlib[ "Orange metal" ] ],
                  [ "Blue metal",   mlib[ "Blue metal" ] ],
                  [ "Red metal",       mlib[ "Red metal" ] ],
                  [ "Green metal",  mlib[ "Green metal" ] ],
                  [ "Black metal",  mlib[ "Black metal" ] ],
 
                  [ "Gold",      mlib[ "Gold" ] ],
                  [ "Bronze",    mlib[ "Bronze" ] ],
                  [ "Chrome",    mlib[ "Chrome" ] ]
 
               ]
 
            };
 
            m = CARS[ "veyron" ].materials;
            mi = CARS[ "veyron" ].init_material;
 
            CARS[ "veyron" ].mmap = {
 
               0: mlib[ "Black rough" ],     // tires + inside
               1: mlib[ "Pure chrome" ],     // wheels + extras chrome
               2: m.body[ mi ][ 1 ],         // back / top / front torso
               3: mlib[ "Dark glass" ],      // glass
               4: mlib[ "Pure chrome" ],     // sides torso
               5: mlib[ "Pure chrome" ],     // engine
               6: mlib[ "Red glass 50" ],    // backlights
               7: mlib[ "Orange glass 50" ]  // backsignals
 
            };
 
            // F50 materials
 
            CARS[ "f50" ].materials = {
 
               body: [
 
                  [ "Orange",    mlib[ "Orange" ] ],
                  [ "Blue",      mlib[ "Blue" ] ],
                  [ "Red",       mlib[ "Red" ] ],
                  [ "Black",     mlib[ "Black" ] ],
                  [ "White",     mlib[ "White" ] ],
 
                  [ "Orange metal",    mlib[ "Orange metal" ] ],
                  [ "Blue metal",   mlib[ "Blue metal" ] ],
                  [ "Black metal",  mlib[ "Black metal" ] ],
 
                  [ "Carmine",   mlib[ "Carmine" ] ],
                  [ "Gold",      mlib[ "Gold" ] ],
                  [ "Bronze",    mlib[ "Bronze" ] ],
                  [ "Chrome",    mlib[ "Chrome" ] ]
 
               ]
 
            };
 
            m = CARS[ "f50" ].materials;
            mi = CARS[ "f50" ].init_material;
 
            CARS[ "f50" ].mmap = {
 
               0:  mlib[ "Dark chrome" ],       // interior + rim
               1:  mlib[ "Pure chrome" ],       // wheels + gears chrome
               2:  mlib[ "Blue glass" ],     // glass
               3:  m.body[ mi ][ 1 ],        // torso mid + front spoiler
               4:  mlib[ "Darkgray shiny" ],    // interior + behind seats
               5:  mlib[ "Darkgray shiny" ],    // tiny dots in interior
               6:  m.body[ mi ][ 1 ],        // back torso
               7:  m.body[ mi ][ 1 ],        // right mirror decal
               8:  m.body[ mi ][ 1 ],        // front decal
               9:  m.body[ mi ][ 1 ],        // front torso
               10: m.body[ mi ][ 1 ],        // left mirror decal
               11: mlib[ "Pure chrome" ],       // engine
               12: mlib[ "Darkgray rough" ], // tires side
               13: mlib[ "Darkgray rough" ], // tires bottom
               14: mlib[ "Darkgray shiny" ],    // bottom
               15: mlib[ "Black rough" ],    // ???
               16: mlib[ "Orange glass" ],      // front signals
               17: mlib[ "Dark chrome" ],       // wheels center
               18: mlib[ "Red glass" ],      // back lights
               19: mlib[ "Black rough" ],       // ???
               20: mlib[ "Red rough" ],      // seats
               21: mlib[ "Black rough" ],       // back plate
               22: mlib[ "Black rough" ],       // front light dots
               23: m.body[ mi ][ 1 ],        // back torso
               24: m.body[ mi ][ 1 ]         // back torso center
 
            };
 
 
            // Camero materials
 
            CARS[ "camaro" ].materials = {
 
               body: [
 
                  [ "Orange",    mlib[ "Orange" ] ],
                  [ "Blue",      mlib[ "Blue" ] ],
                  [ "Red",       mlib[ "Red" ] ],
                  [ "Black",     mlib[ "Black" ] ],
                  [ "White",     mlib[ "White" ] ],
 
                  [ "Orange metal",    mlib[ "Orange metal" ] ],
                  [ "Blue metal",   mlib[ "Blue metal" ] ],
                  [ "Red metal",       mlib[ "Red metal" ] ],
                  [ "Green metal",  mlib[ "Green metal" ] ],
                  [ "Black metal",  mlib[ "Black metal" ] ],
 
                  [ "Gold",      mlib[ "Gold" ] ],
                  [ "Bronze",    mlib[ "Bronze" ] ],
                  [ "Chrome",    mlib[ "Chrome" ] ]
 
               ]
 
            };
 
            m = CARS[ "camaro" ].materials;
            mi = CARS[ "camaro" ].init_material;
 
            CARS[ "camaro" ].mmap = {
 
               0: m.body[ mi ][ 1 ],         // car body
               1: mlib[ "Pure chrome" ],     // wheels chrome
               2: mlib[ "Pure chrome" ],     // grille chrome
               3: mlib[ "Dark chrome" ],     // door lines
               4: mlib[ "Light glass" ],     // windshield
               5: mlib[ "Gray shiny" ],        // interior
               6: mlib[ "Black rough" ],       // tire
               7: mlib[ "Fullblack rough" ],   // tireling
               8: mlib[ "Fullblack rough" ]    // behind grille
 
            };
 
            loader.load( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) } );
 
            for( var c in CARS ) initCarButton( c );
 
            //
 
            window.addEventListener( 'resize', onWindowResize, false );
 
         }
 
         function onWindowResize() {
 
            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;
 
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
 
            renderer.setSize( window.innerWidth, window.innerHeight );
 
         }
 
         function initCarButton( car ) {
 
            $( car ).addEventListener( 'click', function() {
 
               if ( ! CARS[ car ].object ) {
 
                  loader.load( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) } );
 
               } else {
 
                  switchCar( car );
 
               }
 
            }, false );
 
         }
 
         function $( id ) { return document.getElementById( id ) }
         function button_name( car, index ) { return "m_" + car  + "_" + index }
 
         function switchCar( car ) {
 
            for ( var c in CARS ) {
 
               if ( c != car && CARS[ c ].object ) {
 
                  CARS[ c ].object.visible = false;
                  CARS[ c ].buttons.style.display = "none";
 
               }
            }
 
            CARS[ car ].object.visible = true;
            CARS[ car ].buttons.style.display = "block";
 
            $( "car_name" ).innerHTML = CARS[ car ].name + " model";
            $( "car_author" ).innerHTML = CARS[ car ].author;
 
         }
 
         function createButtons( materials, car ) {
 
            var buttons, i, src = "";
 
            for( i = 0; i < materials.length; i ++ ) {
 
               src += '<button id="' + button_name( car, i ) + '">' + materials[ i ][ 0 ] + '</button> ';
 
            }
 
            buttons = document.createElement( "div" );
            buttons.innerHTML = src;
 
            $( "buttons_materials" ).appendChild( buttons );
 
            return buttons;
 
         }
 
         function attachButtonMaterials( materials, faceMaterials, material_indices, car ) {
 
            for( var i = 0; i < materials.length; i ++ ) {
 
               $( button_name( car, i ) ).counter = i;
               $( button_name( car, i ) ).addEventListener( 'click', function() {
 
                  for ( var j = 0; j < material_indices.length; j ++ ) {
 
                     faceMaterials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
 
                  }
 
               }, false );
 
            }
 
         }
 
         function createScene( geometry, car ) {
 
            geometry.sortFacesByMaterialIndex();
 
            var m = [],
               s = CARS[ car ].scale * 1,
               r = CARS[ car ].init_rotation,
               materials = CARS[ car ].materials,
               mi = CARS[ car ].init_material,
               bm = CARS[ car ].body_materials;
 
            for ( var i in CARS[ car ].mmap ) {
 
               m[ i ] = CARS[ car ].mmap[ i ];
 
            }
 
            var mesh = new THREE.Mesh( geometry, m );
 
            mesh.rotation.x = r[ 0 ];
            mesh.rotation.y = r[ 1 ];
            mesh.rotation.z = r[ 2 ];
 
            mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 
            scene.add( mesh );
 
            CARS[ car ].object = mesh;
 
            CARS[ car ].buttons = createButtons( materials.body, car );
            attachButtonMaterials( materials.body, m, bm, car );
 
            switchCar( car );
 
         }
 
         function onDocumentMouseMove(event) {
 
            mouseY = ( event.clientY - window.innerHeight );
 
         }
 
         //
 
         function animate() {
 
            requestAnimationFrame( animate );
 
            render();
 
         }
 
         function render() {
 
            var timer = -0.0002 * Date.now();
 
            camera.position.x = 1000 * Math.cos( timer );
            camera.position.y += ( - mouseY - camera.position.y ) * .05;
            camera.position.z = 1000 * Math.sin( timer );
 
            camera.lookAt( scene.position );
 
            renderer.render( scene, camera );
 
            if ( STATS_ENABLED ) stats.update();
 
         }
 
      </script>

&nbsp;

 

Source: https://blog.r23.de/3d-im-internet-three-js-webgl/

Share This:

1 Comment

  1. Pingback: Three.js and webgl – materials – cube reflection Try 3D on the Internet - Coding Videos

Leave A Reply

Powered by FrontNet