mirror of
https://git.mirrors.martin98.com/https://github.com/google/draco
synced 2025-04-21 05:09:52 +08:00
171 lines
6.2 KiB
HTML
171 lines
6.2 KiB
HTML
<!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.4.1/');
|
|
|
|
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>
|