<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D 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">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> -
<a href="https://github.com/google/draco" target="_blank" rel="noopener">DRACO</a> loader
</div>
<script type="module">
import * as v3d from '../build/v3d.module.js';
import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
let camera, scene, renderer;
const container = document.querySelector('#container');
// Configure and create Draco decoder.
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('js/libs/draco/');
dracoLoader.setDecoderConfig({ type: 'js' });
init();
animate();
function init() {
camera = new v3d.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 15);
camera.position.set(3, 0.25, 3);
scene = new v3d.Scene();
scene.background = new v3d.Color(0x443333);
scene.fog = new v3d.Fog(0x443333, 1, 4);
// Ground
const plane = new v3d.Mesh(
new v3d.PlaneBufferGeometry(8, 8),
new v3d.MeshPhongMaterial({ color: 0x999999, specular: 0x101010 })
);
plane.rotation.x = - Math.PI / 2;
plane.position.y = 0.03;
plane.receiveShadow = true;
scene.add(plane);
// Lights
const hemiLight = new v3d.HemisphereLight(0x443333, 0x111122);
scene.add(hemiLight);
const spotLight = new v3d.SpotLight();
spotLight.angle = Math.PI / 16;
spotLight.penumbra = 0.5;
spotLight.castShadow = true;
spotLight.position.set(- 1, 1, 1);
scene.add(spotLight);
dracoLoader.load('models/draco/bunny.drc', function(geometry) {
geometry.computeVertexNormals();
const material = new v3d.MeshStandardMaterial({ color: 0x606060 });
const mesh = new v3d.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
// Release decoder resources.
dracoLoader.dispose();
});
// renderer
renderer = new v3d.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = v3d.sRGBEncoding;
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
render();
requestAnimationFrame(animate);
}
function render() {
const timer = Date.now() * 0.0003;
camera.position.x = Math.sin(timer) * 0.5;
camera.position.z = Math.cos(timer) * 0.5;
camera.lookAt(0, 0.1, 0);
renderer.render(scene, camera);
}
</script>
</body>
</html>