javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736
							<!-- 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/[email protected]/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( { antialias: true, canvas } );
	renderer.useLegacyLights = false;

	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>