three.js

by kthornbloom

HTML

<div class="product-viewer">
			<div id="product-viewer--canvas"></div>
		</div>

CSS

body {
    background: #262B35;
}

.product-viewer {
    margin: 0 auto;
    position: relative;
    font-family: sans-serif;
    width: 500px;
}

#product-viewer--canvas {
    cursor: move;
    display: block;
    background: #222;
    padding-top:100%;
}

#product-viewer--canvas:after {
    content: '';
    background: radial-gradient(rgba(0,0,0,0), rgba(0,0,15,.2));
    pointer-events: none;
    position: absolute;
    height: 100%;
    left: 0;
    width: 100%;
    top: 0;
}

#product-viewer--canvas canvas {
    position: absolute;
    height: 100%;
    left: 0;
    width: 100%;
    top: 0;
}

JavaScript

// Scene Setup
			var scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xefefef );
			
            // Renderer
			var renderer = new THREE.WebGLRenderer({ antialias: true });
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.shadowMap.enabled = true;
			renderer.shadowMap.type = THREE.PCFSoftShadowMap;
			renderer.gammaFactor = 2.2;
			renderer.gammaInput = true;
			renderer.gammaOutput = true;

			var container = document.getElementById('product-viewer--canvas');
			var w = container.offsetWidth;
			var h = container.offsetHeight;
			renderer.setSize(w, h);
			container.appendChild(renderer.domElement);

			// Camera
			var camera = new THREE.PerspectiveCamera( 75, w/h, 0.1, 1000 );
			camera.position.z = 8;

			// Ambient Light
			var light = new THREE.AmbientLight( 0xcccccc ); // soft white light
			scene.add( light );

            // Directional Light
			var light = new THREE.DirectionalLight( 0xffffff, 1 );
			light.position.set( 2, 8, -2 );
			light.castShadow = true;
			light.shadow.radius = 3;
			scene.add( light );

			/* Uncomment to show light limits
			const cameraHelper = new THREE.CameraHelper(light.shadow.camera);
			scene.add(cameraHelper);*/

			light.shadow.mapSize.width = 1000;
			light.shadow.mapSize.height = 1000;
			light.shadow.camera.near = 0.5;
			light.shadow.camera.far = 100;
			
			var tex = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			tex.flipY = false; // for glTF models.

            // 3D Model   https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cars.html
            var loader = new THREE.GLTFLoader();
            loader.load( 'https://www.kthornbloom.com/demo.glb', function ( gltf ) {
				gltf.scene.position.set( 0, .05, 0 );
				gltf.scene.traverse( function( node ) {
					console.log(node);
					node.material.emissive = new THREE.Color( 0x00ffff );
					//if ( node instanceof THREE.Mesh ) { node.castShadow = true; }
					/*
					if (node.name...