mirror of
https://git.mirrors.martin98.com/https://github.com/google/draco
synced 2025-04-21 13:19:57 +08:00
3682ca2801
1. Add 'use strict'to example Javascript. 2. Small fixes to README.md. 3. Fix Draco compiler flag tests. 4. Fixed issue when number of quantized bits was to large. 5. Changed StartDecoding to return a value. 6. Check that num of attributes are not less than 0. 7. Check that the number of attributes is a valid value.
187 lines
6.5 KiB
HTML
187 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>three.js webgl - loaders - Draco loader</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
body {
|
|
font-family: Monospace;
|
|
background-color: #000;
|
|
color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
#info {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 100;
|
|
display: block;
|
|
}
|
|
#info a,
|
|
.button {
|
|
color: #f00;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
cursor: pointer
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page-wrapper">
|
|
|
|
<h1>Open a draco compressed file (.drc):</h1>
|
|
<div>
|
|
<input type="file" id="fileInput">
|
|
</div>
|
|
<pre id="fileDisplayArea"><pre>
|
|
</div>
|
|
<script src="three.js"></script>
|
|
<script src="draco_decoder.js"></script>
|
|
<script src="DRACOLoader.js"></script>
|
|
<script>
|
|
'use strict';
|
|
|
|
// Module that exposes all the core funcionality of the Draco decoder.
|
|
const DracoModule = Module;
|
|
|
|
let container;
|
|
let camera, cameraTarget, scene, renderer;
|
|
let mouseX = 0, mouseY = 0;
|
|
|
|
let windowHalfX = window.innerWidth / 2;
|
|
let windowHalfY = window.innerHeight / 2;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
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
|
|
const 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);
|
|
renderer.gammaInput = true;
|
|
renderer.gammaOutput = true;
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.renderReverseSided = false;
|
|
container.appendChild(renderer.domElement);
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
}
|
|
|
|
function addShadowedLight(x, y, z, color, intensity) {
|
|
const directionalLight = new THREE.DirectionalLight(color, intensity);
|
|
directionalLight.position.set(x, y, z);
|
|
scene.add(directionalLight);
|
|
|
|
const d = 1;
|
|
directionalLight.shadow.camera.left = -d;
|
|
directionalLight.shadow.camera.right = d;
|
|
directionalLight.shadow.camera.top = d;
|
|
directionalLight.shadow.camera.bottom = -d;
|
|
directionalLight.shadow.camera.near = 1;
|
|
directionalLight.shadow.camera.far = 4;
|
|
directionalLight.shadow.mapSize.width = 1024;
|
|
directionalLight.shadow.mapSize.height = 1024;
|
|
directionalLight.shadow.bias = -0.005;
|
|
}
|
|
|
|
function onWindowResize() {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
render();
|
|
}
|
|
|
|
function render() {
|
|
const 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() {
|
|
const fileInput = document.getElementById('fileInput');
|
|
const fileDisplayArea = document.getElementById('fileDisplayArea');
|
|
|
|
fileInput.addEventListener('change', function(e) {
|
|
const file = fileInput.files[0];
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const dracoLoader = new THREE.DRACOLoader();
|
|
const bufferGeometry = dracoLoader.decodeDracoFile(reader.result);
|
|
const material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});
|
|
|
|
let geometry;
|
|
// Point cloud does not have face indices.
|
|
if (bufferGeometry.index == null) {
|
|
geometry = new THREE.Points(bufferGeometry, material);
|
|
} else {
|
|
bufferGeometry.computeVertexNormals();
|
|
geometry = new THREE.Mesh(bufferGeometry, material);
|
|
}
|
|
// Compute range of the geometry coordinates for proper rendering.
|
|
bufferGeometry.computeBoundingBox();
|
|
const sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;
|
|
const sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;
|
|
const sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;
|
|
const diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);
|
|
const scale = 1.0 / diagonalSize;
|
|
const midX = (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;
|
|
const midY = (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;
|
|
const 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;
|
|
|
|
const selectedObject = scene.getObjectByName("my_mesh");
|
|
scene.remove(selectedObject);
|
|
geometry.name = "my_mesh";
|
|
scene.add(geometry);
|
|
}
|
|
reader.readAsArrayBuffer(file);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|