You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
732 lines
18 KiB
HTML
732 lines
18 KiB
HTML
2 months ago
|
<!-- Licensed under a BSD license. See license.html for license -->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||
|
|
<title>Three.js - Voxel Geometry - UI</title>
|
||
|
|
<style>
|
||
|
|
html, body {
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#c {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
#ui {
|
||
|
|
position: absolute;
|
||
|
|
left: 10px;
|
||
|
|
top: 10px;
|
||
|
|
background: rgba(0, 0, 0, 0.8);
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
#ui input[type=radio] {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#ui input[type=radio] + label {
|
||
|
|
background-image: url('resources/images/minecraft/flourish-cc-by-nc-sa.png');
|
||
|
|
background-size: 1600% 400%;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
width: 64px;
|
||
|
|
height: 64px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
#ui input[type=radio]:checked + label {
|
||
|
|
outline: 3px solid red;
|
||
|
|
}
|
||
|
|
@media (max-width: 600px), (max-height: 600px) {
|
||
|
|
#ui input[type=radio] + label {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas id="c"></canvas>
|
||
|
|
<div id="ui">
|
||
|
|
<div class="tiles">
|
||
|
|
<input type="radio" name="voxel" id="voxel1" value="1"><label for="voxel1" style="background-position: -0% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel2" value="2"><label for="voxel2" style="background-position: -100% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel3" value="3"><label for="voxel3" style="background-position: -200% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel4" value="4"><label for="voxel4" style="background-position: -300% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel5" value="5"><label for="voxel5" style="background-position: -400% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel6" value="6"><label for="voxel6" style="background-position: -500% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel7" value="7"><label for="voxel7" style="background-position: -600% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel8" value="8"><label for="voxel8" style="background-position: -700% -0%"></label>
|
||
|
|
</div>
|
||
|
|
<div class="tiles">
|
||
|
|
<input type="radio" name="voxel" id="voxel9" value="9" ><label for="voxel9" style="background-position: -800% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel10" value="10"><label for="voxel10" style="background-position: -900% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel11" value="11"><label for="voxel11" style="background-position: -1000% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel12" value="12"><label for="voxel12" style="background-position: -1100% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel13" value="13"><label for="voxel13" style="background-position: -1200% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel14" value="14"><label for="voxel14" style="background-position: -1300% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel15" value="15"><label for="voxel15" style="background-position: -1400% -0%"></label>
|
||
|
|
<input type="radio" name="voxel" id="voxel16" value="16"><label for="voxel16" style="background-position: -1500% -0%"></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "../../build/three.module.js",
|
||
|
|
"three/addons/": "../../examples/jsm/"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import * as THREE from 'three';
|
||
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
|
|
|
||
|
|
class VoxelWorld {
|
||
|
|
|
||
|
|
constructor( options ) {
|
||
|
|
|
||
|
|
this.cellSize = options.cellSize;
|
||
|
|
this.tileSize = options.tileSize;
|
||
|
|
this.tileTextureWidth = options.tileTextureWidth;
|
||
|
|
this.tileTextureHeight = options.tileTextureHeight;
|
||
|
|
const { cellSize } = this;
|
||
|
|
this.cellSliceSize = cellSize * cellSize;
|
||
|
|
this.cells = {};
|
||
|
|
|
||
|
|
}
|
||
|
|
computeVoxelOffset( x, y, z ) {
|
||
|
|
|
||
|
|
const { cellSize, cellSliceSize } = this;
|
||
|
|
const voxelX = THREE.MathUtils.euclideanModulo( x, cellSize ) | 0;
|
||
|
|
const voxelY = THREE.MathUtils.euclideanModulo( y, cellSize ) | 0;
|
||
|
|
const voxelZ = THREE.MathUtils.euclideanModulo( z, cellSize ) | 0;
|
||
|
|
return voxelY * cellSliceSize +
|
||
|
|
voxelZ * cellSize +
|
||
|
|
voxelX;
|
||
|
|
|
||
|
|
}
|
||
|
|
computeCellId( x, y, z ) {
|
||
|
|
|
||
|
|
const { cellSize } = this;
|
||
|
|
const cellX = Math.floor( x / cellSize );
|
||
|
|
const cellY = Math.floor( y / cellSize );
|
||
|
|
const cellZ = Math.floor( z / cellSize );
|
||
|
|
return `${cellX},${cellY},${cellZ}`;
|
||
|
|
|
||
|
|
}
|
||
|
|
addCellForVoxel( x, y, z ) {
|
||
|
|
|
||
|
|
const cellId = this.computeCellId( x, y, z );
|
||
|
|
let cell = this.cells[ cellId ];
|
||
|
|
if ( ! cell ) {
|
||
|
|
|
||
|
|
const { cellSize } = this;
|
||
|
|
cell = new Uint8Array( cellSize * cellSize * cellSize );
|
||
|
|
this.cells[ cellId ] = cell;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return cell;
|
||
|
|
|
||
|
|
}
|
||
|
|
getCellForVoxel( x, y, z ) {
|
||
|
|
|
||
|
|
return this.cells[ this.computeCellId( x, y, z ) ];
|
||
|
|
|
||
|
|
}
|
||
|
|
setVoxel( x, y, z, v, addCell = true ) {
|
||
|
|
|
||
|
|
let cell = this.getCellForVoxel( x, y, z );
|
||
|
|
if ( ! cell ) {
|
||
|
|
|
||
|
|
if ( ! addCell ) {
|
||
|
|
|
||
|
|
return;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
cell = this.addCellForVoxel( x, y, z );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const voxelOffset = this.computeVoxelOffset( x, y, z );
|
||
|
|
cell[ voxelOffset ] = v;
|
||
|
|
|
||
|
|
}
|
||
|
|
getVoxel( x, y, z ) {
|
||
|
|
|
||
|
|
const cell = this.getCellForVoxel( x, y, z );
|
||
|
|
if ( ! cell ) {
|
||
|
|
|
||
|
|
return 0;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const voxelOffset = this.computeVoxelOffset( x, y, z );
|
||
|
|
return cell[ voxelOffset ];
|
||
|
|
|
||
|
|
}
|
||
|
|
generateGeometryDataForCell( cellX, cellY, cellZ ) {
|
||
|
|
|
||
|
|
const { cellSize, tileSize, tileTextureWidth, tileTextureHeight } = this;
|
||
|
|
const positions = [];
|
||
|
|
const normals = [];
|
||
|
|
const uvs = [];
|
||
|
|
const indices = [];
|
||
|
|
const startX = cellX * cellSize;
|
||
|
|
const startY = cellY * cellSize;
|
||
|
|
const startZ = cellZ * cellSize;
|
||
|
|
|
||
|
|
for ( let y = 0; y < cellSize; ++ y ) {
|
||
|
|
|
||
|
|
const voxelY = startY + y;
|
||
|
|
for ( let z = 0; z < cellSize; ++ z ) {
|
||
|
|
|
||
|
|
const voxelZ = startZ + z;
|
||
|
|
for ( let x = 0; x < cellSize; ++ x ) {
|
||
|
|
|
||
|
|
const voxelX = startX + x;
|
||
|
|
const voxel = this.getVoxel( voxelX, voxelY, voxelZ );
|
||
|
|
if ( voxel ) {
|
||
|
|
|
||
|
|
// voxel 0 is sky (empty) so for UVs we start at 0
|
||
|
|
const uvVoxel = voxel - 1;
|
||
|
|
// There is a voxel here but do we need faces for it?
|
||
|
|
for ( const { dir, corners, uvRow } of VoxelWorld.faces ) {
|
||
|
|
|
||
|
|
const neighbor = this.getVoxel(
|
||
|
|
voxelX + dir[ 0 ],
|
||
|
|
voxelY + dir[ 1 ],
|
||
|
|
voxelZ + dir[ 2 ] );
|
||
|
|
if ( ! neighbor ) {
|
||
|
|
|
||
|
|
// this voxel has no neighbor in this direction so we need a face.
|
||
|
|
const ndx = positions.length / 3;
|
||
|
|
for ( const { pos, uv } of corners ) {
|
||
|
|
|
||
|
|
positions.push( pos[ 0 ] + x, pos[ 1 ] + y, pos[ 2 ] + z );
|
||
|
|
normals.push( ...dir );
|
||
|
|
uvs.push(
|
||
|
|
( uvVoxel + uv[ 0 ] ) * tileSize / tileTextureWidth,
|
||
|
|
1 - ( uvRow + 1 - uv[ 1 ] ) * tileSize / tileTextureHeight );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
indices.push(
|
||
|
|
ndx, ndx + 1, ndx + 2,
|
||
|
|
ndx + 2, ndx + 1, ndx + 3,
|
||
|
|
);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
positions,
|
||
|
|
normals,
|
||
|
|
uvs,
|
||
|
|
indices,
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// from
|
||
|
|
// https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.42.3443&rep=rep1&type=pdf
|
||
|
|
intersectRay( start, end ) {
|
||
|
|
|
||
|
|
let dx = end.x - start.x;
|
||
|
|
let dy = end.y - start.y;
|
||
|
|
let dz = end.z - start.z;
|
||
|
|
const lenSq = dx * dx + dy * dy + dz * dz;
|
||
|
|
const len = Math.sqrt( lenSq );
|
||
|
|
|
||
|
|
dx /= len;
|
||
|
|
dy /= len;
|
||
|
|
dz /= len;
|
||
|
|
|
||
|
|
let t = 0.0;
|
||
|
|
let ix = Math.floor( start.x );
|
||
|
|
let iy = Math.floor( start.y );
|
||
|
|
let iz = Math.floor( start.z );
|
||
|
|
|
||
|
|
const stepX = ( dx > 0 ) ? 1 : - 1;
|
||
|
|
const stepY = ( dy > 0 ) ? 1 : - 1;
|
||
|
|
const stepZ = ( dz > 0 ) ? 1 : - 1;
|
||
|
|
|
||
|
|
const txDelta = Math.abs( 1 / dx );
|
||
|
|
const tyDelta = Math.abs( 1 / dy );
|
||
|
|
const tzDelta = Math.abs( 1 / dz );
|
||
|
|
|
||
|
|
const xDist = ( stepX > 0 ) ? ( ix + 1 - start.x ) : ( start.x - ix );
|
||
|
|
const yDist = ( stepY > 0 ) ? ( iy + 1 - start.y ) : ( start.y - iy );
|
||
|
|
const zDist = ( stepZ > 0 ) ? ( iz + 1 - start.z ) : ( start.z - iz );
|
||
|
|
|
||
|
|
// location of nearest voxel boundary, in units of t
|
||
|
|
let txMax = ( txDelta < Infinity ) ? txDelta * xDist : Infinity;
|
||
|
|
let tyMax = ( tyDelta < Infinity ) ? tyDelta * yDist : Infinity;
|
||
|
|
let tzMax = ( tzDelta < Infinity ) ? tzDelta * zDist : Infinity;
|
||
|
|
|
||
|
|
let steppedIndex = - 1;
|
||
|
|
|
||
|
|
// main loop along raycast vector
|
||
|
|
while ( t <= len ) {
|
||
|
|
|
||
|
|
const voxel = this.getVoxel( ix, iy, iz );
|
||
|
|
if ( voxel ) {
|
||
|
|
|
||
|
|
return {
|
||
|
|
position: [
|
||
|
|
start.x + t * dx,
|
||
|
|
start.y + t * dy,
|
||
|
|
start.z + t * dz,
|
||
|
|
],
|
||
|
|
normal: [
|
||
|
|
steppedIndex === 0 ? - stepX : 0,
|
||
|
|
steppedIndex === 1 ? - stepY : 0,
|
||
|
|
steppedIndex === 2 ? - stepZ : 0,
|
||
|
|
],
|
||
|
|
voxel,
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// advance t to next nearest voxel boundary
|
||
|
|
if ( txMax < tyMax ) {
|
||
|
|
|
||
|
|
if ( txMax < tzMax ) {
|
||
|
|
|
||
|
|
ix += stepX;
|
||
|
|
t = txMax;
|
||
|
|
txMax += txDelta;
|
||
|
|
steppedIndex = 0;
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
iz += stepZ;
|
||
|
|
t = tzMax;
|
||
|
|
tzMax += tzDelta;
|
||
|
|
steppedIndex = 2;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
if ( tyMax < tzMax ) {
|
||
|
|
|
||
|
|
iy += stepY;
|
||
|
|
t = tyMax;
|
||
|
|
tyMax += tyDelta;
|
||
|
|
steppedIndex = 1;
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
iz += stepZ;
|
||
|
|
t = tzMax;
|
||
|
|
tzMax += tzDelta;
|
||
|
|
steppedIndex = 2;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
VoxelWorld.faces = [
|
||
|
|
{ // left
|
||
|
|
uvRow: 0,
|
||
|
|
dir: [ - 1, 0, 0, ],
|
||
|
|
corners: [
|
||
|
|
{ pos: [ 0, 1, 0 ], uv: [ 0, 1 ], },
|
||
|
|
{ pos: [ 0, 0, 0 ], uv: [ 0, 0 ], },
|
||
|
|
{ pos: [ 0, 1, 1 ], uv: [ 1, 1 ], },
|
||
|
|
{ pos: [ 0, 0, 1 ], uv: [ 1, 0 ], },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{ // right
|
||
|
|
uvRow: 0,
|
||
|
|
dir: [ 1, 0, 0, ],
|
||
|
|
corners: [
|
||
|
|
{ pos: [ 1, 1, 1 ], uv: [ 0, 1 ], },
|
||
|
|
{ pos: [ 1, 0, 1 ], uv: [ 0, 0 ], },
|
||
|
|
{ pos: [ 1, 1, 0 ], uv: [ 1, 1 ], },
|
||
|
|
{ pos: [ 1, 0, 0 ], uv: [ 1, 0 ], },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{ // bottom
|
||
|
|
uvRow: 1,
|
||
|
|
dir: [ 0, - 1, 0, ],
|
||
|
|
corners: [
|
||
|
|
{ pos: [ 1, 0, 1 ], uv: [ 1, 0 ], },
|
||
|
|
{ pos: [ 0, 0, 1 ], uv: [ 0, 0 ], },
|
||
|
|
{ pos: [ 1, 0, 0 ], uv: [ 1, 1 ], },
|
||
|
|
{ pos: [ 0, 0, 0 ], uv: [ 0, 1 ], },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{ // top
|
||
|
|
uvRow: 2,
|
||
|
|
dir: [ 0, 1, 0, ],
|
||
|
|
corners: [
|
||
|
|
{ pos: [ 0, 1, 1 ], uv: [ 1, 1 ], },
|
||
|
|
{ pos: [ 1, 1, 1 ], uv: [ 0, 1 ], },
|
||
|
|
{ pos: [ 0, 1, 0 ], uv: [ 1, 0 ], },
|
||
|
|
{ pos: [ 1, 1, 0 ], uv: [ 0, 0 ], },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{ // back
|
||
|
|
uvRow: 0,
|
||
|
|
dir: [ 0, 0, - 1, ],
|
||
|
|
corners: [
|
||
|
|
{ pos: [ 1, 0, 0 ], uv: [ 0, 0 ], },
|
||
|
|
{ pos: [ 0, 0, 0 ], uv: [ 1, 0 ], },
|
||
|
|
{ pos: [ 1, 1, 0 ], uv: [ 0, 1 ], },
|
||
|
|
{ pos: [ 0, 1, 0 ], uv: [ 1, 1 ], },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{ // front
|
||
|
|
uvRow: 0,
|
||
|
|
dir: [ 0, 0, 1, ],
|
||
|
|
corners: [
|
||
|
|
{ pos: [ 0, 0, 1 ], uv: [ 0, 0 ], },
|
||
|
|
{ pos: [ 1, 0, 1 ], uv: [ 1, 0 ], },
|
||
|
|
{ pos: [ 0, 1, 1 ], uv: [ 0, 1 ], },
|
||
|
|
{ pos: [ 1, 1, 1 ], uv: [ 1, 1 ], },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
function main() {
|
||
|
|
|
||
|
|
const canvas = document.querySelector( '#c' );
|
||
|
|
const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
|
||
|
|
|
||
|
|
const cellSize = 32;
|
||
|
|
|
||
|
|
const fov = 75;
|
||
|
|
const aspect = 2; // the canvas default
|
||
|
|
const near = 0.1;
|
||
|
|
const far = 1000;
|
||
|
|
const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
|
||
|
|
camera.position.set( - cellSize * .3, cellSize * .8, - cellSize * .3 );
|
||
|
|
|
||
|
|
const controls = new OrbitControls( camera, canvas );
|
||
|
|
controls.target.set( cellSize / 2, cellSize / 3, cellSize / 2 );
|
||
|
|
controls.update();
|
||
|
|
|
||
|
|
const scene = new THREE.Scene();
|
||
|
|
scene.background = new THREE.Color( 'lightblue' );
|
||
|
|
|
||
|
|
const tileSize = 16;
|
||
|
|
const tileTextureWidth = 256;
|
||
|
|
const tileTextureHeight = 64;
|
||
|
|
const loader = new THREE.TextureLoader();
|
||
|
|
const texture = loader.load( 'resources/images/minecraft/flourish-cc-by-nc-sa.png', render );
|
||
|
|
texture.magFilter = THREE.NearestFilter;
|
||
|
|
texture.minFilter = THREE.NearestFilter;
|
||
|
|
texture.colorSpace = THREE.SRGBColorSpace;
|
||
|
|
|
||
|
|
function addLight( x, y, z ) {
|
||
|
|
|
||
|
|
const color = 0xFFFFFF;
|
||
|
|
const intensity = 3;
|
||
|
|
const light = new THREE.DirectionalLight( color, intensity );
|
||
|
|
light.position.set( x, y, z );
|
||
|
|
scene.add( light );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
addLight( - 1, 2, 4 );
|
||
|
|
addLight( 1, - 1, - 2 );
|
||
|
|
|
||
|
|
const world = new VoxelWorld( {
|
||
|
|
cellSize,
|
||
|
|
tileSize,
|
||
|
|
tileTextureWidth,
|
||
|
|
tileTextureHeight,
|
||
|
|
} );
|
||
|
|
|
||
|
|
const material = new THREE.MeshLambertMaterial( {
|
||
|
|
map: texture,
|
||
|
|
side: THREE.DoubleSide,
|
||
|
|
alphaTest: 0.1,
|
||
|
|
transparent: true,
|
||
|
|
} );
|
||
|
|
|
||
|
|
const cellIdToMesh = {};
|
||
|
|
function updateCellGeometry( x, y, z ) {
|
||
|
|
|
||
|
|
const cellX = Math.floor( x / cellSize );
|
||
|
|
const cellY = Math.floor( y / cellSize );
|
||
|
|
const cellZ = Math.floor( z / cellSize );
|
||
|
|
const cellId = world.computeCellId( x, y, z );
|
||
|
|
let mesh = cellIdToMesh[ cellId ];
|
||
|
|
const geometry = mesh ? mesh.geometry : new THREE.BufferGeometry();
|
||
|
|
|
||
|
|
const { positions, normals, uvs, indices } = world.generateGeometryDataForCell( cellX, cellY, cellZ );
|
||
|
|
const positionNumComponents = 3;
|
||
|
|
geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( positions ), positionNumComponents ) );
|
||
|
|
const normalNumComponents = 3;
|
||
|
|
geometry.setAttribute( 'normal', new THREE.BufferAttribute( new Float32Array( normals ), normalNumComponents ) );
|
||
|
|
const uvNumComponents = 2;
|
||
|
|
geometry.setAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( uvs ), uvNumComponents ) );
|
||
|
|
geometry.setIndex( indices );
|
||
|
|
geometry.computeBoundingSphere();
|
||
|
|
|
||
|
|
if ( ! mesh ) {
|
||
|
|
|
||
|
|
mesh = new THREE.Mesh( geometry, material );
|
||
|
|
mesh.name = cellId;
|
||
|
|
cellIdToMesh[ cellId ] = mesh;
|
||
|
|
scene.add( mesh );
|
||
|
|
mesh.position.set( cellX * cellSize, cellY * cellSize, cellZ * cellSize );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const neighborOffsets = [
|
||
|
|
[ 0, 0, 0 ], // self
|
||
|
|
[ - 1, 0, 0 ], // left
|
||
|
|
[ 1, 0, 0 ], // right
|
||
|
|
[ 0, - 1, 0 ], // down
|
||
|
|
[ 0, 1, 0 ], // up
|
||
|
|
[ 0, 0, - 1 ], // back
|
||
|
|
[ 0, 0, 1 ], // front
|
||
|
|
];
|
||
|
|
function updateVoxelGeometry( x, y, z ) {
|
||
|
|
|
||
|
|
const updatedCellIds = {};
|
||
|
|
for ( const offset of neighborOffsets ) {
|
||
|
|
|
||
|
|
const ox = x + offset[ 0 ];
|
||
|
|
const oy = y + offset[ 1 ];
|
||
|
|
const oz = z + offset[ 2 ];
|
||
|
|
const cellId = world.computeCellId( ox, oy, oz );
|
||
|
|
if ( ! updatedCellIds[ cellId ] ) {
|
||
|
|
|
||
|
|
updatedCellIds[ cellId ] = true;
|
||
|
|
updateCellGeometry( ox, oy, oz );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
for ( let y = 0; y < cellSize; ++ y ) {
|
||
|
|
|
||
|
|
for ( let z = 0; z < cellSize; ++ z ) {
|
||
|
|
|
||
|
|
for ( let x = 0; x < cellSize; ++ x ) {
|
||
|
|
|
||
|
|
const height = ( Math.sin( x / cellSize * Math.PI * 2 ) + Math.sin( z / cellSize * Math.PI * 3 ) ) * ( cellSize / 6 ) + ( cellSize / 2 );
|
||
|
|
if ( y < height ) {
|
||
|
|
|
||
|
|
world.setVoxel( x, y, z, randInt( 1, 17 ) );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function randInt( min, max ) {
|
||
|
|
|
||
|
|
return Math.floor( Math.random() * ( max - min ) + min );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
updateVoxelGeometry( 1, 1, 1 ); // 0,0,0 will generate
|
||
|
|
|
||
|
|
function resizeRendererToDisplaySize( renderer ) {
|
||
|
|
|
||
|
|
const canvas = renderer.domElement;
|
||
|
|
const width = canvas.clientWidth;
|
||
|
|
const height = canvas.clientHeight;
|
||
|
|
const needResize = canvas.width !== width || canvas.height !== height;
|
||
|
|
if ( needResize ) {
|
||
|
|
|
||
|
|
renderer.setSize( width, height, false );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return needResize;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
let renderRequested = false;
|
||
|
|
|
||
|
|
function render() {
|
||
|
|
|
||
|
|
renderRequested = undefined;
|
||
|
|
|
||
|
|
if ( resizeRendererToDisplaySize( renderer ) ) {
|
||
|
|
|
||
|
|
const canvas = renderer.domElement;
|
||
|
|
camera.aspect = canvas.clientWidth / canvas.clientHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
controls.update();
|
||
|
|
renderer.render( scene, camera );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
render();
|
||
|
|
|
||
|
|
function requestRenderIfNotRequested() {
|
||
|
|
|
||
|
|
if ( ! renderRequested ) {
|
||
|
|
|
||
|
|
renderRequested = true;
|
||
|
|
requestAnimationFrame( render );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
let currentVoxel = 0;
|
||
|
|
let currentId;
|
||
|
|
|
||
|
|
document.querySelectorAll( '#ui .tiles input[type=radio][name=voxel]' ).forEach( ( elem ) => {
|
||
|
|
|
||
|
|
elem.addEventListener( 'click', allowUncheck );
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
function allowUncheck() {
|
||
|
|
|
||
|
|
if ( this.id === currentId ) {
|
||
|
|
|
||
|
|
this.checked = false;
|
||
|
|
currentId = undefined;
|
||
|
|
currentVoxel = 0;
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
currentId = this.id;
|
||
|
|
currentVoxel = parseInt( this.value );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCanvasRelativePosition( event ) {
|
||
|
|
|
||
|
|
const rect = canvas.getBoundingClientRect();
|
||
|
|
return {
|
||
|
|
x: ( event.clientX - rect.left ) * canvas.width / rect.width,
|
||
|
|
y: ( event.clientY - rect.top ) * canvas.height / rect.height,
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function placeVoxel( event ) {
|
||
|
|
|
||
|
|
const pos = getCanvasRelativePosition( event );
|
||
|
|
const x = ( pos.x / canvas.width ) * 2 - 1;
|
||
|
|
const y = ( pos.y / canvas.height ) * - 2 + 1; // note we flip Y
|
||
|
|
|
||
|
|
const start = new THREE.Vector3();
|
||
|
|
const end = new THREE.Vector3();
|
||
|
|
start.setFromMatrixPosition( camera.matrixWorld );
|
||
|
|
end.set( x, y, 1 ).unproject( camera );
|
||
|
|
|
||
|
|
const intersection = world.intersectRay( start, end );
|
||
|
|
if ( intersection ) {
|
||
|
|
|
||
|
|
const voxelId = event.shiftKey ? 0 : currentVoxel;
|
||
|
|
// the intersection point is on the face. That means
|
||
|
|
// the math imprecision could put us on either side of the face.
|
||
|
|
// so go half a normal into the voxel if removing (currentVoxel = 0)
|
||
|
|
// our out of the voxel if adding (currentVoxel > 0)
|
||
|
|
const pos = intersection.position.map( ( v, ndx ) => {
|
||
|
|
|
||
|
|
return v + intersection.normal[ ndx ] * ( voxelId > 0 ? 0.5 : - 0.5 );
|
||
|
|
|
||
|
|
} );
|
||
|
|
world.setVoxel( ...pos, voxelId );
|
||
|
|
updateVoxelGeometry( ...pos );
|
||
|
|
requestRenderIfNotRequested();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const mouse = {
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
};
|
||
|
|
|
||
|
|
function recordStartPosition( event ) {
|
||
|
|
|
||
|
|
mouse.x = event.clientX;
|
||
|
|
mouse.y = event.clientY;
|
||
|
|
mouse.moveX = 0;
|
||
|
|
mouse.moveY = 0;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function recordMovement( event ) {
|
||
|
|
|
||
|
|
mouse.moveX += Math.abs( mouse.x - event.clientX );
|
||
|
|
mouse.moveY += Math.abs( mouse.y - event.clientY );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function placeVoxelIfNoMovement( event ) {
|
||
|
|
|
||
|
|
if ( mouse.moveX < 5 && mouse.moveY < 5 ) {
|
||
|
|
|
||
|
|
placeVoxel( event );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
window.removeEventListener( 'pointermove', recordMovement );
|
||
|
|
window.removeEventListener( 'pointerup', placeVoxelIfNoMovement );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas.addEventListener( 'pointerdown', ( event ) => {
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
recordStartPosition( event );
|
||
|
|
window.addEventListener( 'pointermove', recordMovement );
|
||
|
|
window.addEventListener( 'pointerup', placeVoxelIfNoMovement );
|
||
|
|
|
||
|
|
}, { passive: false } );
|
||
|
|
canvas.addEventListener( 'touchstart', ( event ) => {
|
||
|
|
|
||
|
|
// prevent scrolling
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
}, { passive: false } );
|
||
|
|
|
||
|
|
controls.addEventListener( 'change', requestRenderIfNotRequested );
|
||
|
|
window.addEventListener( 'resize', requestRenderIfNotRequested );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
main();
|
||
|
|
</script>
|
||
|
|
</html>
|