add multy format support
This commit is contained in:
lo-th
+24
-26
@@ -1,8 +1,6 @@
|
||||
import * as THREE from "./lib/three.module.js";
|
||||
import { OrbitControls } from "./lib/jsm/controls/OrbitControls.js";
|
||||
import { RGBELoader } from './lib/jsm/loaders/RGBELoader.js';
|
||||
import { GLTFLoader } from './lib/jsm/loaders/GLTFLoader.js';
|
||||
import { DRACOLoader } from './lib/jsm/loaders/DRACOLoader.js';
|
||||
|
||||
import { EffectComposer } from './lib/jsm/postprocessing/EffectComposer.js';
|
||||
import { RenderPass } from './lib/jsm/postprocessing/RenderPass.js';
|
||||
import { ShaderPass } from './lib/jsm/postprocessing/ShaderPass.js';
|
||||
@@ -15,6 +13,7 @@ import { Depth, Outline, Inline, BlackAll, sobelShader, cannyEdgeShader, thresho
|
||||
import { Hub } from "./lib/Hub.js";
|
||||
import { Files } from "./lib/Files.js";
|
||||
import { Tools } from "./lib/Tools.js";
|
||||
import { Pool } from "./lib/Pool.js";
|
||||
|
||||
import { $el } from "./lib/utils.js";
|
||||
|
||||
@@ -275,6 +274,8 @@ export class ThreeCanvas {
|
||||
// renderer1.domElement.style.cssText = "position:absolute; margin:0; padding:0; border:1px solid black;";
|
||||
renderer1.domElement.setAttribute("view", "LEFT")
|
||||
renderer1.domElement.classList.add("threeview_renderer")
|
||||
|
||||
Pool.renderer = renderer1;
|
||||
|
||||
// Renderer setup 2 LINES
|
||||
const renderer2 = new THREE.WebGLRenderer({ antialias: true, alpha: false });
|
||||
@@ -395,7 +396,7 @@ export class ThreeCanvas {
|
||||
|
||||
this.initLight();
|
||||
this.initEnvmap();
|
||||
this.initLoader();
|
||||
//this.initLoader();
|
||||
|
||||
if(!this.savedData?.currentModel) this.addHeadTest();
|
||||
|
||||
@@ -404,12 +405,19 @@ export class ThreeCanvas {
|
||||
if(this.autoAutoAnim) this.animate();
|
||||
}
|
||||
|
||||
getLoader( type = 'glb' ){
|
||||
// all loader is on Pool.js
|
||||
return Pool.getLoader( type );
|
||||
}
|
||||
|
||||
initEnvmap( url = `./assets/clear.hdr` ){
|
||||
|
||||
const envUrl = new URL(url, import.meta.url);
|
||||
const self = this;
|
||||
|
||||
new RGBELoader().load( envUrl, function ( texture ) {
|
||||
|
||||
|
||||
this.getLoader('hdr').load( envUrl, function ( texture ) {
|
||||
|
||||
texture.mapping = THREE.EquirectangularReflectionMapping;
|
||||
|
||||
@@ -488,14 +496,14 @@ export class ThreeCanvas {
|
||||
// import api directlly break index.html preview !!
|
||||
setApi( api ){ this.api = api; }
|
||||
|
||||
initLoader(){
|
||||
/*initLoader(){
|
||||
|
||||
const dracoPath = new URL(`./lib/jsm/libs/draco/gltf/`, import.meta.url);
|
||||
const dracoLoader = new DRACOLoader().setDecoderPath( dracoPath.href )
|
||||
dracoLoader.setDecoderConfig({ type: 'js' });
|
||||
this.loaderGltf = new GLTFLoader().setDRACOLoader(dracoLoader);
|
||||
|
||||
}
|
||||
}*/
|
||||
|
||||
clear(b){
|
||||
|
||||
@@ -567,7 +575,9 @@ export class ThreeCanvas {
|
||||
|
||||
directGlb( data, name ){
|
||||
|
||||
this.loaderGltf.parse( data, name, ( glb ) => { this.addModel( glb ); })
|
||||
this.getLoader('glb').parse( data, name, ( glb ) => { this.addModel( glb ); })
|
||||
|
||||
//this.loaderGltf.parse( data, name, ( glb ) => { this.addModel( glb ); })
|
||||
|
||||
}
|
||||
|
||||
@@ -580,19 +590,9 @@ export class ThreeCanvas {
|
||||
let u = headModel.href;
|
||||
this.defPath = u.substring( 0, u.lastIndexOf('/')+1 );
|
||||
|
||||
/*const light = new THREE.PointLight( 0x0080FF, 300 );
|
||||
light.position.set(-5,5,-10)
|
||||
scene.add( light );
|
||||
|
||||
const light2 = new THREE.PointLight( 0xff8000, 100 );
|
||||
light2.position.set(5,-5,-5)
|
||||
scene.add( light2 );
|
||||
|
||||
const light3 = new THREE.PointLight( 0xFFFFFF, 100 );
|
||||
light3.position.set(0,5,5)
|
||||
scene.add( light3 );*/
|
||||
|
||||
this.loaderGltf.load( headModel.href, ( glb ) => {
|
||||
//this.loaderGltf.
|
||||
this.getLoader('glb').load( headModel.href, ( glb ) => {
|
||||
this.addModel( glb );
|
||||
// Load camera data
|
||||
if( this.savedData?.camera ){
|
||||
@@ -789,15 +789,14 @@ export class ThreeCanvas {
|
||||
|
||||
async render() {
|
||||
if (this.autoScale) this.resize();
|
||||
//this.tools.forEach((data)=>data.renderer.render(this.scene, data.camera))
|
||||
|
||||
// TODO: find better way to add hub on top
|
||||
if(!this.hub.ready) this.hub.add(this.getDom(0))
|
||||
|
||||
this.tools.forEach((data)=>{
|
||||
|
||||
let camera = this.VIEWS3 && !this.fixCamers ? data.camera : this.camera
|
||||
|
||||
|
||||
|
||||
this.scene.overrideMaterial = !data.material ? null: data.material;
|
||||
|
||||
if( data.type !== 'color' ) this.helper.visible = false
|
||||
@@ -814,7 +813,6 @@ export class ThreeCanvas {
|
||||
|
||||
}
|
||||
|
||||
//this.scene.overrideMaterial = !data.material ? null: data.material;
|
||||
return data.renderer.render(this.scene, camera)
|
||||
|
||||
})
|
||||
@@ -843,7 +841,7 @@ export class ThreeCanvas {
|
||||
|
||||
}
|
||||
|
||||
async update(widgetWidth, posY) {
|
||||
/*async update(widgetWidth, posY) {
|
||||
|
||||
let w = widgetWidth - this.size.offset;
|
||||
if (this.size.w === w) return;
|
||||
@@ -851,7 +849,7 @@ export class ThreeCanvas {
|
||||
this.size.h = w * this.size.r;
|
||||
this.needResize = true;
|
||||
|
||||
}
|
||||
}*/
|
||||
|
||||
// Get object saves property
|
||||
getSavedOptions(){
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import * as THREE from "./three.module.js";
|
||||
|
||||
// 3D MODEL
|
||||
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
|
||||
import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
|
||||
import { KTX2Loader } from './jsm/loaders/KTX2Loader.js';
|
||||
import { MeshoptDecoder } from './jsm/libs/meshopt_decoder.module.js';
|
||||
import { FBXLoader } from './jsm/loaders/FBXLoader.js';
|
||||
import { OBJLoader } from './jsm/loaders/OBJLoader.js';
|
||||
import { STLLoader } from './jsm/loaders/STLLoader.js';
|
||||
// IMAGE
|
||||
import { RGBELoader } from './jsm/loaders/RGBELoader.js';
|
||||
import { EXRLoader } from './jsm/loaders/EXRLoader.js';
|
||||
|
||||
export const Pool = {
|
||||
|
||||
renderer:null,
|
||||
manager: new THREE.LoadingManager(),
|
||||
|
||||
loader:{
|
||||
|
||||
gltf:null,
|
||||
fbx:null,
|
||||
obj:null,
|
||||
stl:null,
|
||||
|
||||
hdr:null,
|
||||
exr:null,
|
||||
|
||||
},
|
||||
|
||||
getLoader( type ){
|
||||
|
||||
if(type==='gltf') type = 'glb';
|
||||
if(Pool['l_' + type]) return Pool['l_' + type]();
|
||||
|
||||
},
|
||||
|
||||
l_exr(){
|
||||
if(Pool.loader.exr === null ) Pool.loader.exr = new EXRLoader( Pool.manager );
|
||||
return Pool.loader.exr;
|
||||
},
|
||||
|
||||
l_hdr(){
|
||||
if(Pool.loader.hdr === null ) Pool.loader.hdr = new RGBELoader( Pool.manager );
|
||||
return Pool.loader.hdr;
|
||||
},
|
||||
|
||||
l_obj(){
|
||||
if(Pool.loader.obj === null ) Pool.loader.obj = new OBJLoader( Pool.manager );
|
||||
return Pool.loader.obj;
|
||||
},
|
||||
|
||||
l_fbx(){
|
||||
if(Pool.loader.fbx === null ) Pool.loader.fbx = new FBXLoader( Pool.manager );
|
||||
return Pool.loader.fbx;
|
||||
},
|
||||
|
||||
l_stl(){
|
||||
if(Pool.loader.stl === null ) Pool.loader.stl = new STLLoader( Pool.manager );
|
||||
return Pool.loader.stl;
|
||||
},
|
||||
|
||||
l_glb(){
|
||||
if(Pool.loader.gltf === null ){
|
||||
const dracoPath = new URL(`./jsm/libs/draco/gltf/`, import.meta.url);
|
||||
const dracoLoader = new DRACOLoader().setDecoderPath( dracoPath.href )
|
||||
dracoLoader.setDecoderConfig({ type: 'js' });
|
||||
|
||||
const ktx2Path = new URL(`./jsm/libs/basis/`, import.meta.url);
|
||||
const ktx2Loader = new KTX2Loader().setTranscoderPath( ktx2Path.href )
|
||||
|
||||
Pool.loader.gltf = new GLTFLoader( Pool.manager )
|
||||
.setCrossOrigin('anonymous')
|
||||
.setDRACOLoader(dracoLoader)
|
||||
.setKTX2Loader(ktx2Loader.detectSupport(Pool.renderer))
|
||||
.setMeshoptDecoder(MeshoptDecoder);
|
||||
}
|
||||
return Pool.loader.gltf;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
# Basis Universal GPU Texture Compression
|
||||
|
||||
Basis Universal is a "[supercompressed](http://gamma.cs.unc.edu/GST/gst.pdf)"
|
||||
GPU texture and texture video compression system that outputs a highly
|
||||
compressed intermediate file format (.basis) that can be quickly transcoded to
|
||||
a wide variety of GPU texture compression formats.
|
||||
|
||||
[GitHub](https://github.com/BinomialLLC/basis_universal)
|
||||
|
||||
## Transcoders
|
||||
|
||||
Basis Universal texture data may be used in two different file formats:
|
||||
`.basis` and `.ktx2`, where `ktx2` is a standardized wrapper around basis texture data.
|
||||
|
||||
For further documentation about the Basis compressor and transcoder, refer to
|
||||
the [Basis GitHub repository](https://github.com/BinomialLLC/basis_universal).
|
||||
|
||||
The folder contains two files required for transcoding `.basis` or `.ktx2` textures:
|
||||
|
||||
* `basis_transcoder.js` — JavaScript wrapper for the WebAssembly transcoder.
|
||||
* `basis_transcoder.wasm` — WebAssembly transcoder.
|
||||
|
||||
Both are dependencies of `KTX2Loader`:
|
||||
|
||||
```js
|
||||
const ktx2Loader = new KTX2Loader();
|
||||
ktx2Loader.setTranscoderPath( 'examples/jsm/libs/basis/' );
|
||||
ktx2Loader.detectSupport( renderer );
|
||||
ktx2Loader.load( 'diffuse.ktx2', function ( texture ) {
|
||||
|
||||
const material = new THREE.MeshStandardMaterial( { map: texture } );
|
||||
|
||||
}, function () {
|
||||
|
||||
console.log( 'onProgress' );
|
||||
|
||||
}, function ( e ) {
|
||||
|
||||
console.error( e );
|
||||
|
||||
} );
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
[Apache License 2.0](https://github.com/BinomialLLC/basis_universal/blob/master/LICENSE)
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,907 @@
|
||||
import {
|
||||
BufferGeometry,
|
||||
FileLoader,
|
||||
Float32BufferAttribute,
|
||||
Group,
|
||||
LineBasicMaterial,
|
||||
LineSegments,
|
||||
Loader,
|
||||
Material,
|
||||
Mesh,
|
||||
MeshPhongMaterial,
|
||||
Points,
|
||||
PointsMaterial,
|
||||
Vector3,
|
||||
Color,
|
||||
SRGBColorSpace
|
||||
} from '../../three.module.js';
|
||||
|
||||
// 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 _face_vertex_data_separator_pattern = /\s+/;
|
||||
|
||||
const _vA = new Vector3();
|
||||
const _vB = new Vector3();
|
||||
const _vC = new Vector3();
|
||||
|
||||
const _ab = new Vector3();
|
||||
const _cb = new Vector3();
|
||||
|
||||
const _color = new Color();
|
||||
|
||||
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 result = [];
|
||||
|
||||
for ( let i = 0, l = lines.length; i < l; i ++ ) {
|
||||
|
||||
const line = lines[ i ].trimStart();
|
||||
|
||||
if ( line.length === 0 ) continue;
|
||||
|
||||
const lineFirstChar = line.charAt( 0 );
|
||||
|
||||
// @todo invoke passed in handler if any
|
||||
if ( lineFirstChar === '#' ) continue; // skip comments
|
||||
|
||||
if ( lineFirstChar === 'v' ) {
|
||||
|
||||
const data = line.split( _face_vertex_data_separator_pattern );
|
||||
|
||||
switch ( data[ 0 ] ) {
|
||||
|
||||
case 'v':
|
||||
state.vertices.push(
|
||||
parseFloat( data[ 1 ] ),
|
||||
parseFloat( data[ 2 ] ),
|
||||
parseFloat( data[ 3 ] )
|
||||
);
|
||||
if ( data.length >= 7 ) {
|
||||
|
||||
_color.setRGB(
|
||||
parseFloat( data[ 4 ] ),
|
||||
parseFloat( data[ 5 ] ),
|
||||
parseFloat( data[ 6 ] ),
|
||||
SRGBColorSpace
|
||||
);
|
||||
|
||||
state.colors.push( _color.r, _color.g, _color.b );
|
||||
|
||||
} 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.slice( 1 ).trim();
|
||||
const vertexData = lineData.split( _face_vertex_data_separator_pattern );
|
||||
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.slice( 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 ].slice( 1 ).trim();
|
||||
const name = ( ' ' + result[ 0 ].slice( 1 ).trim() ).slice( 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/
|
||||
*
|
||||
* 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 };
|
||||
@@ -0,0 +1,411 @@
|
||||
import {
|
||||
BufferAttribute,
|
||||
BufferGeometry,
|
||||
Color,
|
||||
FileLoader,
|
||||
Float32BufferAttribute,
|
||||
Loader,
|
||||
Vector3,
|
||||
SRGBColorSpace
|
||||
} from '../../three.module.js';
|
||||
|
||||
/**
|
||||
* Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs.
|
||||
*
|
||||
* Supports both binary and ASCII encoded files, with automatic detection of type.
|
||||
*
|
||||
* The loader returns a non-indexed buffer geometry.
|
||||
*
|
||||
* Limitations:
|
||||
* Binary decoding supports "Magics" color format (http://en.wikipedia.org/wiki/STL_(file_format)#Color_in_binary_STL).
|
||||
* There is perhaps some question as to how valid it is to always assume little-endian-ness.
|
||||
* ASCII decoding assumes file is UTF-8.
|
||||
*
|
||||
* Usage:
|
||||
* const loader = new STLLoader();
|
||||
* loader.load( './models/stl/slotted_disk.stl', function ( geometry ) {
|
||||
* scene.add( new THREE.Mesh( geometry ) );
|
||||
* });
|
||||
*
|
||||
* For binary STLs geometry might contain colors for vertices. To use it:
|
||||
* // use the same code to load STL as above
|
||||
* if (geometry.hasColors) {
|
||||
* material = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: true });
|
||||
* } else { .... }
|
||||
* const mesh = new THREE.Mesh( geometry, material );
|
||||
*
|
||||
* For ASCII STLs containing multiple solids, each solid is assigned to a different group.
|
||||
* Groups can be used to assign a different color by defining an array of materials with the same length of
|
||||
* geometry.groups and passing it to the Mesh constructor:
|
||||
*
|
||||
* const mesh = new THREE.Mesh( geometry, material );
|
||||
*
|
||||
* For example:
|
||||
*
|
||||
* const materials = [];
|
||||
* const nGeometryGroups = geometry.groups.length;
|
||||
*
|
||||
* const colorMap = ...; // Some logic to index colors.
|
||||
*
|
||||
* for (let i = 0; i < nGeometryGroups; i++) {
|
||||
*
|
||||
* const material = new THREE.MeshPhongMaterial({
|
||||
* color: colorMap[i],
|
||||
* wireframe: false
|
||||
* });
|
||||
*
|
||||
* }
|
||||
*
|
||||
* materials.push(material);
|
||||
* const mesh = new THREE.Mesh(geometry, materials);
|
||||
*/
|
||||
|
||||
|
||||
class STLLoader extends Loader {
|
||||
|
||||
constructor( manager ) {
|
||||
|
||||
super( manager );
|
||||
|
||||
}
|
||||
|
||||
load( url, onLoad, onProgress, onError ) {
|
||||
|
||||
const scope = this;
|
||||
|
||||
const loader = new FileLoader( this.manager );
|
||||
loader.setPath( this.path );
|
||||
loader.setResponseType( 'arraybuffer' );
|
||||
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 );
|
||||
|
||||
}
|
||||
|
||||
parse( data ) {
|
||||
|
||||
function isBinary( data ) {
|
||||
|
||||
const reader = new DataView( data );
|
||||
const face_size = ( 32 / 8 * 3 ) + ( ( 32 / 8 * 3 ) * 3 ) + ( 16 / 8 );
|
||||
const n_faces = reader.getUint32( 80, true );
|
||||
const expect = 80 + ( 32 / 8 ) + ( n_faces * face_size );
|
||||
|
||||
if ( expect === reader.byteLength ) {
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
// An ASCII STL data must begin with 'solid ' as the first six bytes.
|
||||
// However, ASCII STLs lacking the SPACE after the 'd' are known to be
|
||||
// plentiful. So, check the first 5 bytes for 'solid'.
|
||||
|
||||
// Several encodings, such as UTF-8, precede the text with up to 5 bytes:
|
||||
// https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding
|
||||
// Search for "solid" to start anywhere after those prefixes.
|
||||
|
||||
// US-ASCII ordinal values for 's', 'o', 'l', 'i', 'd'
|
||||
|
||||
const solid = [ 115, 111, 108, 105, 100 ];
|
||||
|
||||
for ( let off = 0; off < 5; off ++ ) {
|
||||
|
||||
// If "solid" text is matched to the current offset, declare it to be an ASCII STL.
|
||||
|
||||
if ( matchDataViewAt( solid, reader, off ) ) return false;
|
||||
|
||||
}
|
||||
|
||||
// Couldn't find "solid" text at the beginning; it is binary STL.
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
function matchDataViewAt( query, reader, offset ) {
|
||||
|
||||
// Check if each byte in query matches the corresponding byte from the current offset
|
||||
|
||||
for ( let i = 0, il = query.length; i < il; i ++ ) {
|
||||
|
||||
if ( query[ i ] !== reader.getUint8( offset + i ) ) return false;
|
||||
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
function parseBinary( data ) {
|
||||
|
||||
const reader = new DataView( data );
|
||||
const faces = reader.getUint32( 80, true );
|
||||
|
||||
let r, g, b, hasColors = false, colors;
|
||||
let defaultR, defaultG, defaultB, alpha;
|
||||
|
||||
// process STL header
|
||||
// check for default color in header ("COLOR=rgba" sequence).
|
||||
|
||||
for ( let index = 0; index < 80 - 10; index ++ ) {
|
||||
|
||||
if ( ( reader.getUint32( index, false ) == 0x434F4C4F /*COLO*/ ) &&
|
||||
( reader.getUint8( index + 4 ) == 0x52 /*'R'*/ ) &&
|
||||
( reader.getUint8( index + 5 ) == 0x3D /*'='*/ ) ) {
|
||||
|
||||
hasColors = true;
|
||||
colors = new Float32Array( faces * 3 * 3 );
|
||||
|
||||
defaultR = reader.getUint8( index + 6 ) / 255;
|
||||
defaultG = reader.getUint8( index + 7 ) / 255;
|
||||
defaultB = reader.getUint8( index + 8 ) / 255;
|
||||
alpha = reader.getUint8( index + 9 ) / 255;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const dataOffset = 84;
|
||||
const faceLength = 12 * 4 + 2;
|
||||
|
||||
const geometry = new BufferGeometry();
|
||||
|
||||
const vertices = new Float32Array( faces * 3 * 3 );
|
||||
const normals = new Float32Array( faces * 3 * 3 );
|
||||
|
||||
const color = new Color();
|
||||
|
||||
for ( let face = 0; face < faces; face ++ ) {
|
||||
|
||||
const start = dataOffset + face * faceLength;
|
||||
const normalX = reader.getFloat32( start, true );
|
||||
const normalY = reader.getFloat32( start + 4, true );
|
||||
const normalZ = reader.getFloat32( start + 8, true );
|
||||
|
||||
if ( hasColors ) {
|
||||
|
||||
const packedColor = reader.getUint16( start + 48, true );
|
||||
|
||||
if ( ( packedColor & 0x8000 ) === 0 ) {
|
||||
|
||||
// facet has its own unique color
|
||||
|
||||
r = ( packedColor & 0x1F ) / 31;
|
||||
g = ( ( packedColor >> 5 ) & 0x1F ) / 31;
|
||||
b = ( ( packedColor >> 10 ) & 0x1F ) / 31;
|
||||
|
||||
} else {
|
||||
|
||||
r = defaultR;
|
||||
g = defaultG;
|
||||
b = defaultB;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
for ( let i = 1; i <= 3; i ++ ) {
|
||||
|
||||
const vertexstart = start + i * 12;
|
||||
const componentIdx = ( face * 3 * 3 ) + ( ( i - 1 ) * 3 );
|
||||
|
||||
vertices[ componentIdx ] = reader.getFloat32( vertexstart, true );
|
||||
vertices[ componentIdx + 1 ] = reader.getFloat32( vertexstart + 4, true );
|
||||
vertices[ componentIdx + 2 ] = reader.getFloat32( vertexstart + 8, true );
|
||||
|
||||
normals[ componentIdx ] = normalX;
|
||||
normals[ componentIdx + 1 ] = normalY;
|
||||
normals[ componentIdx + 2 ] = normalZ;
|
||||
|
||||
if ( hasColors ) {
|
||||
|
||||
color.setRGB( r, g, b, SRGBColorSpace );
|
||||
|
||||
colors[ componentIdx ] = color.r;
|
||||
colors[ componentIdx + 1 ] = color.g;
|
||||
colors[ componentIdx + 2 ] = color.b;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
|
||||
geometry.setAttribute( 'normal', new BufferAttribute( normals, 3 ) );
|
||||
|
||||
if ( hasColors ) {
|
||||
|
||||
geometry.setAttribute( 'color', new BufferAttribute( colors, 3 ) );
|
||||
geometry.hasColors = true;
|
||||
geometry.alpha = alpha;
|
||||
|
||||
}
|
||||
|
||||
return geometry;
|
||||
|
||||
}
|
||||
|
||||
function parseASCII( data ) {
|
||||
|
||||
const geometry = new BufferGeometry();
|
||||
const patternSolid = /solid([\s\S]*?)endsolid/g;
|
||||
const patternFace = /facet([\s\S]*?)endfacet/g;
|
||||
const patternName = /solid\s(.+)/;
|
||||
let faceCounter = 0;
|
||||
|
||||
const patternFloat = /[\s]+([+-]?(?:\d*)(?:\.\d*)?(?:[eE][+-]?\d+)?)/.source;
|
||||
const patternVertex = new RegExp( 'vertex' + patternFloat + patternFloat + patternFloat, 'g' );
|
||||
const patternNormal = new RegExp( 'normal' + patternFloat + patternFloat + patternFloat, 'g' );
|
||||
|
||||
const vertices = [];
|
||||
const normals = [];
|
||||
const groupNames = [];
|
||||
|
||||
const normal = new Vector3();
|
||||
|
||||
let result;
|
||||
|
||||
let groupCount = 0;
|
||||
let startVertex = 0;
|
||||
let endVertex = 0;
|
||||
|
||||
while ( ( result = patternSolid.exec( data ) ) !== null ) {
|
||||
|
||||
startVertex = endVertex;
|
||||
|
||||
const solid = result[ 0 ];
|
||||
|
||||
const name = ( result = patternName.exec( solid ) ) !== null ? result[ 1 ] : '';
|
||||
groupNames.push( name );
|
||||
|
||||
while ( ( result = patternFace.exec( solid ) ) !== null ) {
|
||||
|
||||
let vertexCountPerFace = 0;
|
||||
let normalCountPerFace = 0;
|
||||
|
||||
const text = result[ 0 ];
|
||||
|
||||
while ( ( result = patternNormal.exec( text ) ) !== null ) {
|
||||
|
||||
normal.x = parseFloat( result[ 1 ] );
|
||||
normal.y = parseFloat( result[ 2 ] );
|
||||
normal.z = parseFloat( result[ 3 ] );
|
||||
normalCountPerFace ++;
|
||||
|
||||
}
|
||||
|
||||
while ( ( result = patternVertex.exec( text ) ) !== null ) {
|
||||
|
||||
vertices.push( parseFloat( result[ 1 ] ), parseFloat( result[ 2 ] ), parseFloat( result[ 3 ] ) );
|
||||
normals.push( normal.x, normal.y, normal.z );
|
||||
vertexCountPerFace ++;
|
||||
endVertex ++;
|
||||
|
||||
}
|
||||
|
||||
// every face have to own ONE valid normal
|
||||
|
||||
if ( normalCountPerFace !== 1 ) {
|
||||
|
||||
console.error( 'THREE.STLLoader: Something isn\'t right with the normal of face number ' + faceCounter );
|
||||
|
||||
}
|
||||
|
||||
// each face have to own THREE valid vertices
|
||||
|
||||
if ( vertexCountPerFace !== 3 ) {
|
||||
|
||||
console.error( 'THREE.STLLoader: Something isn\'t right with the vertices of face number ' + faceCounter );
|
||||
|
||||
}
|
||||
|
||||
faceCounter ++;
|
||||
|
||||
}
|
||||
|
||||
const start = startVertex;
|
||||
const count = endVertex - startVertex;
|
||||
|
||||
geometry.userData.groupNames = groupNames;
|
||||
|
||||
geometry.addGroup( start, count, groupCount );
|
||||
groupCount ++;
|
||||
|
||||
}
|
||||
|
||||
geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
|
||||
geometry.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
|
||||
|
||||
return geometry;
|
||||
|
||||
}
|
||||
|
||||
function ensureString( buffer ) {
|
||||
|
||||
if ( typeof buffer !== 'string' ) {
|
||||
|
||||
return new TextDecoder().decode( buffer );
|
||||
|
||||
}
|
||||
|
||||
return buffer;
|
||||
|
||||
}
|
||||
|
||||
function ensureBinary( buffer ) {
|
||||
|
||||
if ( typeof buffer === 'string' ) {
|
||||
|
||||
const array_buffer = new Uint8Array( buffer.length );
|
||||
for ( let i = 0; i < buffer.length; i ++ ) {
|
||||
|
||||
array_buffer[ i ] = buffer.charCodeAt( i ) & 0xff; // implicitly assumes little-endian
|
||||
|
||||
}
|
||||
|
||||
return array_buffer.buffer || array_buffer;
|
||||
|
||||
} else {
|
||||
|
||||
return buffer;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// start
|
||||
|
||||
const binData = ensureBinary( data );
|
||||
|
||||
return isBinary( binData ) ? parseBinary( binData ) : parseASCII( ensureString( data ) );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { STLLoader };
|
||||
@@ -0,0 +1,76 @@
|
||||
import { LinearTransfer, Matrix3, SRGBTransfer } from '../../three.module.js';
|
||||
|
||||
// Reference: http://www.russellcottrell.com/photo/matrixCalculator.htm
|
||||
|
||||
const P3_PRIMARIES = [ 0.680, 0.320, 0.265, 0.690, 0.150, 0.060 ];
|
||||
const P3_LUMINANCE_COEFFICIENTS = [ 0.2289, 0.6917, 0.0793 ];
|
||||
const REC2020_PRIMARIES = [ 0.708, 0.292, 0.170, 0.797, 0.131, 0.046 ];
|
||||
const REC2020_LUMINANCE_COEFFICIENTS = [ 0.2627, 0.6780, 0.0593 ];
|
||||
const D65 = [ 0.3127, 0.3290 ];
|
||||
|
||||
/******************************************************************************
|
||||
* Display P3 definitions
|
||||
*/
|
||||
|
||||
const LINEAR_DISPLAY_P3_TO_XYZ = /*@__PURE__*/ new Matrix3().set(
|
||||
0.4865709, 0.2656677, 0.1982173,
|
||||
0.2289746, 0.6917385, 0.0792869,
|
||||
0.0000000, 0.0451134, 1.0439444
|
||||
);
|
||||
|
||||
const XYZ_TO_LINEAR_DISPLAY_P3 = /*@__PURE__*/ new Matrix3().set(
|
||||
2.4934969, - 0.9313836, - 0.4027108,
|
||||
- 0.8294890, 1.7626641, 0.0236247,
|
||||
0.0358458, - 0.0761724, 0.9568845
|
||||
);
|
||||
|
||||
export const DisplayP3ColorSpace = 'display-p3';
|
||||
export const LinearDisplayP3ColorSpace = 'display-p3-linear';
|
||||
|
||||
export const DisplayP3ColorSpaceImpl = {
|
||||
primaries: P3_PRIMARIES,
|
||||
whitePoint: D65,
|
||||
transfer: SRGBTransfer,
|
||||
toXYZ: LINEAR_DISPLAY_P3_TO_XYZ,
|
||||
fromXYZ: XYZ_TO_LINEAR_DISPLAY_P3,
|
||||
luminanceCoefficients: P3_LUMINANCE_COEFFICIENTS,
|
||||
outputColorSpaceConfig: { drawingBufferColorSpace: DisplayP3ColorSpace }
|
||||
};
|
||||
|
||||
export const LinearDisplayP3ColorSpaceImpl = {
|
||||
primaries: P3_PRIMARIES,
|
||||
whitePoint: D65,
|
||||
transfer: LinearTransfer,
|
||||
toXYZ: LINEAR_DISPLAY_P3_TO_XYZ,
|
||||
fromXYZ: XYZ_TO_LINEAR_DISPLAY_P3,
|
||||
luminanceCoefficients: P3_LUMINANCE_COEFFICIENTS,
|
||||
workingColorSpaceConfig: { unpackColorSpace: DisplayP3ColorSpace },
|
||||
outputColorSpaceConfig: { drawingBufferColorSpace: DisplayP3ColorSpace }
|
||||
};
|
||||
|
||||
/******************************************************************************
|
||||
* Rec. 2020 definitions
|
||||
*/
|
||||
|
||||
const LINEAR_REC2020_TO_XYZ = /*@__PURE__*/ new Matrix3().set(
|
||||
0.6369580, 0.1446169, 0.1688810,
|
||||
0.2627002, 0.6779981, 0.0593017,
|
||||
0.0000000, 0.0280727, 1.0609851
|
||||
);
|
||||
|
||||
const XYZ_TO_LINEAR_REC2020 = /*@__PURE__*/ new Matrix3().set(
|
||||
1.7166512, - 0.3556708, - 0.2533663,
|
||||
- 0.6666844, 1.6164812, 0.0157685,
|
||||
0.0176399, - 0.0427706, 0.9421031
|
||||
);
|
||||
|
||||
export const LinearRec2020ColorSpace = 'rec2020-linear';
|
||||
|
||||
export const LinearRec2020ColorSpaceImpl = {
|
||||
primaries: REC2020_PRIMARIES,
|
||||
whitePoint: D65,
|
||||
transfer: LinearTransfer,
|
||||
toXYZ: LINEAR_REC2020_TO_XYZ,
|
||||
fromXYZ: XYZ_TO_LINEAR_REC2020,
|
||||
luminanceCoefficients: REC2020_LUMINANCE_COEFFICIENTS,
|
||||
};
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* @author Deepkolos / https://github.com/deepkolos
|
||||
*/
|
||||
|
||||
export class WorkerPool {
|
||||
|
||||
constructor( pool = 4 ) {
|
||||
|
||||
this.pool = pool;
|
||||
this.queue = [];
|
||||
this.workers = [];
|
||||
this.workersResolve = [];
|
||||
this.workerStatus = 0;
|
||||
|
||||
}
|
||||
|
||||
_initWorker( workerId ) {
|
||||
|
||||
if ( ! this.workers[ workerId ] ) {
|
||||
|
||||
const worker = this.workerCreator();
|
||||
worker.addEventListener( 'message', this._onMessage.bind( this, workerId ) );
|
||||
this.workers[ workerId ] = worker;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
_getIdleWorker() {
|
||||
|
||||
for ( let i = 0; i < this.pool; i ++ )
|
||||
if ( ! ( this.workerStatus & ( 1 << i ) ) ) return i;
|
||||
|
||||
return - 1;
|
||||
|
||||
}
|
||||
|
||||
_onMessage( workerId, msg ) {
|
||||
|
||||
const resolve = this.workersResolve[ workerId ];
|
||||
resolve && resolve( msg );
|
||||
|
||||
if ( this.queue.length ) {
|
||||
|
||||
const { resolve, msg, transfer } = this.queue.shift();
|
||||
this.workersResolve[ workerId ] = resolve;
|
||||
this.workers[ workerId ].postMessage( msg, transfer );
|
||||
|
||||
} else {
|
||||
|
||||
this.workerStatus ^= 1 << workerId;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setWorkerCreator( workerCreator ) {
|
||||
|
||||
this.workerCreator = workerCreator;
|
||||
|
||||
}
|
||||
|
||||
setWorkerLimit( pool ) {
|
||||
|
||||
this.pool = pool;
|
||||
|
||||
}
|
||||
|
||||
postMessage( msg, transfer ) {
|
||||
|
||||
return new Promise( ( resolve ) => {
|
||||
|
||||
const workerId = this._getIdleWorker();
|
||||
|
||||
if ( workerId !== - 1 ) {
|
||||
|
||||
this._initWorker( workerId );
|
||||
this.workerStatus |= 1 << workerId;
|
||||
this.workersResolve[ workerId ] = resolve;
|
||||
this.workers[ workerId ].postMessage( msg, transfer );
|
||||
|
||||
} else {
|
||||
|
||||
this.queue.push( { resolve, msg, transfer } );
|
||||
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
dispose() {
|
||||
|
||||
this.workers.forEach( ( worker ) => worker.terminate() );
|
||||
this.workersResolve.length = 0;
|
||||
this.workers.length = 0;
|
||||
this.queue.length = 0;
|
||||
this.workerStatus = 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
+6
-6
@@ -229,7 +229,7 @@ app.registerExtension({
|
||||
|
||||
if (threeCanvasId !== -1 && w?.widgets_values[threeCanvasId]) {
|
||||
// Get widget threeCanvas by Index
|
||||
const threeCnavasWidget = this.widgets[threeCanvasId].threeCanvas
|
||||
const threeCanvasWidget = this.widgets[threeCanvasId].threeCanvas
|
||||
|
||||
// Get value size and options
|
||||
const {size: sizeData, camera: cameraData, currentModel} = w.widgets_values[threeCanvasId];
|
||||
@@ -238,7 +238,7 @@ app.registerExtension({
|
||||
if(sizeData){
|
||||
const { w: width, h: height } = sizeData;
|
||||
if(width && height){
|
||||
threeCnavasWidget.setCanvasSize(width, height);
|
||||
threeCanvasWidget.setCanvasSize(width, height);
|
||||
this.title = `${this.type} [${width}x${height}]`;
|
||||
}
|
||||
}
|
||||
@@ -258,17 +258,17 @@ app.registerExtension({
|
||||
urlData = new URL(currentModel, import.meta.url).href
|
||||
}
|
||||
|
||||
await threeCnavasWidget.loaderGltf.load(urlData, ( glb ) => {
|
||||
threeCnavasWidget.addModel( glb );
|
||||
await threeCanvasWidget.getLoader('glb').load(urlData, ( glb ) => {
|
||||
threeCanvasWidget.addModel( glb );
|
||||
|
||||
// Load camera data
|
||||
if( cameraData ) threeCnavasWidget.loadCameraState( cameraData )
|
||||
if( cameraData ) threeCanvasWidget.loadCameraState( cameraData )
|
||||
|
||||
},
|
||||
( data ) => {/* console.log( `Loaded data: ${data.loaded}/${data.total}` */},
|
||||
( err ) => {
|
||||
console.log( err );
|
||||
threeCnavasWidget.addHeadTest();
|
||||
threeCanvasWidget.addHeadTest();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user