3D and AR Rendering

Written By Miguel Garcia Gonzalez

3D with Three.js

Move globe around to view in 3D.

The most engaging websites, I have found, are those with interactive yet unobtrusive content. One such method is through 3D models rendered right on the webpage.

With Three.js API, I spent a few weeks brushing on JavaScript, HTML, and CSS to implement a 3D model on a webpage that renders seamlessly regardless of the device hardware or software. The open source model itself was pulled from Google Poly.

In supply chain, the applications of 3D models are endless. For example, imagine a more detailed, satellite-imaged globe showing major airport and seaport trade routes. Check back soon for that update…

 

AR with ARKit

Tap on globe to view in AR. iOS device required.

I am a firm believer that augmented reality (AR) will be one of the most game-changing technology for the next generation. The applications in every sector, from healthcare to education, are endless.

Specific to supply chain, imagine how AR could be used to project a live warehouse floor on a table or explode a product at the component level right in front of your eyes. How cool would that be?

In this demo, I imported a simple factory model using ARKit. The purpose of ARKit is show the model in the real-world. For those without the required hardware and software, below are some images of what this looks like to the end user.

 
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="stylesheet.css">
        <title>glTF Loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    </head>

  <body>
    <script src="js/three.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/WebGL.js"></script>

        <section id="loading-screen">

            <div class="gooey">
                <span class="dot"></span>
                <div class="dots">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

        </section>

    <script>

            if ( WEBGL.isWebGLAvailable() === false ) {
                document.body.appendChild( WEBGL.getWebGLErrorMessage() );
            }

            var container, controls;
            var camera, scene, renderer, object;
            var box, center, size, maxAxis;

            init();
            animate();

            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );
                scene = new THREE.Scene();
                const loadingManager = new THREE.LoadingManager( () => {

                    const loadingScreen = document.getElementById( 'loading-screen' );
                    loadingScreen.classList.add( 'fade-out' );
                    loadingScreen.addEventListener( 'transitionend', onTransitionEnd );
                } );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 1000 );
                camera.position.set( 0, 8, 20 ); // x, y, z

                controls = new THREE.OrbitControls( camera, container );
                controls.target.set( 0, - 0.2, - 0.2 );
                controls.update();

                var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
                light.position.set( 0, - 100, - 25 );
                scene.add( light );

                light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( - 50, -100, - 25 );
                scene.add( light );

                var loader = new THREE.GLTFLoader( loadingManager );
                loader.load( 'model/supplychain/Factory_1266.gltf', function ( gltf ) {

                    object = gltf.scene;
                  
                    var box = new THREE.Box3().setFromObject(object);
                    var center = box.getCenter(new THREE.Vector3());
                    var size = box.getSize(new THREE.Vector3());
                    var maxAxis = Math.max(size.x, size.y, size.z);

                    object.scale.multiplyScalar(15.0 / maxAxis);
                    box.setFromObject(object);
                    box.getCenter(center);
                    box.getSize(size);
                    object.position.copy(center).multiplyScalar(-1);

          scene.add( object );
                  
                } );

                renderer = new THREE.WebGLRenderer( { antialias: true }, { alpha: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.setClearColor( 0xFFFFFF, 1 );
                renderer.gammaOutput = true;
                renderer.gammaFactor = 2.2;
                container.appendChild( renderer.domElement );
                window.addEventListener( 'resize', onWindowResize, false );
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

            function animate() {

        if (object) {
            object.rotation.y += 0.005;
        }
                requestAnimationFrame( animate );
                renderer.render( scene, camera );
            }

            function onTransitionEnd( event ) {
                const element = event.target;
                element.remove();
        }

        </script>

  </body>
</html>
Miguel Garcia Gonzalez https://www.augmenos.com
Previous

BOM Visualization
Next

Interactive Publications