You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
600 lines
18 KiB
600 lines
18 KiB
3 years 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>
|
||
|
|
<!-- Import maps polyfill -->
|
||
|
|
<!-- Remove this when import maps will be widely supported -->
|
||
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
||
|
|
|
||
|
|
<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({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;
|
||
|
|
|
||
|
|
function addLight(x, y, z) {
|
||
|
|
const color = 0xFFFFFF;
|
||
|
|
const intensity = 1;
|
||
|
|
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>
|