Update three.js to the latest version #160

This commit is contained in:
kovacsv 2021-10-30 08:43:25 +02:00
parent a1c77ea263
commit 69430fd8f2
20 changed files with 191 additions and 153 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 180 KiB

After

Width:  |  Height:  |  Size: 181 KiB

File diff suppressed because one or more lines are too long

6
libs/three.min-r134.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -1299,7 +1299,7 @@
for ( let i = 0; i < buildData.length; i ++ ) {
const buildItem = buildData[ i ];
const object3D = objects[ buildItem[ 'objectId' ] ]; // apply transform
const object3D = objects[ buildItem[ 'objectId' ] ].clone(); // apply transform
const transform = buildItem[ 'transform' ];

View File

@ -1110,6 +1110,10 @@
data.parameters = parseEffectParameters( child );
break;
case 'extra':
data.extra = parseEffectExtra( child );
break;
}
}
@ -1267,6 +1271,10 @@
break;
case 'bump':
data[ child.nodeName ] = parseEffectExtraTechniqueBump( child );
break;
}
}
@ -1311,6 +1319,37 @@
data[ child.nodeName ] = parseInt( child.textContent );
break;
case 'bump':
data[ child.nodeName ] = parseEffectExtraTechniqueBump( child );
break;
}
}
return data;
}
function parseEffectExtraTechniqueBump( xml ) {
var data = {};
for ( var i = 0, l = xml.childNodes.length; i < l; i ++ ) {
var child = xml.childNodes[ i ];
if ( child.nodeType !== 1 ) continue;
switch ( child.nodeName ) {
case 'texture':
data[ child.nodeName ] = {
id: child.getAttribute( 'texture' ),
texcoord: child.getAttribute( 'texcoord' ),
extra: parseEffectParameterTexture( child )
};
break;
}
}
@ -1383,7 +1422,6 @@
const effect = getEffect( data.url );
const technique = effect.profile.technique;
const extra = effect.profile.extra;
let material;
switch ( technique.type ) {
@ -1559,6 +1597,7 @@
break;
default:
material.opacity = 1 - transparency.float;
console.warn( 'THREE.ColladaLoader: Invalid opaque type "%s" of transparent tag.', transparent.opaque );
}
@ -1570,9 +1609,28 @@
} //
if ( extra !== undefined && extra.technique !== undefined && extra.technique.double_sided === 1 ) {
if ( technique.extra !== undefined && technique.extra.technique !== undefined ) {
material.side = THREE.DoubleSide;
const techniques = technique.extra.technique;
for ( const k in techniques ) {
const v = techniques[ k ];
switch ( k ) {
case 'double_sided':
material.side = v === 1 ? THREE.DoubleSide : THREE.FrontSide;
break;
case 'bump':
material.normalMap = getTexture( v.texture );
material.normalScale = new THREE.Vector2( 1, 1 );
break;
}
}
}

View File

@ -549,7 +549,13 @@
case 'DiffuseColor':
case 'Maya|TEX_color_map':
parameters.map = scope.getTexture( textureMap, child.ID );
parameters.map.encoding = THREE.sRGBEncoding;
if ( parameters.map !== undefined ) {
parameters.map.encoding = THREE.sRGBEncoding;
}
break;
case 'DisplacementColor':
@ -558,7 +564,13 @@
case 'EmissiveColor':
parameters.emissiveMap = scope.getTexture( textureMap, child.ID );
parameters.emissiveMap.encoding = THREE.sRGBEncoding;
if ( parameters.emissiveMap !== undefined ) {
parameters.emissiveMap.encoding = THREE.sRGBEncoding;
}
break;
case 'NormalMap':
@ -568,13 +580,25 @@
case 'ReflectionColor':
parameters.envMap = scope.getTexture( textureMap, child.ID );
parameters.envMap.mapping = THREE.EquirectangularReflectionMapping;
parameters.envMap.encoding = THREE.sRGBEncoding;
if ( parameters.envMap !== undefined ) {
parameters.envMap.mapping = THREE.EquirectangularReflectionMapping;
parameters.envMap.encoding = THREE.sRGBEncoding;
}
break;
case 'SpecularColor':
parameters.specularMap = scope.getTexture( textureMap, child.ID );
parameters.specularMap.encoding = THREE.sRGBEncoding;
if ( parameters.specularMap !== undefined ) {
parameters.specularMap.encoding = THREE.sRGBEncoding;
}
break;
case 'TransparentColor':
@ -757,7 +781,6 @@
} );
this.bindSkeleton( deformers.skeletons, geometryMap, modelMap );
this.createAmbientLight();
this.setupMorphMaterials();
sceneGraph.traverse( function ( node ) {
if ( node.userData.transformData ) {
@ -1287,7 +1310,7 @@
for ( const nodeID in BindPoseNode ) {
if ( BindPoseNode[ nodeID ].attrType === 'BindPose' ) {
if ( BindPoseNode[ nodeID ].attrType === 'BindPose' && BindPoseNode[ nodeID ].NbPoseNodes > 0 ) {
const poseNodes = BindPoseNode[ nodeID ].PoseNode;
@ -1336,71 +1359,6 @@
}
setupMorphMaterials() {
const scope = this;
sceneGraph.traverse( function ( child ) {
if ( child.isMesh ) {
if ( child.geometry.morphAttributes.position && child.geometry.morphAttributes.position.length ) {
if ( Array.isArray( child.material ) ) {
child.material.forEach( function ( material, i ) {
scope.setupMorphMaterial( child, material, i );
} );
} else {
scope.setupMorphMaterial( child, child.material );
}
}
}
} );
}
setupMorphMaterial( child, material, index ) {
const uuid = child.uuid;
const matUuid = material.uuid; // if a geometry has morph targets, it cannot share the material with other geometries
let sharedMat = false;
sceneGraph.traverse( function ( node ) {
if ( node.isMesh ) {
if ( Array.isArray( node.material ) ) {
node.material.forEach( function ( mat ) {
if ( mat.uuid === matUuid && node.uuid !== uuid ) sharedMat = true;
} );
} else if ( node.material.uuid === matUuid && node.uuid !== uuid ) sharedMat = true;
}
} );
if ( sharedMat === true ) {
const clonedMat = material.clone();
clonedMat.morphTargets = true;
if ( index === undefined ) child.material = clonedMat; else child.material[ index ] = clonedMat;
} else material.morphTargets = true;
}
} // parse Geometry data from FBXTree and return map of BufferGeometries
@ -2151,16 +2109,8 @@
}
const curve = new THREE.NURBSCurve( degree, knots, controlPoints, startKnot, endKnot );
const vertices = curve.getPoints( controlPoints.length * 7 );
const positions = new Float32Array( vertices.length * 3 );
vertices.forEach( function ( vertex, i ) {
vertex.toArray( positions, i * 3 );
} );
const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
return geometry;
const points = curve.getPoints( controlPoints.length * 12 );
return new THREE.BufferGeometry().setFromPoints( points );
}
@ -3745,16 +3695,15 @@
}
const lLRM = new THREE.Matrix4().copy( lPreRotationM ).multiply( lRotationM ).multiply( lPostRotationM ); // Global Rotation
const lLRM = lPreRotationM.clone().multiply( lRotationM ).multiply( lPostRotationM ); // Global Rotation
const lParentGRM = new THREE.Matrix4();
lParentGRM.extractRotation( lParentGX ); // Global Shear*Scaling
const lParentTM = new THREE.Matrix4();
lParentTM.copyPosition( lParentGX );
const lParentGSM = new THREE.Matrix4();
const lParentGRSM = new THREE.Matrix4().copy( lParentTM ).invert().multiply( lParentGX );
lParentGSM.copy( lParentGRM ).invert().multiply( lParentGRSM );
const lParentGRSM = lParentTM.clone().invert().multiply( lParentGX );
const lParentGSM = lParentGRM.clone().invert().multiply( lParentGRSM );
const lLSM = lScalingM;
const lGlobalRS = new THREE.Matrix4();
@ -3769,23 +3718,20 @@
} else {
const lParentLSM = new THREE.Matrix4().scale( new THREE.Vector3().setFromMatrixScale( lParentLX ) );
const lParentLSM_inv = new THREE.Matrix4().copy( lParentLSM ).invert();
const lParentGSM_noLocal = new THREE.Matrix4().copy( lParentGSM ).multiply( lParentLSM_inv );
const lParentLSM_inv = lParentLSM.clone().invert();
const lParentGSM_noLocal = lParentGSM.clone().multiply( lParentLSM_inv );
lGlobalRS.copy( lParentGRM ).multiply( lLRM ).multiply( lParentGSM_noLocal ).multiply( lLSM );
}
const lRotationPivotM_inv = new THREE.Matrix4();
lRotationPivotM_inv.copy( lRotationPivotM ).invert();
const lScalingPivotM_inv = new THREE.Matrix4();
lScalingPivotM_inv.copy( lScalingPivotM ).invert(); // Calculate the local transform matrix
const lRotationPivotM_inv = lRotationPivotM.clone().invert();
const lScalingPivotM_inv = lScalingPivotM.clone().invert(); // Calculate the local transform matrix
let lTransform = new THREE.Matrix4();
lTransform.copy( lTranslationM ).multiply( lRotationOffsetM ).multiply( lRotationPivotM ).multiply( lPreRotationM ).multiply( lRotationM ).multiply( lPostRotationM ).multiply( lRotationPivotM_inv ).multiply( lScalingOffsetM ).multiply( lScalingPivotM ).multiply( lScalingM ).multiply( lScalingPivotM_inv );
let lTransform = lTranslationM.clone().multiply( lRotationOffsetM ).multiply( lRotationPivotM ).multiply( lPreRotationM ).multiply( lRotationM ).multiply( lPostRotationM ).multiply( lRotationPivotM_inv ).multiply( lScalingOffsetM ).multiply( lScalingPivotM ).multiply( lScalingM ).multiply( lScalingPivotM_inv );
const lLocalTWithAllPivotAndOffsetInfo = new THREE.Matrix4().copyPosition( lTransform );
const lGlobalTranslation = new THREE.Matrix4().copy( lParentGX ).multiply( lLocalTWithAllPivotAndOffsetInfo );
const lGlobalTranslation = lParentGX.clone().multiply( lLocalTWithAllPivotAndOffsetInfo );
lGlobalT.copyPosition( lGlobalTranslation );
lTransform = new THREE.Matrix4().copy( lGlobalT ).multiply( lGlobalRS ); // from global to local
lTransform = lGlobalT.clone().multiply( lGlobalRS ); // from global to local
lTransform.premultiply( lParentGX.invert() );
return lTransform;

View File

@ -7,7 +7,7 @@
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<!-- engine start -->
<script type="text/javascript" src="../source/core/core.js"></script>
@ -99,7 +99,7 @@
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/gltf/Box/glTF/Box.gltf">
</div>
</div>
</body>
</html>

View File

@ -7,7 +7,7 @@
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<!-- engine start -->
<script type="text/javascript" src="../source/core/core.js"></script>
@ -95,17 +95,23 @@
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/gltf/Box/glTF-Draco/Box.gltf,../../test/testfiles/gltf/Box/glTF-Draco/Box.bin">
model="../../test/testfiles/gltf/Box/glTF-Binary/Box.glb"
environmentmap="../website/assets/envmaps/fishermans_bastion/posx.jpg,../website/assets/envmaps/fishermans_bastion/negx.jpg,../website/assets/envmaps/fishermans_bastion/posy.jpg,../website/assets/envmaps/fishermans_bastion/negy.jpg,../website/assets/envmaps/fishermans_bastion/posz.jpg,../website/assets/envmaps/fishermans_bastion/negz.jpg">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/gltf/Box/glTF-Draco/Box.gltf,../../test/testfiles/gltf/Box/glTF-Draco/Box.bin"
environmentmap="../website/assets/envmaps/fishermans_bastion/posx.jpg,../website/assets/envmaps/fishermans_bastion/negx.jpg,../website/assets/envmaps/fishermans_bastion/posy.jpg,../website/assets/envmaps/fishermans_bastion/negy.jpg,../website/assets/envmaps/fishermans_bastion/posz.jpg,../website/assets/envmaps/fishermans_bastion/negz.jpg">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/gltf/DamagedHelmet/glTF-Binary/DamagedHelmet.glb">
</div>
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/gltf/DamagedHelmet/glTF-Binary/DamagedHelmet.glb"
environmentmap="../website/assets/envmaps/fishermans_bastion/posx.jpg,../website/assets/envmaps/fishermans_bastion/negx.jpg,../website/assets/envmaps/fishermans_bastion/posy.jpg,../website/assets/envmaps/fishermans_bastion/negy.jpg,../website/assets/envmaps/fishermans_bastion/posz.jpg,../website/assets/envmaps/fishermans_bastion/negz.jpg">
</div>
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/zip/cube_four_instances.zip">

View File

@ -4,10 +4,10 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<!-- engine start -->
<script type="text/javascript" src="../source/core/core.js"></script>
<script type="text/javascript" src="../source/core/taskrunner.js"></script>

View File

@ -7,7 +7,7 @@
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<!-- engine start -->
<script type="text/javascript" src="../source/core/core.js"></script>
@ -80,7 +80,7 @@
border: 1px solid #eeeeee;
margin: 0px 4px 4px 0px;
}
</style>
</style>
</head>
<body>

View File

@ -7,7 +7,7 @@
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<!-- engine start -->
<script type="text/javascript" src="../source/core/core.js"></script>
@ -102,7 +102,7 @@
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/not_exising.mtl,../../test/testfiles/obj/hundred_cubes.mtl">
</div>
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../test/testfiles/3ds/cube_four_instances.3ds,../../test/testfiles/3ds/texture.png"

View File

@ -4,10 +4,10 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<!-- engine start -->
<script type="text/javascript" src="../source/core/core.js"></script>
<script type="text/javascript" src="../source/core/taskrunner.js"></script>

View File

@ -4,10 +4,10 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<!-- engine start -->
<script type="text/javascript" src="../source/core/core.js"></script>
<script type="text/javascript" src="../source/core/taskrunner.js"></script>

View File

@ -7,7 +7,7 @@
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<script type='text/javascript'>
function HasHighpDriverIssue ()
{
@ -17,18 +17,18 @@
canvas : canvas,
antialias : true
};
let renderer = new THREE.WebGLRenderer (parameters);
renderer.setClearColor ('#ffffff', 1);
renderer.setSize (10, 10);
let scene = new THREE.Scene ();
let ambientLight = new THREE.AmbientLight (0x888888);
scene.add (ambientLight);
let light = new THREE.DirectionalLight (0x888888);
light.position.set (0.0, 0.0, 1.0);
light.position.set (0.0, 0.0, 1.0);
scene.add (light);
let camera = new THREE.PerspectiveCamera (45.0, 1.0, 0.1, 1000.0);
@ -52,14 +52,14 @@
context.UNSIGNED_BYTE,
pixels
);
document.body.removeChild (canvas);
if (pixels[0] < 50 && pixels[1] < 50 && pixels[2] < 50) {
return true;
}
return false;
}
window.onload = function () {
let hasIssue = HasHighpDriverIssue ();
let resultDiv = document.createElement ('div');
@ -70,7 +70,7 @@
</head>
<body>
</body>
</html>

View File

@ -7,7 +7,7 @@
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../../libs/three.min-129.js"></script>
<script type="text/javascript" src="../../libs/three.min-r134.js"></script>
<script type='text/javascript'>
function Sandbox3D ()
{
@ -17,20 +17,20 @@
canvas : canvas,
antialias : true
};
let width = 800;
let height = 600;
let renderer = new THREE.WebGLRenderer (parameters);
renderer.setClearColor ('#ffffff', 1);
renderer.setSize (width, height);
let scene = new THREE.Scene ();
let ambientLight = new THREE.AmbientLight (0x888888);
scene.add (ambientLight);
let light = new THREE.DirectionalLight (0x888888);
light.position.set (3.0, -1.5, 2.0);
light.position.set (3.0, -1.5, 2.0);
scene.add (light);
let camera = new THREE.PerspectiveCamera (45.0, width / height, 0.1, 1000.0);
@ -49,7 +49,7 @@
scene.add (mesh);
renderer.render (scene, camera);
}
window.onload = function () {
Sandbox3D ();
};

View File

@ -28,13 +28,23 @@ OV.GetDefaultCamera = function (direction)
return null;
};
OV.TraverseThreeObject = function (object, processor)
{
if (!processor (object)) {
return false;
}
for (let child of object.children) {
if (!OV.TraverseThreeObject (child, processor)) {
return false;
}
}
return true;
};
OV.GetShadingTypeOfObject = function (mainObject)
{
let shadingType = null;
mainObject.traverse ((obj) => {
if (shadingType !== null) {
return;
}
OV.TraverseThreeObject (mainObject, (obj) => {
if (obj.isMesh) {
for (const material of obj.material) {
if (material.type === 'MeshPhongMaterial') {
@ -42,9 +52,10 @@ OV.GetShadingTypeOfObject = function (mainObject)
} else if (material.type === 'MeshStandardMaterial') {
shadingType = OV.ShadingModelType.Physical;
}
break;
return false;
}
}
return true;
});
return shadingType;
};
@ -195,8 +206,12 @@ OV.ShadingModel = class
{
this.type = type;
if (this.type === OV.ShadingModelType.Phong) {
this.ambientLight.color.set (0x888888);
this.directionalLight.color.set (0x888888);
this.scene.environment = null;
} else if (this.type === OV.ShadingModelType.Physical) {
this.ambientLight.color.set (0x000000);
this.directionalLight.color.set (0x555555);
this.scene.environment = this.environment;
}
}
@ -214,6 +229,22 @@ OV.ShadingModel = class
const lightDir = OV.SubCoord3D (camera.eye, camera.center);
this.directionalLight.position.set (lightDir.x, lightDir.y, lightDir.z);
}
CreateHighlightMaterial (highlightColor)
{
if (this.type === OV.ShadingModelType.Phong) {
return new THREE.MeshPhongMaterial ({
color : highlightColor,
side : THREE.DoubleSide
});
} else if (this.type === OV.ShadingModelType.Physical) {
return new THREE.MeshStandardMaterial ({
color : highlightColor,
side : THREE.DoubleSide
});
}
return null;
}
};
OV.Viewer = class
@ -420,12 +451,8 @@ OV.Viewer = class
SetMeshesHighlight (highlightColor, isHighlighted)
{
function CreateHighlightMaterials (originalMaterials, highlightColor)
function CreateHighlightMaterials (originalMaterials, highlightMaterial)
{
const highlightMaterial = new THREE.MeshPhongMaterial ({
color : highlightColor,
side : THREE.DoubleSide
});
let highlightMaterials = [];
for (let i = 0; i < originalMaterials.length; i++) {
highlightMaterials.push (highlightMaterial);
@ -433,12 +460,13 @@ OV.Viewer = class
return highlightMaterials;
}
const highlightMaterial = this.shading.CreateHighlightMaterial (highlightColor);
this.geometry.EnumerateMeshes ((mesh) => {
let highlighted = isHighlighted (mesh.userData);
if (highlighted) {
if (mesh.userData.threeMaterials === null) {
mesh.userData.threeMaterials = mesh.material;
mesh.material = CreateHighlightMaterials (mesh.material, highlightColor);
mesh.material = CreateHighlightMaterials (mesh.material, highlightMaterial);
}
} else {
if (mesh.userData.threeMaterials !== null) {

View File

@ -112,7 +112,7 @@ def CreatePackage (rootDir, websiteDir, packageDir, version):
zip.write (os.path.join (websiteDir, 'libs', 'loaders', lib), 'libs/loaders/' + lib)
for lib in os.listdir (os.path.join (websiteDir, 'libs', 'three_loaders')):
zip.write (os.path.join (websiteDir, 'libs', 'three_loaders', lib), 'libs/three_loaders/' + lib)
zip.write (os.path.join (websiteDir, 'libs', 'three.min-129.js'), 'three.min-129.js')
zip.write (os.path.join (websiteDir, 'libs', 'three.min-r134.js'), 'three.min-r134.js')
zip.write (os.path.join (websiteDir, 'libs', 'three.license.md'), 'three.license.md')
zip.write (os.path.join (websiteDir, 'o3dv', 'o3dv.min.js'), 'o3dv.min-' + version + '.js')
zip.write (os.path.join (rootDir, 'LICENSE.md'), 'o3dv.license.md')

View File

@ -3,7 +3,7 @@
"libs/jquery-3.5.1.min.js",
"libs/pickr.monolith.min-1.8.2.css",
"libs/pickr.es5.min-1.8.2.js",
"libs/three.min-129.js"
"libs/three.min-r134.js"
],
"engine_files" : [
"source/core/core.js",

View File

@ -15,7 +15,7 @@
<script type="text/javascript" src="../libs/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../libs/pickr.monolith.min-1.8.2.css">
<script type="text/javascript" src="../libs/pickr.es5.min-1.8.2.js"></script>
<script type="text/javascript" src="../libs/three.min-129.js"></script>
<script type="text/javascript" src="../libs/three.min-r134.js"></script>
<!-- libs end -->
<!-- engine start -->

View File

@ -12,7 +12,7 @@
<script type="text/javascript" src="../libs/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../libs/pickr.monolith.min-1.8.2.css">
<script type="text/javascript" src="../libs/pickr.es5.min-1.8.2.js"></script>
<script type="text/javascript" src="../libs/three.min-129.js"></script>
<script type="text/javascript" src="../libs/three.min-r134.js"></script>
<!-- libs end -->
<!-- meta start -->