mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-07-05 10:20:44 +02:00
532 lines
14 KiB
JavaScript
Executable File
532 lines
14 KiB
JavaScript
Executable File
/**
|
|
* @author TatumCreative (Greg Tatum) / http://gregtatum.com/
|
|
*/
|
|
|
|
var constants = {
|
|
|
|
combine: {
|
|
|
|
"THREE.MultiplyOperation" : THREE.MultiplyOperation,
|
|
"THREE.MixOperation" : THREE.MixOperation,
|
|
"THREE.AddOperation" : THREE.AddOperation
|
|
|
|
},
|
|
|
|
side : {
|
|
|
|
"THREE.FrontSide" : THREE.FrontSide,
|
|
"THREE.BackSide" : THREE.BackSide,
|
|
"THREE.DoubleSide" : THREE.DoubleSide
|
|
|
|
},
|
|
|
|
shading : {
|
|
|
|
"THREE.NoShading" : THREE.NoShading,
|
|
"THREE.FlatShading" : THREE.FlatShading,
|
|
"THREE.SmoothShading" : THREE.SmoothShading
|
|
|
|
},
|
|
|
|
colors : {
|
|
|
|
"THREE.NoColors" : THREE.NoColors,
|
|
"THREE.FaceColors" : THREE.FaceColors,
|
|
"THREE.VertexColors" : THREE.VertexColors
|
|
|
|
},
|
|
|
|
blendingMode : {
|
|
|
|
"THREE.NoBlending" : THREE.NoBlending,
|
|
"THREE.NormalBlending" : THREE.NormalBlending,
|
|
"THREE.AdditiveBlending" : THREE.AdditiveBlending,
|
|
"THREE.SubtractiveBlending" : THREE.SubtractiveBlending,
|
|
"THREE.MultiplyBlending" : THREE.MultiplyBlending,
|
|
"THREE.CustomBlending" : THREE.CustomBlending
|
|
|
|
},
|
|
|
|
equations : {
|
|
|
|
"THREE.AddEquation" : THREE.AddEquation,
|
|
"THREE.SubtractEquation" : THREE.SubtractEquation,
|
|
"THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation
|
|
|
|
},
|
|
|
|
destinationFactors : {
|
|
|
|
"THREE.ZeroFactor" : THREE.ZeroFactor,
|
|
"THREE.OneFactor" : THREE.OneFactor,
|
|
"THREE.SrcColorFactor" : THREE.SrcColorFactor,
|
|
"THREE.OneMinusSrcColorFactor" : THREE.OneMinusSrcColorFactor,
|
|
"THREE.SrcAlphaFactor" : THREE.SrcAlphaFactor,
|
|
"THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor,
|
|
"THREE.DstAlphaFactor" : THREE.DstAlphaFactor,
|
|
"THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor
|
|
|
|
},
|
|
|
|
sourceFactors : {
|
|
|
|
"THREE.DstColorFactor" : THREE.DstColorFactor,
|
|
"THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor,
|
|
"THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function getObjectsKeys( obj ) {
|
|
|
|
var keys = [];
|
|
|
|
for ( var key in obj ) {
|
|
|
|
if ( obj.hasOwnProperty( key ) ) {
|
|
|
|
keys.push( key );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return keys;
|
|
}
|
|
|
|
var envMaps = (function () {
|
|
|
|
var path = "../../examples/textures/cube/SwedishRoyalCastle/";
|
|
var format = '.jpg';
|
|
var urls = [
|
|
path + 'px' + format, path + 'nx' + format,
|
|
path + 'py' + format, path + 'ny' + format,
|
|
path + 'pz' + format, path + 'nz' + format
|
|
];
|
|
|
|
var textureCube = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeRefractionMapping );
|
|
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
|
|
reflectionCube.format = THREE.RGBFormat;
|
|
|
|
var refractionCube = new THREE.Texture( reflectionCube.image, THREE.CubeRefractionMapping );
|
|
reflectionCube.format = THREE.RGBFormat;
|
|
|
|
return {
|
|
none : null,
|
|
reflection : reflectionCube,
|
|
refraction : refractionCube
|
|
};
|
|
|
|
})();
|
|
|
|
var envMapKeys = getObjectsKeys( envMaps );
|
|
|
|
var textureMaps = (function () {
|
|
|
|
return {
|
|
none : null,
|
|
grass : THREE.ImageUtils.loadTexture( "../../examples/textures/terrain/grasslight-thin.jpg" )
|
|
};
|
|
|
|
})();
|
|
|
|
var textureMapKeys = getObjectsKeys( textureMaps );
|
|
|
|
function generateVertexColors ( geometry ) {
|
|
|
|
for ( var i=0, il = geometry.faces.length; i < il; i++ ) {
|
|
|
|
geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
|
|
i / il * Math.random(),
|
|
0.5,
|
|
0.5
|
|
) );
|
|
geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
|
|
i / il * Math.random(),
|
|
0.5,
|
|
0.5
|
|
) );
|
|
geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
|
|
i / il * Math.random(),
|
|
0.5,
|
|
0.5
|
|
) );
|
|
|
|
geometry.faces[i].color = new THREE.Color().setHSL(
|
|
i / il * Math.random(),
|
|
0.5,
|
|
0.5
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function generateMorphTargets ( mesh, geometry ) {
|
|
|
|
var vertices = [], scale;
|
|
|
|
for ( var i = 0; i < geometry.vertices.length; i++ ) {
|
|
|
|
vertices.push( geometry.vertices[ i ].clone() );
|
|
|
|
scale = 1 + Math.random() * 0.3;
|
|
|
|
vertices[ vertices.length - 1 ].x *= scale;
|
|
vertices[ vertices.length - 1 ].y *= scale;
|
|
vertices[ vertices.length - 1 ].z *= scale;
|
|
|
|
}
|
|
|
|
geometry.morphTargets.push( { name: "target1", vertices: vertices } );
|
|
|
|
geometry.update
|
|
|
|
}
|
|
|
|
function handleColorChange ( color ) {
|
|
|
|
return function ( value ){
|
|
|
|
if (typeof value === "string") {
|
|
|
|
value = value.replace('#', '0x');
|
|
|
|
}
|
|
|
|
color.setHex( value );
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function needsUpdate ( material, geometry ) {
|
|
|
|
return function () {
|
|
|
|
material.shading = +material.shading; //Ensure number
|
|
material.vertexColors = +material.vertexColors; //Ensure number
|
|
material.side = +material.side; //Ensure number
|
|
material.needsUpdate = true;
|
|
geometry.verticesNeedUpdate = true;
|
|
geometry.normalsNeedUpdate = true;
|
|
geometry.colorsNeedUpdate = true;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
function updateMorphs ( torus, material ) {
|
|
|
|
return function () {
|
|
|
|
torus.updateMorphTargets();
|
|
material.needsUpdate = true;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function updateTexture ( material, materialKey, textures ) {
|
|
|
|
return function ( key ) {
|
|
|
|
material[materialKey] = textures[key];
|
|
material.needsUpdate = true;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function guiScene ( gui, scene ) {
|
|
|
|
var folder = gui.addFolder('Scene');
|
|
|
|
var data = {
|
|
background : "#000000",
|
|
"ambient light" : ambientLight.color.getHex()
|
|
}
|
|
|
|
var color = new THREE.Color();
|
|
var colorConvert = handleColorChange( color );
|
|
|
|
folder.addColor( data, "background" ).onChange( function ( value ) {
|
|
|
|
colorConvert( value );
|
|
|
|
renderer.setClearColor( color.getHex() );
|
|
|
|
} );
|
|
|
|
folder.addColor( data, "ambient light" ).onChange( handleColorChange( ambientLight.color ) )
|
|
|
|
guiSceneFog( folder, scene );
|
|
|
|
}
|
|
|
|
function guiSceneFog ( folder, scene ) {
|
|
|
|
var fogFolder = folder.addFolder('scene.fog');
|
|
|
|
var fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
|
|
|
|
var data = {
|
|
fog : {
|
|
"THREE.Fog()" : false,
|
|
"scene.fog.color" : fog.color.getHex()
|
|
}
|
|
};
|
|
|
|
fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
|
|
|
|
if ( useFog ) {
|
|
|
|
scene.fog = fog;
|
|
|
|
} else {
|
|
|
|
scene.fog = null;
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
fogFolder.addColor( data.fog, 'scene.fog.color').onChange( handleColorChange( fog.color ) );
|
|
|
|
}
|
|
|
|
function guiMaterial ( gui, mesh, material, geometry ) {
|
|
|
|
var folder = gui.addFolder('THREE.Material');
|
|
|
|
folder.add( material, 'transparent' );
|
|
folder.add( material, 'opacity', 0, 1 );
|
|
// folder.add( material, 'blending', constants.blendingMode );
|
|
// folder.add( material, 'blendSrc', constants.destinationFactors );
|
|
// folder.add( material, 'blendDst', constants.destinationFactors );
|
|
// folder.add( material, 'blendEquation', constants.equations );
|
|
folder.add( material, 'depthTest' );
|
|
folder.add( material, 'depthWrite' );
|
|
// folder.add( material, 'polygonOffset' );
|
|
// folder.add( material, 'polygonOffsetFactor' );
|
|
// folder.add( material, 'polygonOffsetUnits' );
|
|
folder.add( material, 'alphaTest', 0, 1 );
|
|
// folder.add( material, 'overdraw', 0, 5 );
|
|
folder.add( material, 'visible' );
|
|
folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
|
|
|
|
}
|
|
|
|
function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
|
|
|
|
var data = {
|
|
color : material.color.getHex(),
|
|
envMaps : envMapKeys,
|
|
map : textureMapKeys,
|
|
lightMap : textureMapKeys,
|
|
specularMap : textureMapKeys,
|
|
alphaMap : textureMapKeys
|
|
};
|
|
|
|
var folder = gui.addFolder('THREE.MeshBasicMaterial');
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'wireframeLinewidth', 0, 10 );
|
|
folder.add( material, 'shading', constants.shading);
|
|
folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' );
|
|
|
|
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
|
|
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
|
|
folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
|
|
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
|
|
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
|
|
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
|
|
folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
|
|
folder.add( material, 'reflectivity', 0, 1 );
|
|
folder.add( material, 'refractionRatio', 0, 1 );
|
|
//folder.add( material, 'skinning' );
|
|
|
|
}
|
|
|
|
function guiMeshDepthMaterial ( gui, mesh, material, geometry ) {
|
|
|
|
var folder = gui.addFolder('THREE.MeshDepthMaterial');
|
|
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'wireframeLinewidth', 0, 10 );
|
|
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
|
|
|
|
}
|
|
|
|
function guiMeshNormalMaterial ( gui, mesh, material, geometry ) {
|
|
|
|
var folder = gui.addFolder('THREE.MeshNormalMaterial');
|
|
|
|
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'wireframeLinewidth', 0, 10 );
|
|
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
|
|
|
|
}
|
|
|
|
function guiLineBasicMaterial ( gui, mesh, material, geometry ) {
|
|
|
|
var data = {
|
|
color : material.color.getHex()
|
|
};
|
|
|
|
var folder = gui.addFolder('THREE.LineBasicMaterial');
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
|
|
folder.add( material, 'linewidth', 0, 10 );
|
|
folder.add( material, 'linecap', ["butt", "round", "square"] );
|
|
folder.add( material, 'linejoin', ["round", "bevel", "miter"] );
|
|
folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' );
|
|
|
|
}
|
|
|
|
function guiMeshLambertMaterial ( gui, mesh, material, geometry ) {
|
|
|
|
var data = {
|
|
color : material.color.getHex(),
|
|
emissive : material.emissive.getHex(),
|
|
envMaps : envMapKeys,
|
|
map : textureMapKeys,
|
|
lightMap : textureMapKeys,
|
|
specularMap : textureMapKeys,
|
|
alphaMap : textureMapKeys
|
|
};
|
|
|
|
var envObj = {};
|
|
|
|
var folder = gui.addFolder('THREE.MeshLambertMaterial');
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
|
|
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
|
|
|
|
folder.add( material, 'shading', constants.shading ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'wireframeLinewidth', 0, 10 );
|
|
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' );
|
|
|
|
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
|
|
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
|
|
folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
|
|
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
|
|
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
|
|
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
|
|
folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
|
|
folder.add( material, 'reflectivity', 0, 1 );
|
|
folder.add( material, 'refractionRatio', 0, 1 );
|
|
//folder.add( material, 'skinning' );
|
|
|
|
}
|
|
|
|
function guiMeshPhongMaterial ( gui, mesh, material, geometry ) {
|
|
|
|
var data = {
|
|
color : material.color.getHex(),
|
|
emissive : material.emissive.getHex(),
|
|
specular : material.specular.getHex(),
|
|
envMaps : envMapKeys,
|
|
map : textureMapKeys,
|
|
lightMap : textureMapKeys,
|
|
specularMap : textureMapKeys,
|
|
alphaMap : textureMapKeys
|
|
};
|
|
|
|
var folder = gui.addFolder('THREE.MeshPhongMaterial');
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
|
|
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
|
|
folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
|
|
|
|
folder.add( material, 'shininess', 1, 100);
|
|
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'wireframeLinewidth', 0, 10 );
|
|
folder.add( material, 'vertexColors', constants.colors);
|
|
folder.add( material, 'fog' );
|
|
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
|
|
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
|
|
folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
|
|
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
|
|
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
|
|
|
|
}
|
|
|
|
function chooseFromHash ( gui, mesh, geometry ) {
|
|
|
|
var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
|
|
var material;
|
|
|
|
switch (selectedMaterial) {
|
|
|
|
case "MeshBasicMaterial" :
|
|
|
|
material = new THREE.MeshBasicMaterial({color: 0x2194CE});
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshBasicMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case "MeshLambertMaterial" :
|
|
|
|
material = new THREE.MeshLambertMaterial({color: 0x2194CE});
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshLambertMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case "MeshPhongMaterial" :
|
|
|
|
material = new THREE.MeshPhongMaterial({color: 0x2194CE});
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshPhongMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case "MeshDepthMaterial" :
|
|
|
|
material = new THREE.MeshDepthMaterial({color: 0x2194CE});
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshDepthMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case "MeshNormalMaterial" :
|
|
|
|
material = new THREE.MeshNormalMaterial();
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshNormalMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case "LineBasicMaterial" :
|
|
|
|
material = new THREE.LineBasicMaterial({color: 0x2194CE});
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiLineBasicMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
}
|
|
|
|
}
|