Three
<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('https://threejs.org/manual/examples/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> <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> <script type="importmap">{ "imports": { "three": "https://threejs.org/build/three.module.js", "three/addons/": "https://threejs.org/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( 'https://threejs.org/manual/examples/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>