three.js - tissot

by mmalex

HTML

<script src="http://mbnsay.com/rayys/watches/js/three.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/OrbitControls.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/CopyShader.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/FXAAShader.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/EffectComposer.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/RenderPass.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/ShaderPass.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/OutlinePass.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/inflate.min.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/FBXLoader.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/RGBELoader.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/HDRCubeTextureLoader.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/Detector.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/stats.min.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/PMREMGenerator.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/PMREMCubeUVPacker.js"></script>
<script src="http://mbnsay.com/rayys/watches/js/dat.gui.min.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

if (!Detector.webgl) Detector.addGetWebGLMessage();

			var isMobile = (navigator.userAgent.match(/Android/i) ||
			    navigator.userAgent.match(/webOS/i) ||
			    navigator.userAgent.match(/iPhone/i) ||
			    navigator.userAgent.match(/iPad/i) ||
			    navigator.userAgent.match(/iPod/i) ||
			    navigator.userAgent.match(/BlackBerry/i) ||
			    navigator.userAgent.match(/Windows Phone/i)
			);

			var container, stats;

			var camera, scene, renderer, controls, objects = [];
			var whiteMaterial, blackMaterial, standardMaterial, crystalMaterial, leatherMaterial, floorMaterial;
			var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;

			// experiment
			var composer, dpr, effectFXAA, renderScene;

			init();
			animate();

			function init() {

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

			    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 5, 550);
			    camera.position.set(220, 5, 1);

			    scene = new THREE.Scene();
			    scene.background = new THREE.Color(0xf9f9f9);

			    var ambient = new THREE.AmbientLight(0x101010);
			    scene.add(ambient);

			    var hemi = new THREE.HemisphereLight(0xffffff, 0x080880, 0.25);
			    scene.add(hemi);

			    var omni1 = new THREE.PointLight(0x90c9ff, 0.45, 100);
			    omni1.position.set(-10, 15, 20);
			    scene.add(omni1);

			    var omni2 = new THREE.PointLight(0xffc990, 0.45, 100);
			    omni2.position.set(20, 15, -10);
			    scene.add(omni2);

			    renderer = new THREE.WebGLRenderer();
			    renderer.toneMapping = THREE.LinearToneMapping;
			    renderer.toneMappingExposure = 1.20;
          renderer.setPixelRatio(window.devicePixelRatio);

			    var diffuse; // = new THREE.TextureLoader().load( 'assets/patrimony_gold_brown_d.jpg' );
			    var bump; // = new THREE.TextureLoader().load( 'assets/patrimony_gold_brown_b.jpg' );

			    var faceBackgroundMaterial = new...