123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731 |
- <!-- 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>
|