<!DOCTYPE html>

<html lang="en">

<head>

<title>three.js webgl - loaders - Draco loader</title>

<style>

body {

font-family: Monospace;

background-color: #000;

color: #fff;

margin: 0px;

overflow: hidden;

}

</style>

</head>

<body>

<div id="page-wrapper">

<h1>Open a draco compressed file (.drc):</h1>

<div>

<input type="file" id="fileInput">

</div>

</div>

<div>

<pre id="decoderType"><pre>

</div>

<div>

<pre id="fileDisplayArea"><pre>

</div>

<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>

<script src="DRACOLoader.js"></script>

<script src="geometry_helper.js"></script>

<script>

'use strict';

// Configure decoder and create loader.

var dracoLoader = new THREE.DRACOLoader();

// It is recommended to always pull your Draco JavaScript and WASM decoders

// from this URL. Users will benefit from having the Draco decoder in cache

// as more sites start using the static URL.

dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.9/');

var camera, cameraTarget, scene, renderer;

function init() {

var container = document.createElement('div');

document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15);

camera.position.set(3, 0.15, 3);

cameraTarget = new THREE.Vector3(0, 0, 0);

scene = new THREE.Scene();

scene.fog = new THREE.Fog(0x72645b, 2, 15);

// Ground

var plane = new THREE.Mesh(

new THREE.PlaneBufferGeometry(40, 40),

new THREE.MeshPhongMaterial({color: 0x999999, specular: 0x101010}));

plane.rotation.x = -Math.PI/2;

plane.position.y = -0.5;

scene.add(plane);

plane.receiveShadow = true;

// Lights

scene.add(new THREE.HemisphereLight(0x443333, 0x111122));

addShadowedLight(1, 1, 1, 0xffffff, 1.35);

addShadowedLight(0.5, 1, -1, 0xffaa00, 1);

// renderer

renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setClearColor(scene.fog.color);

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

window.addEventListener('resize', onWindowResize, false);

}

function addShadowedLight(x, y, z, color, intensity) {

var directionalLight = new THREE.DirectionalLight(color, intensity);

directionalLight.position.set(x, y, z);

scene.add(directionalLight);

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

requestAnimationFrame(animate);

render();

}

function render() {

var timer = Date.now() * 0.0005;

camera.position.x = Math.sin(timer) * 2.5;

camera.position.z = Math.cos(timer) * 2.5;

camera.lookAt(cameraTarget);

renderer.render(scene, camera);

}

window.onload = function() {

var fileInput = document.getElementById('fileInput');

var fileDisplayArea = document.getElementById('fileDisplayArea');

fileInput.onclick = function() {

this.value = '';

}

fileInput.addEventListener('change', function(e) {

var file = fileInput.files[0];

var reader = new FileReader();

reader.onload = function(e) {

dracoLoader.decodeDracoFile(reader.result, function(bufferGeometry) {

if (dracoLoader.decode_time !== undefined) {

fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +

'Import time = ' + dracoLoader.import_time;

}

var material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});

var geometry;

// Point cloud does not have face indices.

if (bufferGeometry.index == null) {

geometry = new THREE.Points(bufferGeometry, material);

} else {

if (bufferGeometry.attributes.normal === undefined) {

var geometryHelper = new GeometryHelper();

geometryHelper.computeVertexNormals(bufferGeometry);

}

geometry = new THREE.Mesh(bufferGeometry, material);

}

// Compute range of the geometry coordinates for proper rendering.

bufferGeometry.computeBoundingBox();

var sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;

var sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;

var sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;

var diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);

var scale = 1.0 / diagonalSize;

var midX =

(bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;

var midY =

(bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;

var midZ =

(bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2;

geometry.scale.multiplyScalar(scale);

geometry.position.x = -midX * scale;

geometry.position.y = -midY * scale;

geometry.position.z = -midZ * scale;

geometry.castShadow = true;

geometry.receiveShadow = true;

var selectedObject = scene.getObjectByName("my_mesh");

scene.remove(selectedObject);

geometry.name = "my_mesh";

scene.add(geometry);

});

}

reader.readAsArrayBuffer(file);

});

init();

animate();

}

</script>

</body>

</html>