mirror of
https://git.mirrors.martin98.com/https://github.com/google/draco
synced 2025-04-21 05:09:52 +08:00
db5e679828
- output to console - needs to be explicitly enabled by settings a non-zero verbosity level
190 lines
6.7 KiB
HTML
190 lines
6.7 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';
|
|
|
|
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();
|
|
// Enable logging to console output.
|
|
dracoLoader.setVerbosity(1);
|
|
const bufferGeometry = dracoLoader.decodeDracoFile(reader.result);
|
|
if (dracoLoader.decode_time !== undefined) {
|
|
fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +
|
|
'Import time = ' + dracoLoader.import_time;
|
|
}
|
|
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>
|