|
|
@@ -1,7 +1,7 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
- <title>three.js webgl - loaders - vox loader</title>
|
|
|
+ <title>three.js webgl - loaders - vox</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">
|
|
|
@@ -28,18 +28,28 @@
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
- camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
|
|
|
- camera.position.set( 0, 0.1, 0.2 );
|
|
|
+ camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10 );
|
|
|
+ camera.position.set( 0.175, 0.075, 0.175 );
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
scene.add( camera );
|
|
|
|
|
|
+ // light
|
|
|
+
|
|
|
+ var hemiLight = new THREE.HemisphereLight( 0x888888, 0x000000, 1 );
|
|
|
+ scene.add( hemiLight );
|
|
|
+
|
|
|
+ var dirLight = new THREE.DirectionalLight( 0xffffff, 0.75 );
|
|
|
+ dirLight.position.set( 1.5, 3, 2.5 );
|
|
|
+ scene.add( dirLight );
|
|
|
+
|
|
|
var loader = new VOXLoader();
|
|
|
- loader.load( 'models/vox/teapot.vox', function ( chunks ) {
|
|
|
+ loader.load( 'models/vox/monu10.vox', function ( chunks ) {
|
|
|
|
|
|
const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
|
|
|
- const material = new THREE.MeshNormalMaterial();
|
|
|
+ const material = new THREE.MeshStandardMaterial();
|
|
|
|
|
|
+ const color = new THREE.Color();
|
|
|
const matrix = new THREE.Matrix4();
|
|
|
|
|
|
for ( var i = 0; i < chunks.length; i ++ ) {
|
|
|
@@ -48,6 +58,9 @@
|
|
|
|
|
|
const size = chunk.size;
|
|
|
const data = chunk.data;
|
|
|
+ const palette = chunk.palette;
|
|
|
+
|
|
|
+ // displayPalette( palette );
|
|
|
|
|
|
const mesh = new THREE.InstancedMesh( geometry, material, data.length / 4 );
|
|
|
mesh.scale.setScalar( 0.0015 );
|
|
|
@@ -58,7 +71,14 @@
|
|
|
const x = data[ j + 0 ] - size.x / 2;
|
|
|
const y = data[ j + 1 ] - size.y / 2;
|
|
|
const z = data[ j + 2 ] - size.z / 2;
|
|
|
+ const c = data[ j + 3 ];
|
|
|
|
|
|
+ const hex = palette[ c ];
|
|
|
+ const r = ( hex >> 0 & 0xff ) / 0xff;
|
|
|
+ const g = ( hex >> 8 & 0xff ) / 0xff;
|
|
|
+ const b = ( hex >> 16 & 0xff ) / 0xff;
|
|
|
+
|
|
|
+ mesh.setColorAt( k, color.setRGB( r, g, b ) );
|
|
|
mesh.setMatrixAt( k, matrix.setPosition( x, z, - y ) );
|
|
|
|
|
|
}
|
|
|
@@ -89,6 +109,35 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
+ function displayPalette( palette ) {
|
|
|
+
|
|
|
+ const canvas = document.createElement( 'canvas' );
|
|
|
+ canvas.width = 8;
|
|
|
+ canvas.height = 32;
|
|
|
+ canvas.style.position = 'absolute';
|
|
|
+ canvas.style.top = '0';
|
|
|
+ canvas.style.width = 100 + 'px';
|
|
|
+ canvas.style.imageRendering = 'pixelated';
|
|
|
+ document.body.appendChild( canvas );
|
|
|
+
|
|
|
+ const context = canvas.getContext( '2d' );
|
|
|
+
|
|
|
+ for ( var c = 0; c < 256; c ++ ) {
|
|
|
+
|
|
|
+ const x = c % 8;
|
|
|
+ const y = Math.floor( c / 8 );
|
|
|
+
|
|
|
+ const hex = palette[ c + 1 ];
|
|
|
+ const r = hex >> 0 & 0xff;
|
|
|
+ const g = hex >> 8 & 0xff;
|
|
|
+ const b = hex >> 16 & 0xff;
|
|
|
+ context.fillStyle = `rgba(${r},${g},${b},1)`;
|
|
|
+ context.fillRect( x, 31 - y, 1, 1 );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
function onWindowResize() {
|
|
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
@@ -96,8 +145,6 @@
|
|
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
- controls.handleResize();
|
|
|
-
|
|
|
}
|
|
|
|
|
|
function animate() {
|
Mr.doob
