updates
This commit is contained in:
Daniel Ledda
@@ -3,6 +3,15 @@
|
||||
import SolutionInteractor from "./SolutionInteractor.svelte";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="sidebarContainer">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="solutionBodyContainer">
|
||||
<SolutionInteractor />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
@@ -46,12 +55,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<div class="sidebarContainer">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="solutionBodyContainer">
|
||||
<SolutionInteractor />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {somaDimension, polycubes, selectedCube} from "./store";
|
||||
import {somaDimension, polycubes, selectedCube, showingSolution} from "./store";
|
||||
export let cubeNo: number;
|
||||
|
||||
$: dimension = $somaDimension;
|
||||
@@ -52,6 +52,11 @@
|
||||
function dragDist() {
|
||||
return Math.sqrt((cellDragStartPos.x - cellDragEndPos.x) ** 2 + (cellDragStartPos.y - cellDragEndPos.y) ** 2);
|
||||
}
|
||||
|
||||
function onClickCube() {
|
||||
showingSolution.set(false);
|
||||
selectedCube.set(cubeNo)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -59,7 +64,7 @@
|
||||
class:active={currentlyVisualised}
|
||||
style="--color: {cubeColor}; --dimension: {dimension};"
|
||||
on:contextmenu|preventDefault
|
||||
on:mousedown={() => selectedCube.set(cubeNo)}
|
||||
on:mousedown={onClickCube}
|
||||
>
|
||||
<h1>Cube: {cubeNo + 1}</h1>
|
||||
{#each {length: dimension} as _, x}
|
||||
@@ -92,8 +97,16 @@
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
.cube:hover:not(.active) {
|
||||
transform: scale(1.03);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.cube {
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
background-color: #666666;
|
||||
cursor: pointer;
|
||||
transition: transform 200ms;
|
||||
padding: 1em 2em 1em 2em;
|
||||
user-select: none;
|
||||
}
|
||||
.cell {
|
||||
|
||||
911
src/OBJLoader.js
Normal file
911
src/OBJLoader.js
Normal file
@@ -0,0 +1,911 @@
|
||||
import {
|
||||
BufferGeometry,
|
||||
FileLoader,
|
||||
Float32BufferAttribute,
|
||||
Group,
|
||||
LineBasicMaterial,
|
||||
LineSegments,
|
||||
Loader,
|
||||
Material,
|
||||
Mesh,
|
||||
MeshPhongMaterial,
|
||||
Points,
|
||||
PointsMaterial,
|
||||
Vector3
|
||||
} from 'three';
|
||||
|
||||
// o object_name | g group_name
|
||||
const _object_pattern = /^[og]\s*(.+)?/;
|
||||
// mtllib file_reference
|
||||
const _material_library_pattern = /^mtllib /;
|
||||
// usemtl material_name
|
||||
const _material_use_pattern = /^usemtl /;
|
||||
// usemap map_name
|
||||
const _map_use_pattern = /^usemap /;
|
||||
|
||||
const _vA = new Vector3();
|
||||
const _vB = new Vector3();
|
||||
const _vC = new Vector3();
|
||||
|
||||
const _ab = new Vector3();
|
||||
const _cb = new Vector3();
|
||||
|
||||
function ParserState() {
|
||||
|
||||
const state = {
|
||||
objects: [],
|
||||
object: {},
|
||||
|
||||
vertices: [],
|
||||
normals: [],
|
||||
colors: [],
|
||||
uvs: [],
|
||||
|
||||
materials: {},
|
||||
materialLibraries: [],
|
||||
|
||||
startObject: function ( name, fromDeclaration ) {
|
||||
|
||||
// If the current object (initial from reset) is not from a g/o declaration in the parsed
|
||||
// file. We need to use it for the first parsed g/o to keep things in sync.
|
||||
if ( this.object && this.object.fromDeclaration === false ) {
|
||||
|
||||
this.object.name = name;
|
||||
this.object.fromDeclaration = ( fromDeclaration !== false );
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
const previousMaterial = ( this.object && typeof this.object.currentMaterial === 'function' ? this.object.currentMaterial() : undefined );
|
||||
|
||||
if ( this.object && typeof this.object._finalize === 'function' ) {
|
||||
|
||||
this.object._finalize( true );
|
||||
|
||||
}
|
||||
|
||||
this.object = {
|
||||
name: name || '',
|
||||
fromDeclaration: ( fromDeclaration !== false ),
|
||||
|
||||
geometry: {
|
||||
vertices: [],
|
||||
normals: [],
|
||||
colors: [],
|
||||
uvs: [],
|
||||
hasUVIndices: false
|
||||
},
|
||||
materials: [],
|
||||
smooth: true,
|
||||
|
||||
startMaterial: function ( name, libraries ) {
|
||||
|
||||
const previous = this._finalize( false );
|
||||
|
||||
// New usemtl declaration overwrites an inherited material, except if faces were declared
|
||||
// after the material, then it must be preserved for proper MultiMaterial continuation.
|
||||
if ( previous && ( previous.inherited || previous.groupCount <= 0 ) ) {
|
||||
|
||||
this.materials.splice( previous.index, 1 );
|
||||
|
||||
}
|
||||
|
||||
const material = {
|
||||
index: this.materials.length,
|
||||
name: name || '',
|
||||
mtllib: ( Array.isArray( libraries ) && libraries.length > 0 ? libraries[ libraries.length - 1 ] : '' ),
|
||||
smooth: ( previous !== undefined ? previous.smooth : this.smooth ),
|
||||
groupStart: ( previous !== undefined ? previous.groupEnd : 0 ),
|
||||
groupEnd: - 1,
|
||||
groupCount: - 1,
|
||||
inherited: false,
|
||||
|
||||
clone: function ( index ) {
|
||||
|
||||
const cloned = {
|
||||
index: ( typeof index === 'number' ? index : this.index ),
|
||||
name: this.name,
|
||||
mtllib: this.mtllib,
|
||||
smooth: this.smooth,
|
||||
groupStart: 0,
|
||||
groupEnd: - 1,
|
||||
groupCount: - 1,
|
||||
inherited: false
|
||||
};
|
||||
cloned.clone = this.clone.bind( cloned );
|
||||
return cloned;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
this.materials.push( material );
|
||||
|
||||
return material;
|
||||
|
||||
},
|
||||
|
||||
currentMaterial: function () {
|
||||
|
||||
if ( this.materials.length > 0 ) {
|
||||
|
||||
return this.materials[ this.materials.length - 1 ];
|
||||
|
||||
}
|
||||
|
||||
return undefined;
|
||||
|
||||
},
|
||||
|
||||
_finalize: function ( end ) {
|
||||
|
||||
const lastMultiMaterial = this.currentMaterial();
|
||||
if ( lastMultiMaterial && lastMultiMaterial.groupEnd === - 1 ) {
|
||||
|
||||
lastMultiMaterial.groupEnd = this.geometry.vertices.length / 3;
|
||||
lastMultiMaterial.groupCount = lastMultiMaterial.groupEnd - lastMultiMaterial.groupStart;
|
||||
lastMultiMaterial.inherited = false;
|
||||
|
||||
}
|
||||
|
||||
// Ignore objects tail materials if no face declarations followed them before a new o/g started.
|
||||
if ( end && this.materials.length > 1 ) {
|
||||
|
||||
for ( let mi = this.materials.length - 1; mi >= 0; mi -- ) {
|
||||
|
||||
if ( this.materials[ mi ].groupCount <= 0 ) {
|
||||
|
||||
this.materials.splice( mi, 1 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Guarantee at least one empty material, this makes the creation later more straight forward.
|
||||
if ( end && this.materials.length === 0 ) {
|
||||
|
||||
this.materials.push( {
|
||||
name: '',
|
||||
smooth: this.smooth
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
return lastMultiMaterial;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// Inherit previous objects material.
|
||||
// Spec tells us that a declared material must be set to all objects until a new material is declared.
|
||||
// If a usemtl declaration is encountered while this new object is being parsed, it will
|
||||
// overwrite the inherited material. Exception being that there was already face declarations
|
||||
// to the inherited material, then it will be preserved for proper MultiMaterial continuation.
|
||||
|
||||
if ( previousMaterial && previousMaterial.name && typeof previousMaterial.clone === 'function' ) {
|
||||
|
||||
const declared = previousMaterial.clone( 0 );
|
||||
declared.inherited = true;
|
||||
this.object.materials.push( declared );
|
||||
|
||||
}
|
||||
|
||||
this.objects.push( this.object );
|
||||
|
||||
},
|
||||
|
||||
finalize: function () {
|
||||
|
||||
if ( this.object && typeof this.object._finalize === 'function' ) {
|
||||
|
||||
this.object._finalize( true );
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
parseVertexIndex: function ( value, len ) {
|
||||
|
||||
const index = parseInt( value, 10 );
|
||||
return ( index >= 0 ? index - 1 : index + len / 3 ) * 3;
|
||||
|
||||
},
|
||||
|
||||
parseNormalIndex: function ( value, len ) {
|
||||
|
||||
const index = parseInt( value, 10 );
|
||||
return ( index >= 0 ? index - 1 : index + len / 3 ) * 3;
|
||||
|
||||
},
|
||||
|
||||
parseUVIndex: function ( value, len ) {
|
||||
|
||||
const index = parseInt( value, 10 );
|
||||
return ( index >= 0 ? index - 1 : index + len / 2 ) * 2;
|
||||
|
||||
},
|
||||
|
||||
addVertex: function ( a, b, c ) {
|
||||
|
||||
const src = this.vertices;
|
||||
const dst = this.object.geometry.vertices;
|
||||
|
||||
dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
|
||||
dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] );
|
||||
dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] );
|
||||
|
||||
},
|
||||
|
||||
addVertexPoint: function ( a ) {
|
||||
|
||||
const src = this.vertices;
|
||||
const dst = this.object.geometry.vertices;
|
||||
|
||||
dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
|
||||
|
||||
},
|
||||
|
||||
addVertexLine: function ( a ) {
|
||||
|
||||
const src = this.vertices;
|
||||
const dst = this.object.geometry.vertices;
|
||||
|
||||
dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
|
||||
|
||||
},
|
||||
|
||||
addNormal: function ( a, b, c ) {
|
||||
|
||||
const src = this.normals;
|
||||
const dst = this.object.geometry.normals;
|
||||
|
||||
dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
|
||||
dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] );
|
||||
dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] );
|
||||
|
||||
},
|
||||
|
||||
addFaceNormal: function ( a, b, c ) {
|
||||
|
||||
const src = this.vertices;
|
||||
const dst = this.object.geometry.normals;
|
||||
|
||||
_vA.fromArray( src, a );
|
||||
_vB.fromArray( src, b );
|
||||
_vC.fromArray( src, c );
|
||||
|
||||
_cb.subVectors( _vC, _vB );
|
||||
_ab.subVectors( _vA, _vB );
|
||||
_cb.cross( _ab );
|
||||
|
||||
_cb.normalize();
|
||||
|
||||
dst.push( _cb.x, _cb.y, _cb.z );
|
||||
dst.push( _cb.x, _cb.y, _cb.z );
|
||||
dst.push( _cb.x, _cb.y, _cb.z );
|
||||
|
||||
},
|
||||
|
||||
addColor: function ( a, b, c ) {
|
||||
|
||||
const src = this.colors;
|
||||
const dst = this.object.geometry.colors;
|
||||
|
||||
if ( src[ a ] !== undefined ) dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
|
||||
if ( src[ b ] !== undefined ) dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] );
|
||||
if ( src[ c ] !== undefined ) dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] );
|
||||
|
||||
},
|
||||
|
||||
addUV: function ( a, b, c ) {
|
||||
|
||||
const src = this.uvs;
|
||||
const dst = this.object.geometry.uvs;
|
||||
|
||||
dst.push( src[ a + 0 ], src[ a + 1 ] );
|
||||
dst.push( src[ b + 0 ], src[ b + 1 ] );
|
||||
dst.push( src[ c + 0 ], src[ c + 1 ] );
|
||||
|
||||
},
|
||||
|
||||
addDefaultUV: function () {
|
||||
|
||||
const dst = this.object.geometry.uvs;
|
||||
|
||||
dst.push( 0, 0 );
|
||||
dst.push( 0, 0 );
|
||||
dst.push( 0, 0 );
|
||||
|
||||
},
|
||||
|
||||
addUVLine: function ( a ) {
|
||||
|
||||
const src = this.uvs;
|
||||
const dst = this.object.geometry.uvs;
|
||||
|
||||
dst.push( src[ a + 0 ], src[ a + 1 ] );
|
||||
|
||||
},
|
||||
|
||||
addFace: function ( a, b, c, ua, ub, uc, na, nb, nc ) {
|
||||
|
||||
const vLen = this.vertices.length;
|
||||
|
||||
let ia = this.parseVertexIndex( a, vLen );
|
||||
let ib = this.parseVertexIndex( b, vLen );
|
||||
let ic = this.parseVertexIndex( c, vLen );
|
||||
|
||||
this.addVertex( ia, ib, ic );
|
||||
this.addColor( ia, ib, ic );
|
||||
|
||||
// normals
|
||||
|
||||
if ( na !== undefined && na !== '' ) {
|
||||
|
||||
const nLen = this.normals.length;
|
||||
|
||||
ia = this.parseNormalIndex( na, nLen );
|
||||
ib = this.parseNormalIndex( nb, nLen );
|
||||
ic = this.parseNormalIndex( nc, nLen );
|
||||
|
||||
this.addNormal( ia, ib, ic );
|
||||
|
||||
} else {
|
||||
|
||||
this.addFaceNormal( ia, ib, ic );
|
||||
|
||||
}
|
||||
|
||||
// uvs
|
||||
|
||||
if ( ua !== undefined && ua !== '' ) {
|
||||
|
||||
const uvLen = this.uvs.length;
|
||||
|
||||
ia = this.parseUVIndex( ua, uvLen );
|
||||
ib = this.parseUVIndex( ub, uvLen );
|
||||
ic = this.parseUVIndex( uc, uvLen );
|
||||
|
||||
this.addUV( ia, ib, ic );
|
||||
|
||||
this.object.geometry.hasUVIndices = true;
|
||||
|
||||
} else {
|
||||
|
||||
// add placeholder values (for inconsistent face definitions)
|
||||
|
||||
this.addDefaultUV();
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
addPointGeometry: function ( vertices ) {
|
||||
|
||||
this.object.geometry.type = 'Points';
|
||||
|
||||
const vLen = this.vertices.length;
|
||||
|
||||
for ( let vi = 0, l = vertices.length; vi < l; vi ++ ) {
|
||||
|
||||
const index = this.parseVertexIndex( vertices[ vi ], vLen );
|
||||
|
||||
this.addVertexPoint( index );
|
||||
this.addColor( index );
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
addLineGeometry: function ( vertices, uvs ) {
|
||||
|
||||
this.object.geometry.type = 'Line';
|
||||
|
||||
const vLen = this.vertices.length;
|
||||
const uvLen = this.uvs.length;
|
||||
|
||||
for ( let vi = 0, l = vertices.length; vi < l; vi ++ ) {
|
||||
|
||||
this.addVertexLine( this.parseVertexIndex( vertices[ vi ], vLen ) );
|
||||
|
||||
}
|
||||
|
||||
for ( let uvi = 0, l = uvs.length; uvi < l; uvi ++ ) {
|
||||
|
||||
this.addUVLine( this.parseUVIndex( uvs[ uvi ], uvLen ) );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
state.startObject( '', false );
|
||||
|
||||
return state;
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
class OBJLoader extends Loader {
|
||||
|
||||
constructor( manager ) {
|
||||
|
||||
super( manager );
|
||||
|
||||
this.materials = null;
|
||||
|
||||
}
|
||||
|
||||
load( url, onLoad, onProgress, onError ) {
|
||||
|
||||
const scope = this;
|
||||
|
||||
const loader = new FileLoader( this.manager );
|
||||
loader.setPath( this.path );
|
||||
loader.setRequestHeader( this.requestHeader );
|
||||
loader.setWithCredentials( this.withCredentials );
|
||||
loader.load( url, function ( text ) {
|
||||
|
||||
try {
|
||||
|
||||
onLoad( scope.parse( text ) );
|
||||
|
||||
} catch ( e ) {
|
||||
|
||||
if ( onError ) {
|
||||
|
||||
onError( e );
|
||||
|
||||
} else {
|
||||
|
||||
console.error( e );
|
||||
|
||||
}
|
||||
|
||||
scope.manager.itemError( url );
|
||||
|
||||
}
|
||||
|
||||
}, onProgress, onError );
|
||||
|
||||
}
|
||||
|
||||
setMaterials( materials ) {
|
||||
|
||||
this.materials = materials;
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
parse( text ) {
|
||||
|
||||
const state = new ParserState();
|
||||
|
||||
if ( text.indexOf( '\r\n' ) !== - 1 ) {
|
||||
|
||||
// This is faster than String.split with regex that splits on both
|
||||
text = text.replace( /\r\n/g, '\n' );
|
||||
|
||||
}
|
||||
|
||||
if ( text.indexOf( '\\\n' ) !== - 1 ) {
|
||||
|
||||
// join lines separated by a line continuation character (\)
|
||||
text = text.replace( /\\\n/g, '' );
|
||||
|
||||
}
|
||||
|
||||
const lines = text.split( '\n' );
|
||||
let line = '', lineFirstChar = '';
|
||||
let lineLength = 0;
|
||||
let result = [];
|
||||
|
||||
// Faster to just trim left side of the line. Use if available.
|
||||
const trimLeft = ( typeof ''.trimLeft === 'function' );
|
||||
|
||||
for ( let i = 0, l = lines.length; i < l; i ++ ) {
|
||||
|
||||
line = lines[ i ];
|
||||
|
||||
line = trimLeft ? line.trimLeft() : line.trim();
|
||||
|
||||
lineLength = line.length;
|
||||
|
||||
if ( lineLength === 0 ) continue;
|
||||
|
||||
lineFirstChar = line.charAt( 0 );
|
||||
|
||||
// @todo invoke passed in handler if any
|
||||
if ( lineFirstChar === '#' ) continue;
|
||||
|
||||
if ( lineFirstChar === 'v' ) {
|
||||
|
||||
const data = line.split( /\s+/ );
|
||||
|
||||
switch ( data[ 0 ] ) {
|
||||
|
||||
case 'v':
|
||||
state.vertices.push(
|
||||
parseFloat( data[ 1 ] ),
|
||||
parseFloat( data[ 2 ] ),
|
||||
parseFloat( data[ 3 ] )
|
||||
);
|
||||
if ( data.length >= 7 ) {
|
||||
|
||||
state.colors.push(
|
||||
parseFloat( data[ 4 ] ),
|
||||
parseFloat( data[ 5 ] ),
|
||||
parseFloat( data[ 6 ] )
|
||||
|
||||
);
|
||||
|
||||
} else {
|
||||
|
||||
// if no colors are defined, add placeholders so color and vertex indices match
|
||||
|
||||
state.colors.push( undefined, undefined, undefined );
|
||||
|
||||
}
|
||||
|
||||
break;
|
||||
case 'vn':
|
||||
state.normals.push(
|
||||
parseFloat( data[ 1 ] ),
|
||||
parseFloat( data[ 2 ] ),
|
||||
parseFloat( data[ 3 ] )
|
||||
);
|
||||
break;
|
||||
case 'vt':
|
||||
state.uvs.push(
|
||||
parseFloat( data[ 1 ] ),
|
||||
parseFloat( data[ 2 ] )
|
||||
);
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
} else if ( lineFirstChar === 'f' ) {
|
||||
|
||||
const lineData = line.substr( 1 ).trim();
|
||||
const vertexData = lineData.split( /\s+/ );
|
||||
const faceVertices = [];
|
||||
|
||||
// Parse the face vertex data into an easy to work with format
|
||||
|
||||
for ( let j = 0, jl = vertexData.length; j < jl; j ++ ) {
|
||||
|
||||
const vertex = vertexData[ j ];
|
||||
|
||||
if ( vertex.length > 0 ) {
|
||||
|
||||
const vertexParts = vertex.split( '/' );
|
||||
faceVertices.push( vertexParts );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Draw an edge between the first vertex and all subsequent vertices to form an n-gon
|
||||
|
||||
const v1 = faceVertices[ 0 ];
|
||||
|
||||
for ( let j = 1, jl = faceVertices.length - 1; j < jl; j ++ ) {
|
||||
|
||||
const v2 = faceVertices[ j ];
|
||||
const v3 = faceVertices[ j + 1 ];
|
||||
|
||||
state.addFace(
|
||||
v1[ 0 ], v2[ 0 ], v3[ 0 ],
|
||||
v1[ 1 ], v2[ 1 ], v3[ 1 ],
|
||||
v1[ 2 ], v2[ 2 ], v3[ 2 ]
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
} else if ( lineFirstChar === 'l' ) {
|
||||
|
||||
const lineParts = line.substring( 1 ).trim().split( ' ' );
|
||||
let lineVertices = [];
|
||||
const lineUVs = [];
|
||||
|
||||
if ( line.indexOf( '/' ) === - 1 ) {
|
||||
|
||||
lineVertices = lineParts;
|
||||
|
||||
} else {
|
||||
|
||||
for ( let li = 0, llen = lineParts.length; li < llen; li ++ ) {
|
||||
|
||||
const parts = lineParts[ li ].split( '/' );
|
||||
|
||||
if ( parts[ 0 ] !== '' ) lineVertices.push( parts[ 0 ] );
|
||||
if ( parts[ 1 ] !== '' ) lineUVs.push( parts[ 1 ] );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
state.addLineGeometry( lineVertices, lineUVs );
|
||||
|
||||
} else if ( lineFirstChar === 'p' ) {
|
||||
|
||||
const lineData = line.substr( 1 ).trim();
|
||||
const pointData = lineData.split( ' ' );
|
||||
|
||||
state.addPointGeometry( pointData );
|
||||
|
||||
} else if ( ( result = _object_pattern.exec( line ) ) !== null ) {
|
||||
|
||||
// o object_name
|
||||
// or
|
||||
// g group_name
|
||||
|
||||
// WORKAROUND: https://bugs.chromium.org/p/v8/issues/detail?id=2869
|
||||
// let name = result[ 0 ].substr( 1 ).trim();
|
||||
const name = ( ' ' + result[ 0 ].substr( 1 ).trim() ).substr( 1 );
|
||||
|
||||
state.startObject( name );
|
||||
|
||||
} else if ( _material_use_pattern.test( line ) ) {
|
||||
|
||||
// material
|
||||
|
||||
state.object.startMaterial( line.substring( 7 ).trim(), state.materialLibraries );
|
||||
|
||||
} else if ( _material_library_pattern.test( line ) ) {
|
||||
|
||||
// mtl file
|
||||
|
||||
state.materialLibraries.push( line.substring( 7 ).trim() );
|
||||
|
||||
} else if ( _map_use_pattern.test( line ) ) {
|
||||
|
||||
// the line is parsed but ignored since the loader assumes textures are defined MTL files
|
||||
// (according to https://www.okino.com/conv/imp_wave.htm, 'usemap' is the old-style Wavefront texture reference method)
|
||||
|
||||
console.warn( 'THREE.OBJLoader: Rendering identifier "usemap" not supported. Textures must be defined in MTL files.' );
|
||||
|
||||
} else if ( lineFirstChar === 's' ) {
|
||||
|
||||
result = line.split( ' ' );
|
||||
|
||||
// smooth shading
|
||||
|
||||
// @todo Handle files that have varying smooth values for a set of faces inside one geometry,
|
||||
// but does not define a usemtl for each face set.
|
||||
// This should be detected and a dummy material created (later MultiMaterial and geometry groups).
|
||||
// This requires some care to not create extra material on each smooth value for "normal" obj files.
|
||||
// where explicit usemtl defines geometry groups.
|
||||
// Example asset: examples/models/obj/cerberus/Cerberus.obj
|
||||
|
||||
/*
|
||||
* http://paulbourke.net/dataformats/obj/
|
||||
* or
|
||||
* http://www.cs.utah.edu/~boulos/cs3505/obj_spec.pdf
|
||||
*
|
||||
* From chapter "Grouping" Syntax explanation "s group_number":
|
||||
* "group_number is the smoothing group number. To turn off smoothing groups, use a value of 0 or off.
|
||||
* Polygonal elements use group numbers to put elements in different smoothing groups. For free-form
|
||||
* surfaces, smoothing groups are either turned on or off; there is no difference between values greater
|
||||
* than 0."
|
||||
*/
|
||||
if ( result.length > 1 ) {
|
||||
|
||||
const value = result[ 1 ].trim().toLowerCase();
|
||||
state.object.smooth = ( value !== '0' && value !== 'off' );
|
||||
|
||||
} else {
|
||||
|
||||
// ZBrush can produce "s" lines #11707
|
||||
state.object.smooth = true;
|
||||
|
||||
}
|
||||
|
||||
const material = state.object.currentMaterial();
|
||||
if ( material ) material.smooth = state.object.smooth;
|
||||
|
||||
} else {
|
||||
|
||||
// Handle null terminated files without exception
|
||||
if ( line === '\0' ) continue;
|
||||
|
||||
console.warn( 'THREE.OBJLoader: Unexpected line: "' + line + '"' );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
state.finalize();
|
||||
|
||||
const container = new Group();
|
||||
container.materialLibraries = [].concat( state.materialLibraries );
|
||||
|
||||
const hasPrimitives = ! ( state.objects.length === 1 && state.objects[ 0 ].geometry.vertices.length === 0 );
|
||||
|
||||
if ( hasPrimitives === true ) {
|
||||
|
||||
for ( let i = 0, l = state.objects.length; i < l; i ++ ) {
|
||||
|
||||
const object = state.objects[ i ];
|
||||
const geometry = object.geometry;
|
||||
const materials = object.materials;
|
||||
const isLine = ( geometry.type === 'Line' );
|
||||
const isPoints = ( geometry.type === 'Points' );
|
||||
let hasVertexColors = false;
|
||||
|
||||
// Skip o/g line declarations that did not follow with any faces
|
||||
if ( geometry.vertices.length === 0 ) continue;
|
||||
|
||||
const buffergeometry = new BufferGeometry();
|
||||
|
||||
buffergeometry.setAttribute( 'position', new Float32BufferAttribute( geometry.vertices, 3 ) );
|
||||
|
||||
if ( geometry.normals.length > 0 ) {
|
||||
|
||||
buffergeometry.setAttribute( 'normal', new Float32BufferAttribute( geometry.normals, 3 ) );
|
||||
|
||||
}
|
||||
|
||||
if ( geometry.colors.length > 0 ) {
|
||||
|
||||
hasVertexColors = true;
|
||||
buffergeometry.setAttribute( 'color', new Float32BufferAttribute( geometry.colors, 3 ) );
|
||||
|
||||
}
|
||||
|
||||
if ( geometry.hasUVIndices === true ) {
|
||||
|
||||
buffergeometry.setAttribute( 'uv', new Float32BufferAttribute( geometry.uvs, 2 ) );
|
||||
|
||||
}
|
||||
|
||||
// Create materials
|
||||
|
||||
const createdMaterials = [];
|
||||
|
||||
for ( let mi = 0, miLen = materials.length; mi < miLen; mi ++ ) {
|
||||
|
||||
const sourceMaterial = materials[ mi ];
|
||||
const materialHash = sourceMaterial.name + '_' + sourceMaterial.smooth + '_' + hasVertexColors;
|
||||
let material = state.materials[ materialHash ];
|
||||
|
||||
if ( this.materials !== null ) {
|
||||
|
||||
material = this.materials.create( sourceMaterial.name );
|
||||
|
||||
// mtl etc. loaders probably can't create line materials correctly, copy properties to a line material.
|
||||
if ( isLine && material && ! ( material instanceof LineBasicMaterial ) ) {
|
||||
|
||||
const materialLine = new LineBasicMaterial();
|
||||
Material.prototype.copy.call( materialLine, material );
|
||||
materialLine.color.copy( material.color );
|
||||
material = materialLine;
|
||||
|
||||
} else if ( isPoints && material && ! ( material instanceof PointsMaterial ) ) {
|
||||
|
||||
const materialPoints = new PointsMaterial( { size: 10, sizeAttenuation: false } );
|
||||
Material.prototype.copy.call( materialPoints, material );
|
||||
materialPoints.color.copy( material.color );
|
||||
materialPoints.map = material.map;
|
||||
material = materialPoints;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if ( material === undefined ) {
|
||||
|
||||
if ( isLine ) {
|
||||
|
||||
material = new LineBasicMaterial();
|
||||
|
||||
} else if ( isPoints ) {
|
||||
|
||||
material = new PointsMaterial( { size: 1, sizeAttenuation: false } );
|
||||
|
||||
} else {
|
||||
|
||||
material = new MeshPhongMaterial();
|
||||
|
||||
}
|
||||
|
||||
material.name = sourceMaterial.name;
|
||||
material.flatShading = sourceMaterial.smooth ? false : true;
|
||||
material.vertexColors = hasVertexColors;
|
||||
|
||||
state.materials[ materialHash ] = material;
|
||||
|
||||
}
|
||||
|
||||
createdMaterials.push( material );
|
||||
|
||||
}
|
||||
|
||||
// Create mesh
|
||||
|
||||
let mesh;
|
||||
|
||||
if ( createdMaterials.length > 1 ) {
|
||||
|
||||
for ( let mi = 0, miLen = materials.length; mi < miLen; mi ++ ) {
|
||||
|
||||
const sourceMaterial = materials[ mi ];
|
||||
buffergeometry.addGroup( sourceMaterial.groupStart, sourceMaterial.groupCount, mi );
|
||||
|
||||
}
|
||||
|
||||
if ( isLine ) {
|
||||
|
||||
mesh = new LineSegments( buffergeometry, createdMaterials );
|
||||
|
||||
} else if ( isPoints ) {
|
||||
|
||||
mesh = new Points( buffergeometry, createdMaterials );
|
||||
|
||||
} else {
|
||||
|
||||
mesh = new Mesh( buffergeometry, createdMaterials );
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if ( isLine ) {
|
||||
|
||||
mesh = new LineSegments( buffergeometry, createdMaterials[ 0 ] );
|
||||
|
||||
} else if ( isPoints ) {
|
||||
|
||||
mesh = new Points( buffergeometry, createdMaterials[ 0 ] );
|
||||
|
||||
} else {
|
||||
|
||||
mesh = new Mesh( buffergeometry, createdMaterials[ 0 ] );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
mesh.name = object.name;
|
||||
|
||||
container.add( mesh );
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
// if there is only the default parser state object with no geometry data, interpret data as point cloud
|
||||
|
||||
if ( state.vertices.length > 0 ) {
|
||||
|
||||
const material = new PointsMaterial( { size: 1, sizeAttenuation: false } );
|
||||
|
||||
const buffergeometry = new BufferGeometry();
|
||||
|
||||
buffergeometry.setAttribute( 'position', new Float32BufferAttribute( state.vertices, 3 ) );
|
||||
|
||||
if ( state.colors.length > 0 && state.colors[ 0 ] !== undefined ) {
|
||||
|
||||
buffergeometry.setAttribute( 'color', new Float32BufferAttribute( state.colors, 3 ) );
|
||||
material.vertexColors = true;
|
||||
|
||||
}
|
||||
|
||||
const points = new Points( buffergeometry, material );
|
||||
container.add( points );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return container;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { OBJLoader };
|
||||
@@ -1,795 +0,0 @@
|
||||
import {
|
||||
EventDispatcher,
|
||||
MOUSE,
|
||||
Quaternion,
|
||||
Spherical,
|
||||
TOUCH,
|
||||
Vector2,
|
||||
Vector3
|
||||
} from 'three';
|
||||
|
||||
// This set of controls performs orbiting, dollying (zooming), and panning.
|
||||
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
|
||||
//
|
||||
// Orbit - left mouse / touch: one-finger move
|
||||
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
|
||||
// Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
|
||||
|
||||
const _changeEvent = { type: 'change' };
|
||||
const _startEvent = { type: 'start' };
|
||||
const _endEvent = { type: 'end' };
|
||||
|
||||
class OrbitControls extends EventDispatcher {
|
||||
constructor( object, domElement ) {
|
||||
super();
|
||||
if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );
|
||||
if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
|
||||
this.object = object;
|
||||
this.domElement = domElement;
|
||||
|
||||
// Set to false to disable this control
|
||||
this.enabled = true;
|
||||
|
||||
// "target" sets the location of focus, where the object orbits around
|
||||
this.target = new Vector3();
|
||||
|
||||
// How far you can dolly in and out ( PerspectiveCamera only )
|
||||
this.minDistance = 0;
|
||||
this.maxDistance = Infinity;
|
||||
|
||||
// How far you can zoom in and out ( OrthographicCamera only )
|
||||
this.minZoom = 0;
|
||||
this.maxZoom = Infinity;
|
||||
|
||||
// How far you can orbit vertically, upper and lower limits.
|
||||
// Range is 0 to Math.PI radians.
|
||||
this.minPolarAngle = 0; // radians
|
||||
this.maxPolarAngle = Math.PI; // radians
|
||||
|
||||
// How far you can orbit horizontally, upper and lower limits.
|
||||
// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
|
||||
this.minAzimuthAngle = - Infinity; // radians
|
||||
this.maxAzimuthAngle = Infinity; // radians
|
||||
|
||||
// Set to true to enable damping (inertia)
|
||||
// If damping is enabled, you must call controls.update() in your animation loop
|
||||
this.enableDamping = false;
|
||||
this.dampingFactor = 0.05;
|
||||
|
||||
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
|
||||
// Set to false to disable zooming
|
||||
this.enableZoom = true;
|
||||
this.zoomSpeed = 1.0;
|
||||
|
||||
// Set to false to disable rotating
|
||||
this.enableRotate = true;
|
||||
this.rotateSpeed = 1.0;
|
||||
|
||||
// Set to false to disable panning
|
||||
this.enablePan = true;
|
||||
this.panSpeed = 1.0;
|
||||
this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
|
||||
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
|
||||
|
||||
// Set to true to automatically rotate around the target
|
||||
// If auto-rotate is enabled, you must call controls.update() in your animation loop
|
||||
this.autoRotate = false;
|
||||
this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
|
||||
|
||||
// The four arrow keys
|
||||
this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
|
||||
|
||||
// Mouse buttons
|
||||
this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
|
||||
|
||||
// Touch fingers
|
||||
this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
|
||||
|
||||
// for reset
|
||||
this.target0 = this.target.clone();
|
||||
this.position0 = this.object.position.clone();
|
||||
this.zoom0 = this.object.zoom;
|
||||
|
||||
// the target DOM element for key events
|
||||
this._domElementKeyEvents = null;
|
||||
|
||||
//
|
||||
// public methods
|
||||
//
|
||||
|
||||
this.getPolarAngle = function () {
|
||||
return spherical.phi;
|
||||
};
|
||||
|
||||
this.getAzimuthalAngle = function () {
|
||||
return spherical.theta;
|
||||
};
|
||||
|
||||
this.listenToKeyEvents = function ( domElement ) {
|
||||
domElement.addEventListener( 'keydown', onKeyDown );
|
||||
this._domElementKeyEvents = domElement;
|
||||
};
|
||||
|
||||
this.saveState = function () {
|
||||
scope.target0.copy( scope.target );
|
||||
scope.position0.copy( scope.object.position );
|
||||
scope.zoom0 = scope.object.zoom;
|
||||
};
|
||||
|
||||
this.reset = function () {
|
||||
scope.target.copy( scope.target0 );
|
||||
scope.object.position.copy( scope.position0 );
|
||||
scope.object.zoom = scope.zoom0;
|
||||
scope.object.updateProjectionMatrix();
|
||||
scope.dispatchEvent( _changeEvent );
|
||||
scope.update();
|
||||
state = STATE.NONE;
|
||||
};
|
||||
|
||||
// this method is exposed, but perhaps it would be better if we can make it private...
|
||||
this.update = function () {
|
||||
const offset = new Vector3();
|
||||
// so camera.up is the orbit axis
|
||||
const quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
|
||||
const quatInverse = quat.clone().invert();
|
||||
const lastPosition = new Vector3();
|
||||
const lastQuaternion = new Quaternion();
|
||||
const twoPI = 2 * Math.PI;
|
||||
return function update() {
|
||||
const position = scope.object.position;
|
||||
offset.copy( position ).sub( scope.target );
|
||||
// rotate offset to "y-axis-is-up" space
|
||||
offset.applyQuaternion( quat );
|
||||
// angle from z-axis around y-axis
|
||||
spherical.setFromVector3( offset );
|
||||
if ( scope.autoRotate && state === STATE.NONE ) {
|
||||
rotateLeft( getAutoRotationAngle() );
|
||||
}
|
||||
if ( scope.enableDamping ) {
|
||||
spherical.theta += sphericalDelta.theta * scope.dampingFactor;
|
||||
spherical.phi += sphericalDelta.phi * scope.dampingFactor;
|
||||
} else {
|
||||
spherical.theta += sphericalDelta.theta;
|
||||
spherical.phi += sphericalDelta.phi;
|
||||
}
|
||||
|
||||
// restrict theta to be between desired limits
|
||||
let min = scope.minAzimuthAngle;
|
||||
let max = scope.maxAzimuthAngle;
|
||||
if ( isFinite( min ) && isFinite( max ) ) {
|
||||
if ( min < - Math.PI ) min += twoPI; else if ( min > Math.PI ) min -= twoPI;
|
||||
if ( max < - Math.PI ) max += twoPI; else if ( max > Math.PI ) max -= twoPI;
|
||||
if ( min <= max ) {
|
||||
spherical.theta = Math.max( min, Math.min( max, spherical.theta ) );
|
||||
} else {
|
||||
spherical.theta = ( spherical.theta > ( min + max ) / 2 ) ?
|
||||
Math.max( min, spherical.theta ) :
|
||||
Math.min( max, spherical.theta );
|
||||
}
|
||||
}
|
||||
|
||||
// restrict phi to be between desired limits
|
||||
spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
|
||||
spherical.makeSafe();
|
||||
spherical.radius *= scale;
|
||||
|
||||
// restrict radius to be between desired limits
|
||||
spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
|
||||
|
||||
// move target to panned location
|
||||
if ( scope.enableDamping === true ) {
|
||||
scope.target.addScaledVector( panOffset, scope.dampingFactor );
|
||||
} else {
|
||||
scope.target.add( panOffset );
|
||||
}
|
||||
offset.setFromSpherical( spherical );
|
||||
// rotate offset back to "camera-up-vector-is-up" space
|
||||
offset.applyQuaternion( quatInverse );
|
||||
position.copy( scope.target ).add( offset );
|
||||
scope.object.lookAt( scope.target );
|
||||
if ( scope.enableDamping === true ) {
|
||||
sphericalDelta.theta *= ( 1 - scope.dampingFactor );
|
||||
sphericalDelta.phi *= ( 1 - scope.dampingFactor );
|
||||
panOffset.multiplyScalar( 1 - scope.dampingFactor );
|
||||
} else {
|
||||
sphericalDelta.set( 0, 0, 0 );
|
||||
panOffset.set( 0, 0, 0 );
|
||||
}
|
||||
scale = 1;
|
||||
|
||||
// update condition is:
|
||||
// min(camera displacement, camera rotation in radians)^2 > EPS
|
||||
// using small-angle approximation cos(x/2) = 1 - x^2 / 8
|
||||
|
||||
if ( zoomChanged ||
|
||||
lastPosition.distanceToSquared( scope.object.position ) > EPS ||
|
||||
8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
|
||||
scope.dispatchEvent( _changeEvent );
|
||||
lastPosition.copy( scope.object.position );
|
||||
lastQuaternion.copy( scope.object.quaternion );
|
||||
zoomChanged = false;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
}();
|
||||
|
||||
this.dispose = function () {
|
||||
scope.domElement.removeEventListener( 'contextmenu', onContextMenu );
|
||||
scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
|
||||
scope.domElement.removeEventListener( 'wheel', onMouseWheel );
|
||||
scope.domElement.removeEventListener( 'touchstart', onTouchStart );
|
||||
scope.domElement.removeEventListener( 'touchend', onTouchEnd );
|
||||
scope.domElement.removeEventListener( 'touchmove', onTouchMove );
|
||||
scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
|
||||
scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
|
||||
if ( scope._domElementKeyEvents !== null ) {
|
||||
scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
|
||||
}
|
||||
//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
|
||||
};
|
||||
|
||||
//
|
||||
// internals
|
||||
//
|
||||
|
||||
const scope = this;
|
||||
|
||||
const STATE = {
|
||||
NONE: - 1,
|
||||
ROTATE: 0,
|
||||
DOLLY: 1,
|
||||
PAN: 2,
|
||||
TOUCH_ROTATE: 3,
|
||||
TOUCH_PAN: 4,
|
||||
TOUCH_DOLLY_PAN: 5,
|
||||
TOUCH_DOLLY_ROTATE: 6
|
||||
};
|
||||
|
||||
let state = STATE.NONE;
|
||||
|
||||
const EPS = 0.000001;
|
||||
|
||||
// current position in spherical coordinates
|
||||
const spherical = new Spherical();
|
||||
const sphericalDelta = new Spherical();
|
||||
|
||||
let scale = 1;
|
||||
const panOffset = new Vector3();
|
||||
let zoomChanged = false;
|
||||
|
||||
const rotateStart = new Vector2();
|
||||
const rotateEnd = new Vector2();
|
||||
const rotateDelta = new Vector2();
|
||||
|
||||
const panStart = new Vector2();
|
||||
const panEnd = new Vector2();
|
||||
const panDelta = new Vector2();
|
||||
|
||||
const dollyStart = new Vector2();
|
||||
const dollyEnd = new Vector2();
|
||||
const dollyDelta = new Vector2();
|
||||
|
||||
function getAutoRotationAngle() {
|
||||
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
|
||||
}
|
||||
|
||||
function getZoomScale() {
|
||||
return Math.pow( 0.95, scope.zoomSpeed );
|
||||
}
|
||||
|
||||
function rotateLeft( angle ) {
|
||||
sphericalDelta.theta -= angle;
|
||||
}
|
||||
|
||||
function rotateUp( angle ) {
|
||||
sphericalDelta.phi -= angle;
|
||||
}
|
||||
|
||||
const panLeft = function () {
|
||||
const v = new Vector3();
|
||||
return function panLeft( distance, objectMatrix ) {
|
||||
v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
|
||||
v.multiplyScalar( - distance );
|
||||
panOffset.add( v );
|
||||
};
|
||||
}();
|
||||
|
||||
const panUp = function () {
|
||||
const v = new Vector3();
|
||||
return function panUp( distance, objectMatrix ) {
|
||||
if ( scope.screenSpacePanning === true ) {
|
||||
v.setFromMatrixColumn( objectMatrix, 1 );
|
||||
} else {
|
||||
v.setFromMatrixColumn( objectMatrix, 0 );
|
||||
v.crossVectors( scope.object.up, v );
|
||||
}
|
||||
v.multiplyScalar( distance );
|
||||
panOffset.add( v );
|
||||
};
|
||||
}();
|
||||
|
||||
// deltaX and deltaY are in pixels; right and down are positive
|
||||
const pan = function () {
|
||||
const offset = new Vector3();
|
||||
return function pan( deltaX, deltaY ) {
|
||||
const element = scope.domElement;
|
||||
if ( scope.object.isPerspectiveCamera ) {
|
||||
// perspective
|
||||
const position = scope.object.position;
|
||||
offset.copy( position ).sub( scope.target );
|
||||
let targetDistance = offset.length();
|
||||
// half of the fov is center to top of screen
|
||||
targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
|
||||
// we use only clientHeight here so aspect ratio does not distort speed
|
||||
panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
|
||||
panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
|
||||
} else if ( scope.object.isOrthographicCamera ) {
|
||||
// orthographic
|
||||
panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
|
||||
panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
|
||||
} else {
|
||||
// camera neither orthographic nor perspective
|
||||
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
|
||||
scope.enablePan = false;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
function dollyOut( dollyScale ) {
|
||||
if ( scope.object.isPerspectiveCamera ) {
|
||||
scale /= dollyScale;
|
||||
} else if ( scope.object.isOrthographicCamera ) {
|
||||
scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
|
||||
scope.object.updateProjectionMatrix();
|
||||
zoomChanged = true;
|
||||
} else {
|
||||
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
|
||||
scope.enableZoom = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function dollyIn( dollyScale ) {
|
||||
if ( scope.object.isPerspectiveCamera ) {
|
||||
scale *= dollyScale;
|
||||
} else if ( scope.object.isOrthographicCamera ) {
|
||||
scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
|
||||
scope.object.updateProjectionMatrix();
|
||||
zoomChanged = true;
|
||||
} else {
|
||||
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
|
||||
scope.enableZoom = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
// event callbacks - update the object state
|
||||
//
|
||||
function handleMouseDownRotate( event ) {
|
||||
rotateStart.set( event.clientX, event.clientY );
|
||||
}
|
||||
|
||||
function handleMouseDownDolly( event ) {
|
||||
dollyStart.set( event.clientX, event.clientY );
|
||||
}
|
||||
|
||||
function handleMouseDownPan( event ) {
|
||||
panStart.set( event.clientX, event.clientY );
|
||||
}
|
||||
|
||||
function handleMouseMoveRotate( event ) {
|
||||
rotateEnd.set( event.clientX, event.clientY );
|
||||
rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
|
||||
const element = scope.domElement;
|
||||
rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
|
||||
rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
|
||||
rotateStart.copy( rotateEnd );
|
||||
scope.update();
|
||||
}
|
||||
|
||||
function handleMouseMoveDolly( event ) {
|
||||
dollyEnd.set( event.clientX, event.clientY );
|
||||
dollyDelta.subVectors( dollyEnd, dollyStart );
|
||||
if ( dollyDelta.y > 0 ) {
|
||||
dollyOut( getZoomScale() );
|
||||
} else if ( dollyDelta.y < 0 ) {
|
||||
dollyIn( getZoomScale() );
|
||||
}
|
||||
dollyStart.copy( dollyEnd );
|
||||
scope.update();
|
||||
}
|
||||
|
||||
function handleMouseMovePan( event ) {
|
||||
panEnd.set( event.clientX, event.clientY );
|
||||
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
|
||||
pan( panDelta.x, panDelta.y );
|
||||
panStart.copy( panEnd );
|
||||
scope.update();
|
||||
}
|
||||
|
||||
function handleMouseUp( /*event*/ ) {
|
||||
// no-op
|
||||
}
|
||||
|
||||
function handleMouseWheel( event ) {
|
||||
if ( event.deltaY < 0 ) {
|
||||
dollyIn( getZoomScale() );
|
||||
} else if ( event.deltaY > 0 ) {
|
||||
dollyOut( getZoomScale() );
|
||||
}
|
||||
scope.update();
|
||||
}
|
||||
|
||||
function handleKeyDown( event ) {
|
||||
let needsUpdate = false;
|
||||
switch ( event.code ) {
|
||||
case scope.keys.UP:
|
||||
pan( 0, scope.keyPanSpeed );
|
||||
needsUpdate = true;
|
||||
break;
|
||||
case scope.keys.BOTTOM:
|
||||
pan( 0, - scope.keyPanSpeed );
|
||||
needsUpdate = true;
|
||||
break;
|
||||
case scope.keys.LEFT:
|
||||
pan( scope.keyPanSpeed, 0 );
|
||||
needsUpdate = true;
|
||||
break;
|
||||
case scope.keys.RIGHT:
|
||||
pan( - scope.keyPanSpeed, 0 );
|
||||
needsUpdate = true;
|
||||
break;
|
||||
}
|
||||
if ( needsUpdate ) {
|
||||
// prevent the browser from scrolling on cursor keys
|
||||
event.preventDefault();
|
||||
scope.update();
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchStartRotate( event ) {
|
||||
if ( event.touches.length == 1 ) {
|
||||
rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
||||
} else {
|
||||
const x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
|
||||
const y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
|
||||
rotateStart.set( x, y );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function handleTouchStartPan( event ) {
|
||||
if ( event.touches.length == 1 ) {
|
||||
panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
||||
} else {
|
||||
const x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
|
||||
const y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
|
||||
panStart.set( x, y );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function handleTouchStartDolly( event ) {
|
||||
const dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
||||
const dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
|
||||
const distance = Math.sqrt( dx * dx + dy * dy );
|
||||
dollyStart.set( 0, distance );
|
||||
}
|
||||
|
||||
function handleTouchStartDollyPan( event ) {
|
||||
if ( scope.enableZoom ) handleTouchStartDolly( event );
|
||||
if ( scope.enablePan ) handleTouchStartPan( event );
|
||||
}
|
||||
|
||||
function handleTouchStartDollyRotate( event ) {
|
||||
if ( scope.enableZoom ) handleTouchStartDolly( event );
|
||||
if ( scope.enableRotate ) handleTouchStartRotate( event );
|
||||
}
|
||||
|
||||
function handleTouchMoveRotate( event ) {
|
||||
if ( event.touches.length == 1 ) {
|
||||
rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
||||
} else {
|
||||
const x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
|
||||
const y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
|
||||
rotateEnd.set( x, y );
|
||||
}
|
||||
rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
|
||||
const element = scope.domElement;
|
||||
rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
|
||||
rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
|
||||
rotateStart.copy( rotateEnd );
|
||||
}
|
||||
|
||||
function handleTouchMovePan( event ) {
|
||||
if ( event.touches.length == 1 ) {
|
||||
panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
||||
} else {
|
||||
const x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
|
||||
const y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
|
||||
panEnd.set( x, y );
|
||||
}
|
||||
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
|
||||
pan( panDelta.x, panDelta.y );
|
||||
panStart.copy( panEnd );
|
||||
}
|
||||
|
||||
function handleTouchMoveDolly( event ) {
|
||||
const dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
||||
const dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
|
||||
const distance = Math.sqrt( dx * dx + dy * dy );
|
||||
dollyEnd.set( 0, distance );
|
||||
dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
|
||||
dollyOut( dollyDelta.y );
|
||||
dollyStart.copy( dollyEnd );
|
||||
}
|
||||
|
||||
function handleTouchMoveDollyPan( event ) {
|
||||
if ( scope.enableZoom ) handleTouchMoveDolly( event );
|
||||
if ( scope.enablePan ) handleTouchMovePan( event );
|
||||
}
|
||||
|
||||
function handleTouchMoveDollyRotate( event ) {
|
||||
if ( scope.enableZoom ) handleTouchMoveDolly( event );
|
||||
if ( scope.enableRotate ) handleTouchMoveRotate( event );
|
||||
}
|
||||
|
||||
function handleTouchEnd( /*event*/ ) {
|
||||
// no-op
|
||||
}
|
||||
|
||||
//
|
||||
// event handlers - FSM: listen for events and reset state
|
||||
//
|
||||
|
||||
function onPointerDown( event ) {
|
||||
if ( scope.enabled === false ) return;
|
||||
switch ( event.pointerType ) {
|
||||
case 'mouse':
|
||||
case 'pen':
|
||||
onMouseDown( event );
|
||||
break;
|
||||
// TODO touch
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerMove( event ) {
|
||||
if ( scope.enabled === false ) return;
|
||||
switch ( event.pointerType ) {
|
||||
case 'mouse':
|
||||
case 'pen':
|
||||
onMouseMove( event );
|
||||
break;
|
||||
// TODO touch
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onPointerUp( event ) {
|
||||
switch ( event.pointerType ) {
|
||||
case 'mouse':
|
||||
case 'pen':
|
||||
onMouseUp( event );
|
||||
break;
|
||||
// TODO touch
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown( event ) {
|
||||
// Prevent the browser from scrolling.
|
||||
event.preventDefault();
|
||||
// Manually set the focus since calling preventDefault above
|
||||
// prevents the browser from setting it automatically.
|
||||
scope.domElement.focus ? scope.domElement.focus() : window.focus();
|
||||
let mouseAction;
|
||||
switch ( event.button ) {
|
||||
case 0:
|
||||
mouseAction = scope.mouseButtons.LEFT;
|
||||
break;
|
||||
case 1:
|
||||
mouseAction = scope.mouseButtons.MIDDLE;
|
||||
break;
|
||||
case 2:
|
||||
mouseAction = scope.mouseButtons.RIGHT;
|
||||
break;
|
||||
default:
|
||||
mouseAction = - 1;
|
||||
}
|
||||
|
||||
switch ( mouseAction ) {
|
||||
case MOUSE.DOLLY:
|
||||
if ( scope.enableZoom === false ) return;
|
||||
handleMouseDownDolly( event );
|
||||
state = STATE.DOLLY;
|
||||
break;
|
||||
case MOUSE.ROTATE:
|
||||
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
|
||||
if ( scope.enablePan === false ) return;
|
||||
handleMouseDownPan( event );
|
||||
state = STATE.PAN;
|
||||
} else {
|
||||
if ( scope.enableRotate === false ) return;
|
||||
handleMouseDownRotate( event );
|
||||
state = STATE.ROTATE;
|
||||
}
|
||||
break;
|
||||
case MOUSE.PAN:
|
||||
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
|
||||
if ( scope.enableRotate === false ) return;
|
||||
handleMouseDownRotate( event );
|
||||
state = STATE.ROTATE;
|
||||
} else {
|
||||
if ( scope.enablePan === false ) return;
|
||||
handleMouseDownPan( event );
|
||||
state = STATE.PAN;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
state = STATE.NONE;
|
||||
}
|
||||
|
||||
if ( state !== STATE.NONE ) {
|
||||
scope.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
|
||||
scope.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
|
||||
scope.dispatchEvent( _startEvent );
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseMove( event ) {
|
||||
if ( scope.enabled === false ) return;
|
||||
event.preventDefault();
|
||||
switch ( state ) {
|
||||
case STATE.ROTATE:
|
||||
if ( scope.enableRotate === false ) return;
|
||||
handleMouseMoveRotate( event );
|
||||
break;
|
||||
case STATE.DOLLY:
|
||||
if ( scope.enableZoom === false ) return;
|
||||
handleMouseMoveDolly( event );
|
||||
break;
|
||||
case STATE.PAN:
|
||||
if ( scope.enablePan === false ) return;
|
||||
handleMouseMovePan( event );
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseUp( event ) {
|
||||
scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
|
||||
scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
|
||||
if ( scope.enabled === false ) return;
|
||||
handleMouseUp( event );
|
||||
scope.dispatchEvent( _endEvent );
|
||||
state = STATE.NONE;
|
||||
}
|
||||
|
||||
function onMouseWheel( event ) {
|
||||
if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
|
||||
event.preventDefault();
|
||||
scope.dispatchEvent( _startEvent );
|
||||
handleMouseWheel( event );
|
||||
scope.dispatchEvent( _endEvent );
|
||||
}
|
||||
|
||||
function onKeyDown( event ) {
|
||||
if ( scope.enabled === false || scope.enablePan === false ) return;
|
||||
handleKeyDown( event );
|
||||
}
|
||||
|
||||
function onTouchStart( event ) {
|
||||
if ( scope.enabled === false ) return;
|
||||
event.preventDefault(); // prevent scrolling
|
||||
switch ( event.touches.length ) {
|
||||
case 1:
|
||||
switch ( scope.touches.ONE ) {
|
||||
case TOUCH.ROTATE:
|
||||
if ( scope.enableRotate === false ) return;
|
||||
handleTouchStartRotate( event );
|
||||
state = STATE.TOUCH_ROTATE;
|
||||
break;
|
||||
case TOUCH.PAN:
|
||||
if ( scope.enablePan === false ) return;
|
||||
handleTouchStartPan( event );
|
||||
state = STATE.TOUCH_PAN;
|
||||
break;
|
||||
default:
|
||||
state = STATE.NONE;
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
switch ( scope.touches.TWO ) {
|
||||
case TOUCH.DOLLY_PAN:
|
||||
if ( scope.enableZoom === false && scope.enablePan === false ) return;
|
||||
handleTouchStartDollyPan( event );
|
||||
state = STATE.TOUCH_DOLLY_PAN;
|
||||
break;
|
||||
case TOUCH.DOLLY_ROTATE:
|
||||
if ( scope.enableZoom === false && scope.enableRotate === false ) return;
|
||||
handleTouchStartDollyRotate( event );
|
||||
state = STATE.TOUCH_DOLLY_ROTATE;
|
||||
break;
|
||||
default:
|
||||
state = STATE.NONE;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
state = STATE.NONE;
|
||||
}
|
||||
if ( state !== STATE.NONE ) {
|
||||
scope.dispatchEvent( _startEvent );
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchMove( event ) {
|
||||
if ( scope.enabled === false ) return;
|
||||
event.preventDefault(); // prevent scrolling
|
||||
switch ( state ) {
|
||||
case STATE.TOUCH_ROTATE:
|
||||
if ( scope.enableRotate === false ) return;
|
||||
handleTouchMoveRotate( event );
|
||||
scope.update();
|
||||
break;
|
||||
case STATE.TOUCH_PAN:
|
||||
if ( scope.enablePan === false ) return;
|
||||
handleTouchMovePan( event );
|
||||
scope.update();
|
||||
break;
|
||||
case STATE.TOUCH_DOLLY_PAN:
|
||||
if ( scope.enableZoom === false && scope.enablePan === false ) return;
|
||||
handleTouchMoveDollyPan( event );
|
||||
scope.update();
|
||||
break;
|
||||
case STATE.TOUCH_DOLLY_ROTATE:
|
||||
if ( scope.enableZoom === false && scope.enableRotate === false ) return;
|
||||
handleTouchMoveDollyRotate( event );
|
||||
scope.update();
|
||||
break;
|
||||
default:
|
||||
state = STATE.NONE;
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchEnd( event ) {
|
||||
if ( scope.enabled === false ) return;
|
||||
handleTouchEnd( event );
|
||||
scope.dispatchEvent( _endEvent );
|
||||
state = STATE.NONE;
|
||||
}
|
||||
|
||||
function onContextMenu( event ) {
|
||||
if ( scope.enabled === false ) return;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
scope.domElement.addEventListener( 'contextmenu', onContextMenu );
|
||||
scope.domElement.addEventListener( 'pointerdown', onPointerDown );
|
||||
scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
|
||||
scope.domElement.addEventListener( 'touchstart', onTouchStart, { passive: false } );
|
||||
scope.domElement.addEventListener( 'touchend', onTouchEnd );
|
||||
scope.domElement.addEventListener( 'touchmove', onTouchMove, { passive: false } );
|
||||
// force an update at start
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// This set of controls performs orbiting, dollying (zooming), and panning.
|
||||
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
|
||||
// This is very similar to OrbitControls, another set of touch behavior
|
||||
//
|
||||
// Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
|
||||
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
|
||||
// Pan - left mouse, or arrow keys / touch: one-finger move
|
||||
|
||||
class MapControls extends OrbitControls {
|
||||
constructor( object, domElement ) {
|
||||
super( object, domElement );
|
||||
this.mouseButtons.LEFT = MOUSE.ROTATE;
|
||||
this.mouseButtons.RIGHT = null;
|
||||
this.mouseButtons.MIDDLE = null;
|
||||
}
|
||||
}
|
||||
|
||||
export { OrbitControls, MapControls };
|
||||
@@ -1,22 +1,39 @@
|
||||
<script lang="ts">
|
||||
import PolycubeScene from "./threeTest.ts";
|
||||
import PolycubeScene from "./PolycubeScene.ts";
|
||||
import {onMount} from "svelte";
|
||||
import {polycubes, somaDimension, selectedCube} from "./store";
|
||||
import VoxelSpace from "./solver/VoxelSpace.ts";
|
||||
|
||||
import {polycubes, somaDimension, selectedCube, solutions, activeSolution, showingSolution} from "./store";
|
||||
|
||||
$: cube = $polycubes[$selectedCube];
|
||||
$: soln = $solutions[$activeSolution];
|
||||
let el: HTMLCanvasElement;
|
||||
let threeTest: TestScene;
|
||||
let threeTest: PolycubeScene;
|
||||
let loaded: boolean = false;
|
||||
|
||||
onMount(() => {
|
||||
threeTest = new PolycubeScene(el);
|
||||
threeTest = new PolycubeScene(el, () => loaded = true, console.log);
|
||||
});
|
||||
|
||||
$: threeTest?.setPolycube(cube.rep, $somaDimension, cube.color);
|
||||
$: {
|
||||
if (loaded) {
|
||||
if ($showingSolution) {
|
||||
const colorMap = {};
|
||||
$polycubes.forEach((polycube, i) => colorMap[i] = polycube.color);
|
||||
threeTest?.setSolution(soln, colorMap);
|
||||
} else {
|
||||
threeTest?.setPolycube(cube.rep, $somaDimension, cube.color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<canvas
|
||||
bind:this={el}
|
||||
width="640"
|
||||
height="480"
|
||||
></canvas>
|
||||
></canvas>
|
||||
|
||||
<style>
|
||||
canvas {
|
||||
border-radius: 1em;
|
||||
}
|
||||
</style>
|
||||
165
src/PolycubeScene.ts
Normal file
165
src/PolycubeScene.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
import * as THREE from 'three';
|
||||
import { OBJLoader } from './OBJLoader.js';
|
||||
import VoxelSpace from './solver/VoxelSpace';
|
||||
import type SomaSolution from "./solver/SomaSolution";
|
||||
import RotationControl from "./RotationControl";
|
||||
|
||||
export default class PolycubeScene {
|
||||
private renderer: THREE.WebGLRenderer;
|
||||
private camera: THREE.Camera;
|
||||
private mainScene: THREE.Scene;
|
||||
private polycubeMeshes: THREE.Mesh[] = [];
|
||||
private controls: RotationControl;
|
||||
private light: THREE.Light;
|
||||
private lastDims: number = 0;
|
||||
private lastColor: string = "#FF0000";
|
||||
private lastPolycube: bigint = 0n;
|
||||
private cubeMaterial: THREE.MeshPhongMaterial;
|
||||
private materials: Record<number, THREE.MeshPhongMaterial> = {};
|
||||
private cubeGeometry: THREE.BufferGeometry;
|
||||
private cubeScene: THREE.Scene;
|
||||
|
||||
constructor(el: HTMLCanvasElement, onReady: () => any, onError: (err: Error) => any) {
|
||||
this.init(el).then(onReady).catch(onError);
|
||||
}
|
||||
|
||||
private async init(el: HTMLCanvasElement) {
|
||||
this.renderer = new THREE.WebGLRenderer({canvas: el});
|
||||
this.setupCamera(el.clientWidth / el.clientHeight);
|
||||
this.setupLight();
|
||||
try {
|
||||
await this.createCubeGeometry();
|
||||
} catch (err) {
|
||||
throw new Error(err);
|
||||
}
|
||||
this.createCubeMaterial("red");
|
||||
this.mainScene = new THREE.Scene();
|
||||
this.cubeScene = new THREE.Scene();
|
||||
this.mainScene.add(this.cubeScene, this.camera);
|
||||
this.camera.add(this.light);
|
||||
this.cubeScene.rotateX(Math.PI/4);
|
||||
this.cubeScene.rotateY(Math.PI/4);
|
||||
this.controls = new RotationControl(this.cubeScene, this.camera, el);
|
||||
requestAnimationFrame((timestamp) => this.render(timestamp));
|
||||
}
|
||||
|
||||
private setupCamera(aspect: number) {
|
||||
const fov = 60;
|
||||
const near = 0.1;
|
||||
const far = 15;
|
||||
this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
||||
this.camera.position.z = 6;
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
}
|
||||
|
||||
private setPolycube(polycube: bigint, dims: number, color: string) {
|
||||
if (dims !== this.lastDims) {
|
||||
this.updateCubesFromDims(dims);
|
||||
}
|
||||
|
||||
if (polycube !== this.lastPolycube) {
|
||||
let i = 0;
|
||||
const voxelSpace = new VoxelSpace(0, [dims, dims, dims], polycube, true);
|
||||
const newDims = voxelSpace.getDims();
|
||||
this.polycubeMeshes.forEach(mesh => {
|
||||
mesh.position.set(1000, 1000, 1000);
|
||||
mesh.material = this.cubeMaterial;
|
||||
});
|
||||
voxelSpace.forEachCell((val: boolean, x: number, y: number, z: number) => {
|
||||
if (val) {
|
||||
this.polycubeMeshes[i].position.set(
|
||||
-((newDims[2] - 1)/2) + z,
|
||||
((newDims[0] - 1)/2) - x,
|
||||
-((newDims[1] - 1)/2) + y,
|
||||
);
|
||||
}
|
||||
i++;
|
||||
});
|
||||
this.lastPolycube = polycube;
|
||||
}
|
||||
|
||||
if (color !== this.lastColor) {
|
||||
this.cubeMaterial.color.set(color);
|
||||
this.lastColor = color;
|
||||
}
|
||||
}
|
||||
|
||||
private updateCubesFromDims(newDims: number) {
|
||||
const requiredCubes = newDims**3;
|
||||
if (this.polycubeMeshes.length < requiredCubes) {
|
||||
for (let i = this.polycubeMeshes.length; i < requiredCubes; i++) {
|
||||
const newCube = new THREE.Mesh(this.cubeGeometry, this.cubeMaterial);
|
||||
this.cubeScene.add(newCube);
|
||||
this.polycubeMeshes.push(newCube);
|
||||
}
|
||||
}
|
||||
if (newDims < this.lastDims || this.lastDims === 0) {
|
||||
this.polycubeMeshes.forEach(mesh => mesh.position.set(1000, 1000, 1000));
|
||||
}
|
||||
this.lastDims = newDims;
|
||||
}
|
||||
|
||||
private setSolution(solution: SomaSolution, colorMap: Record<number, string>) {
|
||||
const dims = solution.getDims();
|
||||
if (dims[0] !== this.lastDims) {
|
||||
this.updateCubesFromDims(dims[0]);
|
||||
}
|
||||
|
||||
let i = 0;
|
||||
this.polycubeMeshes.forEach(mesh => mesh.position.set(1000, 1000, 1000));
|
||||
Object.keys(colorMap).forEach(key => {
|
||||
if (!this.materials[key]) {
|
||||
this.materials[key] = this.newCubeMaterial(colorMap[key]);
|
||||
}
|
||||
})
|
||||
solution.forEachCell((val: number, x: number, y: number, z: number) => {
|
||||
this.polycubeMeshes[i].position.set(
|
||||
-((dims[2] - 1)/2) + z,
|
||||
((dims[0] - 1)/2) - x,
|
||||
-((dims[1] - 1)/2) + y,
|
||||
);
|
||||
this.polycubeMeshes[i].material = this.materials[val];
|
||||
i++;
|
||||
});
|
||||
}
|
||||
|
||||
private setupLight() {
|
||||
const color = 0xFFFFFF;
|
||||
const intensity = 1;
|
||||
this.light = new THREE.DirectionalLight(color, intensity);
|
||||
this.light.position.set(-1, 2, 4);
|
||||
}
|
||||
|
||||
private render(time: number) {
|
||||
this.renderer.render(this.mainScene, this.camera);
|
||||
requestAnimationFrame((time: number) => this.render(time));
|
||||
}
|
||||
|
||||
private async createCubeGeometry(): Promise<void> {
|
||||
const onLoaded = (obj: THREE.Mesh, resolve: () => any) => {
|
||||
this.cubeGeometry = (obj.children[0] as THREE.Mesh).geometry;
|
||||
this.cubeGeometry.computeVertexNormals();
|
||||
this.cubeGeometry.computeBoundingSphere();
|
||||
this.cubeGeometry.scale(1/this.cubeGeometry.boundingSphere.radius, 1/this.cubeGeometry.boundingSphere.radius, 1/this.cubeGeometry.boundingSphere.radius);
|
||||
resolve();
|
||||
};
|
||||
const load = (resolve: () => any, reject: (err: string) => any) => {
|
||||
const loader = new OBJLoader();
|
||||
loader.load(
|
||||
'../resources/bevel_cube.obj',
|
||||
obj => onLoaded(obj, resolve),
|
||||
() => {},
|
||||
(err) => reject(`Error loading OBJ file: ${err}`),
|
||||
);
|
||||
};
|
||||
return new Promise<void>(load);
|
||||
}
|
||||
|
||||
private newCubeMaterial(color: string) {
|
||||
return new THREE.MeshPhongMaterial({color});
|
||||
}
|
||||
|
||||
private createCubeMaterial(color: string) {
|
||||
this.cubeMaterial = this.newCubeMaterial(color);
|
||||
}
|
||||
}
|
||||
45
src/RotationControl.ts
Normal file
45
src/RotationControl.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import type * as THREE from 'three';
|
||||
|
||||
export default class RotationControls {
|
||||
private static ROTATION_FACTOR = 1/200;
|
||||
private object: THREE.Object3D;
|
||||
private element: HTMLCanvasElement;
|
||||
private respondToMovement: boolean = false;
|
||||
private lastX: number = 0;
|
||||
private lastY: number = 0;
|
||||
private yAxis: THREE.Vector3;
|
||||
private xAxis: THREE.Vector3;
|
||||
private start: THREE.Euler;
|
||||
|
||||
constructor(object: THREE.Object3D, camera: THREE.Camera, element: HTMLCanvasElement) {
|
||||
this.object = object;
|
||||
this.element = element;
|
||||
this.yAxis = object.worldToLocal(camera.up);
|
||||
this.xAxis = object.position.sub(camera.position);
|
||||
this.xAxis.divideScalar(Math.sqrt(this.xAxis.getComponent(0)**2 + this.xAxis.getComponent(1)**2 + this.xAxis.getComponent(2)**2));
|
||||
this.xAxis = this.xAxis.clone().cross(this.yAxis.clone());
|
||||
this.start = this.object.rotation.clone();
|
||||
|
||||
this.element.addEventListener('mousedown', (event) => {
|
||||
if (event.button === 1) {
|
||||
this.object.setRotationFromEuler(this.start);
|
||||
}
|
||||
if (!this.respondToMovement) {
|
||||
this.lastX = event.x;
|
||||
this.lastY = event.y;
|
||||
this.respondToMovement = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener('mousemove', (ev) => this.handleMove(ev));
|
||||
window.addEventListener('mouseup', () => this.respondToMovement = false);
|
||||
}
|
||||
|
||||
private handleMove(event: MouseEvent) {
|
||||
if (this.respondToMovement) {
|
||||
const xDiff = event.movementX * RotationControls.ROTATION_FACTOR;
|
||||
const yDiff = event.movementY * RotationControls.ROTATION_FACTOR;
|
||||
this.object.rotateOnAxis(this.yAxis, xDiff);
|
||||
this.object.rotateOnWorldAxis(this.xAxis, yDiff);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,28 @@
|
||||
<script lang="ts">
|
||||
import {isMaxDimension, isMinDimension, isMaxPolycubes, isMinPolycubes, somaDimension, polycubes} from "./store";
|
||||
|
||||
import {isMaxDimension, isMinDimension, isMaxPolycubes, isMinPolycubes, somaDimension, polycubes, solutions} from "./store";
|
||||
import SomaSolution from "./solver/SomaSolution";
|
||||
import SolutionList from "./SolutionList.svelte";
|
||||
import VoxelSpace from "./solver/VoxelSpace";
|
||||
|
||||
$: numCubes = $polycubes.length;
|
||||
$: cubes = $polycubes;
|
||||
let consoleOutput = "Press the solve button!";
|
||||
let solving = false;
|
||||
|
||||
function solve() {
|
||||
console.log("SOLVING!");
|
||||
consoleOutput = "Solving\n";
|
||||
const polycubes = cubes.map(cubeInput => cubeInput.rep);
|
||||
const worker = new Worker('../solver/main.js', {type: "module"});
|
||||
solving = true;
|
||||
worker.addEventListener('message', (event) => {
|
||||
solutions.set(event.data.map(solnData => {
|
||||
const solution = new SomaSolution(solnData.dim);
|
||||
solnData.solutionSpaces.forEach((voxelSpace, i) => solution.addSpace(new VoxelSpace(i, [solnData.dim, solnData.dim, solnData.dim], voxelSpace.space)));
|
||||
return solution;
|
||||
}));
|
||||
solving = false;
|
||||
});
|
||||
worker.postMessage({polycubes, dims: $somaDimension});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -25,8 +43,10 @@
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<button on:click={solve}>Solve</button>
|
||||
<button on:click={solve}>{solving ? 'Solving...' : 'Solve'}</button>
|
||||
</div>
|
||||
|
||||
<SolutionList/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -14,12 +14,18 @@
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<Polycube3D/>
|
||||
<div class="threedee">
|
||||
<Polycube3D/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.threedee {
|
||||
text-align: center;
|
||||
}
|
||||
.cube-input {
|
||||
}
|
||||
.input-container {
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-flow: row wrap;
|
||||
|
||||
30
src/SolutionList.svelte
Normal file
30
src/SolutionList.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import {solutions, activeSolution, showingSolution} from "./store";
|
||||
|
||||
function selectSolution(i: number) {
|
||||
activeSolution.set(i);
|
||||
showingSolution.set(true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<h3>Solutions: {$solutions.length}</h3>
|
||||
<ul>
|
||||
{#each $solutions as soln, i}
|
||||
<li class:active={$activeSolution === i} on:click={() => selectSolution(i)}>
|
||||
Solution #{i + 1}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
li:hover:not(.active) {
|
||||
background-color: #666666;
|
||||
}
|
||||
li {
|
||||
transition: background-color 200ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background-color: #ff3e00;
|
||||
}
|
||||
</style>
|
||||
@@ -96,4 +96,18 @@ export default class SomaSolution {
|
||||
clone.solutionSpaces = this.solutionSpaces.slice();
|
||||
return clone;
|
||||
}
|
||||
|
||||
getDims() {
|
||||
return [this.dim, this.dim, this.dim];
|
||||
}
|
||||
|
||||
forEachCell(cb: (val: number, x: number, y: number, z: number) => any) {
|
||||
loopStart: for (let x = 0; x < this.dim; x++) {
|
||||
for (let y = 0; y < this.dim; y++) {
|
||||
for (let z = 0; z < this.dim; z++) {
|
||||
cb(this.at(x, y, z), x, y, z);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -14,7 +14,7 @@ export default class SomaSolver {
|
||||
this.solutionCube = new VoxelSpace(0, [dimension, dimension, dimension], Array(dimension**3).fill(0));
|
||||
}
|
||||
|
||||
solve(polycubes: VoxelSpace[]) {
|
||||
async solve(polycubes: VoxelSpace[]) {
|
||||
if (polycubes.length === 0) {
|
||||
throw new Error("You must pass at least one polycube to solve the puzzle.");
|
||||
}
|
||||
@@ -22,11 +22,15 @@ export default class SomaSolver {
|
||||
if (cumulativeSize !== this.dim**3) {
|
||||
throw new Error(`The polycubes passed do not add up to exactly enough units to form a cube of dimension ${this.dim}! Got: ${cumulativeSize}, need: ${this.dim**3}`);
|
||||
}
|
||||
const combosWithRots = polycubes.slice(1).map(polycube => polycube.getUniqueRotations().map(rot => rot.getAllPositionsInCube(this.dim)).flat());
|
||||
this.solutions = [];
|
||||
const combosWithRots = polycubes.slice(1).map(polycube => polycube.getUniqueRotations().map((rot: VoxelSpace) => rot.getAllPositionsInCube(this.dim)).flat());
|
||||
const combos = [polycubes[0].getAllPositionsInCube(this.dim), ...combosWithRots];
|
||||
this.backtrackSolve(this.solutionCube, combos, new SomaSolution(this.dim));
|
||||
this.solutions = SomaSolution.filterUnique(this.solutions);
|
||||
this.solutions.forEach(sol => sol.print());
|
||||
}
|
||||
|
||||
getSolutions() {
|
||||
return this.solutions.slice();
|
||||
}
|
||||
|
||||
private backtrackSolve(workingSolution: VoxelSpace, polycubes: VoxelSpace[][], currentSoln: SomaSolution, depth = 0) {
|
||||
|
||||
@@ -37,7 +37,7 @@ export default class VoxelSpace {
|
||||
return this.space.toString(2);
|
||||
}
|
||||
|
||||
private cullEmptySpace() {
|
||||
getExtrema() {
|
||||
const extrema = {
|
||||
xMax: -Infinity,
|
||||
xMin: Infinity,
|
||||
@@ -46,7 +46,6 @@ export default class VoxelSpace {
|
||||
zMax: -Infinity,
|
||||
zMin: Infinity,
|
||||
};
|
||||
let newSpace = 0n;
|
||||
this.forEachCell((val, x, y, z) => {
|
||||
if (val) {
|
||||
extrema.xMax = Math.max(extrema.xMax, x);
|
||||
@@ -57,7 +56,13 @@ export default class VoxelSpace {
|
||||
extrema.zMin = Math.min(extrema.zMin, z);
|
||||
}
|
||||
});
|
||||
return extrema;
|
||||
}
|
||||
|
||||
private cullEmptySpace() {
|
||||
const extrema = this.getExtrema();
|
||||
let index = 0n;
|
||||
let newSpace = 0n;
|
||||
for (let x = extrema.xMin; x <= extrema.xMax; x++) {
|
||||
for (let y = extrema.yMin; y <= extrema.yMax; y++) {
|
||||
for (let z = extrema.zMin; z <= extrema.zMax; z++) {
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
props: {
|
||||
name: 'world'
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
@@ -1,109 +1,12 @@
|
||||
import SomaSolver from "./SomaSolver";
|
||||
import VoxelSpace from "./VoxelSpace";
|
||||
|
||||
const tetromino1 = new VoxelSpace(1, [3, 3, 3], [
|
||||
true, true, true,
|
||||
false, true, false,
|
||||
false, false, false,
|
||||
type SolveStartMessageData = {polycubes: bigint[], dims: number};
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
self.addEventListener('message', (event) => {
|
||||
const {polycubes, dims} = event.data as SolveStartMessageData;
|
||||
const solver = new SomaSolver(event.data.dims);
|
||||
solver.solve(polycubes.map((cubeRep, i) => new VoxelSpace(i, [dims, dims, dims], cubeRep)));
|
||||
(self as unknown as Worker).postMessage(solver.getSolutions());
|
||||
});
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
], true);
|
||||
|
||||
const tetromino2 = new VoxelSpace(2, [3, 3, 3], [
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, true, false,
|
||||
|
||||
false, true, false,
|
||||
false, true, false,
|
||||
false, true, false,
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
], true);
|
||||
|
||||
const tetromino3 = new VoxelSpace(3, [3, 3, 3], [
|
||||
true, false, false,
|
||||
true, true, false,
|
||||
false, true, false,
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
], true);
|
||||
|
||||
const tetromino4 = new VoxelSpace(4, [3, 3, 3], [
|
||||
true, true, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
|
||||
true, false, false,
|
||||
true, false, false,
|
||||
false, false, false,
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
], true);
|
||||
|
||||
const tetromino5 = new VoxelSpace(5, [3, 3, 3], [
|
||||
true, true, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
|
||||
false, true, false,
|
||||
false, true, false,
|
||||
false, false, false,
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
], true);
|
||||
|
||||
const tetromino6 = new VoxelSpace(6, [3, 3, 3], [
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, true, false,
|
||||
|
||||
false, false, false,
|
||||
false, true, false,
|
||||
false, true, true,
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
], true);
|
||||
|
||||
const triomino1 = new VoxelSpace(7, [3, 3, 3], [
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, true, false,
|
||||
|
||||
false, false, false,
|
||||
false, true, false,
|
||||
false, true, false,
|
||||
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
false, false, false,
|
||||
], true);
|
||||
|
||||
|
||||
|
||||
// const cube = new VoxelSpace([3, 3, 3], Array(3**3).fill(0));
|
||||
// cube.plus(triomino1)?.plus(tetromino2, {x: 1, y: 0, z: 1})?.print();
|
||||
|
||||
const solver = new SomaSolver(3);
|
||||
console.log("solving");
|
||||
solver.solve([triomino1, tetromino2, tetromino3, tetromino1, tetromino4, tetromino5, tetromino6]);
|
||||
|
||||
28
src/store.ts
28
src/store.ts
@@ -1,5 +1,6 @@
|
||||
import { derived, writable } from 'svelte/store';
|
||||
import { get } from 'svelte/store';
|
||||
import type SomaSolution from "./solver/SomaSolution";
|
||||
|
||||
type PolycubeInput = {
|
||||
color: string,
|
||||
@@ -15,16 +16,21 @@ const store = {
|
||||
};
|
||||
|
||||
export const selectedCube = writable(0);
|
||||
export const isMaxDimension = derived(store.somaDimension, $somaDimension => $somaDimension >= MAX_DIMS);
|
||||
export const isMinDimension = derived(store.somaDimension, $somaDimension => $somaDimension <= MIN_DIMS);
|
||||
export const isMaxPolycubes = derived([store.polycubes, store.somaDimension], ([$polycubes, $somaDimension]) => $polycubes.length >= $somaDimension ** 3);
|
||||
export const isMinPolycubes = derived(store.polycubes, ($polycubes) => $polycubes.length <= 1);
|
||||
export const isMaxDimension = derived(store.somaDimension, ($somaDimension: number) => $somaDimension >= MAX_DIMS);
|
||||
export const isMinDimension = derived(store.somaDimension, ($somaDimension: number) => $somaDimension <= MIN_DIMS);
|
||||
export const isMaxPolycubes = derived(
|
||||
[store.polycubes, store.somaDimension],
|
||||
([$polycubes, $somaDimension]: [PolycubeInput[], number]) => $polycubes.length >= $somaDimension ** 3);
|
||||
export const isMinPolycubes = derived(store.polycubes, ($polycubes: PolycubeInput[]) => $polycubes.length <= 1);
|
||||
export const solutions = writable([] as SomaSolution[]);
|
||||
export const activeSolution = writable(0);
|
||||
export const showingSolution = writable(false);
|
||||
|
||||
export const somaDimension = {
|
||||
subscribe: store.somaDimension.subscribe,
|
||||
inc() {
|
||||
if (!get(isMaxDimension)) {
|
||||
store.somaDimension.update(dims => {
|
||||
store.somaDimension.update((dims: number) => {
|
||||
polycubes.reset(dims + 1);
|
||||
return dims + 1;
|
||||
});
|
||||
@@ -32,7 +38,7 @@ export const somaDimension = {
|
||||
},
|
||||
dec() {
|
||||
if (!get(isMinDimension)) {
|
||||
store.somaDimension.update(dims => {
|
||||
store.somaDimension.update((dims: number) => {
|
||||
polycubes.reset(dims - 1);
|
||||
return dims - 1;
|
||||
});
|
||||
@@ -45,7 +51,7 @@ export const polycubes = {
|
||||
addCube() {
|
||||
const isMaxPolycubes = get(store.polycubes).length >= get(store.somaDimension) ** 3;
|
||||
if (!isMaxPolycubes) {
|
||||
store.polycubes.update(polycubes => polycubes.concat({
|
||||
store.polycubes.update((polycubes: PolycubeInput[]) => polycubes.concat({
|
||||
rep: BigInt(0),
|
||||
color: colorFromIndex(polycubes.length),
|
||||
}));
|
||||
@@ -54,7 +60,11 @@ export const polycubes = {
|
||||
removeCube() {
|
||||
const isMinPolycubes = get(store.polycubes).length <= 1;
|
||||
if (!isMinPolycubes) {
|
||||
store.polycubes.update(polycubes => polycubes.splice(0, polycubes.length - 1));
|
||||
store.polycubes.update((polycubes: PolycubeInput[]) => polycubes.splice(0, polycubes.length - 1));
|
||||
}
|
||||
const newLength = get(store.polycubes).length;
|
||||
if (newLength <= get(selectedCube)) {
|
||||
selectedCube.set(newLength - 1);
|
||||
}
|
||||
},
|
||||
toggle(cubeIndex: number, x: number, y: number, z: number) {
|
||||
@@ -76,7 +86,7 @@ export const polycubes = {
|
||||
store.polycubes.set(cubes);
|
||||
},
|
||||
reset(dims: number) {
|
||||
store.polycubes.update(polycubes => {
|
||||
store.polycubes.update((polycubes: PolycubeInput[]) => {
|
||||
const result: PolycubeInput[] = [];
|
||||
for (let i = 0; i < Math.min(polycubes.length, dims**3); i++) {
|
||||
result.push({
|
||||
|
||||
134
src/threeTest.ts
134
src/threeTest.ts
@@ -1,134 +0,0 @@
|
||||
import * as THREE from 'three';
|
||||
import { MapControls } from './OrbitControls.js';
|
||||
import VoxelSpace from './solver/VoxelSpace.js';
|
||||
import {somaDimension, polycubes} from './store';
|
||||
import {get} from 'svelte/store';
|
||||
import type { MeshPhongMaterial } from 'three';
|
||||
|
||||
export default class PolycubeScene {
|
||||
private renderer: THREE.WebGLRenderer;
|
||||
private camera: THREE.Camera;
|
||||
private mainScene: THREE.Scene;
|
||||
private polycubeMeshes: THREE.Mesh[] = [];
|
||||
private controls: typeof MapControls;
|
||||
private light: THREE.Light;
|
||||
private cameraLightScene: THREE.Group;
|
||||
private lastDims: number = 0;
|
||||
private currentPolycubeId: number = 0;
|
||||
private lastColor: string = "#FF0000";
|
||||
private lastPolycube: bigint = 0n;
|
||||
|
||||
constructor(el: HTMLCanvasElement) {
|
||||
this.renderer = new THREE.WebGLRenderer({canvas: el});
|
||||
const fov = 75;
|
||||
const aspect = el.clientWidth / el.clientHeight;
|
||||
const near = 0.1;
|
||||
const far = 10;
|
||||
this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
||||
this.camera.position.z = 5;
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
this.mainScene = new THREE.Scene();
|
||||
this.light = this.setupLight();
|
||||
this.mainScene.add(this.light);
|
||||
this.mainScene.rotateX(Math.PI/4);
|
||||
this.mainScene.rotateY(Math.PI/4);
|
||||
this.cameraLightScene = new THREE.Group();
|
||||
this.controls = new MapControls(this.camera, el);
|
||||
requestAnimationFrame((timestamp) => this.render(timestamp));
|
||||
}
|
||||
|
||||
private setPolycube(polycube: bigint, dims: number, color: string) {
|
||||
if (dims !== this.lastDims) {
|
||||
this.mainScene.remove(...this.polycubeMeshes);
|
||||
this.polycubeMeshes = [];
|
||||
this.polycubeMeshes = Array.from(Array(dims ** 3).keys()).map(() => {
|
||||
const cube = this.newRoundedCube(0.2, 3, color);
|
||||
cube.position.set(1000, 1000, 1000);
|
||||
this.mainScene.add(cube);
|
||||
return cube;
|
||||
});
|
||||
this.lastDims = dims;
|
||||
}
|
||||
|
||||
if (polycube !== this.lastPolycube) {
|
||||
let i = 0;
|
||||
const voxelSpace = new VoxelSpace(0, [dims, dims, dims], polycube);
|
||||
voxelSpace.forEachCell((val, x, y, z) => {
|
||||
if (val) {
|
||||
this.polycubeMeshes[i].position.set(
|
||||
-((dims - 1)/2) + z,
|
||||
((dims - 1)/2) - y,
|
||||
-((dims - 1)/2) + x,
|
||||
);
|
||||
} else {
|
||||
this.polycubeMeshes[i].position.set(1000, 1000, 1000);
|
||||
}
|
||||
i++;
|
||||
});
|
||||
this.lastPolycube = polycube;
|
||||
}
|
||||
|
||||
if (color !== this.lastColor) {
|
||||
this.polycubeMeshes.forEach(mesh => (mesh.material as MeshPhongMaterial).color.set(color));
|
||||
this.lastColor = color;
|
||||
}
|
||||
}
|
||||
|
||||
private updateFromCurrentPolycube() {
|
||||
const {color: cubeColor, rep: cubeRep} = get(polycubes)[this.currentPolycubeId];
|
||||
const dims = get(somaDimension);
|
||||
const voxelSpace = new VoxelSpace(this.currentPolycubeId, [dims, dims, dims], cubeRep);
|
||||
this.mainScene.remove(...this.polycubeMeshes);
|
||||
voxelSpace.forEachCell((val, x, y, z) => {
|
||||
if (val) {
|
||||
const cube = this.newRoundedCube(0.2, 3, cubeColor);
|
||||
cube.position.set(
|
||||
-((dims - 1)/2) + z,
|
||||
((dims - 1)/2) - y,
|
||||
-((dims - 1)/2) + x,
|
||||
);
|
||||
this.mainScene.add(cube);
|
||||
this.polycubeMeshes.push(cube);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private setupLight() {
|
||||
const color = 0xFFFFFF;
|
||||
const intensity = 1;
|
||||
const light = new THREE.DirectionalLight(color, intensity);
|
||||
light.position.set(-1, 2, 4);
|
||||
return light;
|
||||
}
|
||||
|
||||
private render(time: number) {
|
||||
this.renderer.render(this.mainScene, this.camera);
|
||||
requestAnimationFrame((timestamp) => this.render(timestamp));
|
||||
}
|
||||
|
||||
private newRoundedCube(radius: number, smoothness: number, color: string) {
|
||||
const width = 1;
|
||||
const height = 1;
|
||||
const depth = 1;
|
||||
const shape = new THREE.Shape();
|
||||
const eps = 0.00001;
|
||||
const radius0 = radius - eps;
|
||||
shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
|
||||
shape.absarc(eps, height - radius0 * 2, eps, Math.PI, Math.PI / 2, true);
|
||||
shape.absarc(width - radius0 * 2, height - radius0 * 2, eps, Math.PI / 2, 0, true);
|
||||
shape.absarc(width - radius0 * 2, eps, eps, 0, -Math.PI / 2, true );
|
||||
const geometry = new THREE.ExtrudeBufferGeometry(shape, {
|
||||
depth: depth - radius0 * 2,
|
||||
bevelEnabled: true,
|
||||
bevelSegments: smoothness * 2,
|
||||
steps: 1,
|
||||
bevelSize: radius0,
|
||||
bevelThickness: radius0,
|
||||
curveSegments: smoothness
|
||||
});
|
||||
geometry.center();
|
||||
const material = new THREE.MeshPhongMaterial({color});
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
return cube;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user