Skip to content

Commit 06cf6f5

Browse files
odys-zodys-z
committed
TAG: upgrading to Three.js r120 (details bellow)
It's seems the only way to use new function like EXR or HDR. The problem is r110 is the latest npm version. see: https://stackoverflow.com/questions/55208134/why-am-i-getting-the-error-css3dobject-is-not-exported-from-three/55208449#55208449 mrdoob/three.js#16095 even Three.js Fundamental uses r119. There is no WebGLCubeRenderTarget in r110.
1 parent 28fce84 commit 06cf6f5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+52437
-188
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ temp
33
docs/jsdoc
44
packages/three/geometries/*
55
!packages/three/geometries/TubeGeometry.js
6+
!dist/three.module-r120.js
67

78
# user - examples
89
# !examples/dist
@@ -96,7 +97,7 @@ typings/
9697

9798
# Nuxt.js build / generate output
9899
.nuxt
99-
dist
100+
dist/*
100101

101102
# Gatsby files
102103
.cache/

‎lib/chart/svg/d3pie.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import * as THREE from 'three';
1+
// import * as THREE from 'three';
2+
import * as THREE from '../../../packages/three/three.module-r120';
23
import * as ECS from '../../../packages/ecs-js/index'
34

45
// https://www.npmjs.com/package/d3

‎lib/osm/osm3.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
*
88
*/
99

10-
import * as THREE from 'three';
10+
// import * as THREE from 'three';
11+
import * as THREE from '../../packages/three/three.module-r120';
1112

1213
import {OsmUtils, Vec3, R} from './utils.js'
1314
import {TilesKeeper} from './tiles-keeper.js'
@@ -173,8 +174,8 @@ export class OSM3 {
173174
wireframe: true,
174175
opacity: 0.2 } ));
175176

176-
var vertexNormalsHelper = new THREE.VertexNormalsHelper( wire, 1 );
177-
wire.add( vertexNormalsHelper );
177+
// var vertexNormalsHelper = new THREE.VertexNormalsHelper( wire, 1 );
178+
// wire.add( vertexNormalsHelper );
178179

179180
mesh = wire;
180181
}

‎lib/osm/utils.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
*
88
*/
99

10-
import * as THREE from 'three';
10+
// import * as THREE from 'three';
11+
import * as THREE from '../../packages/three/three.module-r120';
1112

1213
const blankMaterial = new THREE.MeshBasicMaterial(
1314
{color: 0xc0c0c0, side: THREE.DoubleSide} );

‎lib/sys/canvtex.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

2-
import * as THREE from 'three';
2+
// import * as THREE from 'three';
3+
import * as THREE from '../../packages/three/three.module-r120';
34
import * as ECS from '../../packages/ecs-js/index'
45

56
import * as xglsl from '../xutils/xglsl'

‎lib/sys/channelfilter.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as ECS from '../../packages/ecs-js/index';
2-
import * as THREE from 'three';
2+
// import * as THREE from 'three';
3+
import * as THREE from '../../packages/three/three.module-r120';
34

45
import {LayerChannel, Layers} from '../xmath/layer';
56

‎lib/sys/ext/orthocclude.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

2-
import * as THREE from 'three';
2+
// import * as THREE from 'three';
3+
import * as THREE from '../../../packages/three/three.module-r120';
34
// import {Material, MeshBasicMaterial} from 'three'
45
import * as ECS from '../../../packages/ecs-js/index'
56
import {LayerChannel, Layers} from '../../xmath/layer'

‎lib/sys/gpupicker.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import * as THREE from 'three';
1+
// import * as THREE from 'three';
2+
import * as THREE from '../../packages/three/three.module-r120';
23
import * as ECS from '../../packages/ecs-js/index';
34
import {x} from '../xapp/xworld';
45
import {ramTexture} from '../xutils/xcommon';

‎lib/sys/helper/textag.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

2-
import * as THREE from 'three';
2+
// import * as THREE from 'three';
3+
import * as THREE from '../../../packages/three/three.module-r120';
34
import * as ECS from '../../../packages/ecs-js/index'
45

56
import AssetKeepr from '../xutils/assetkeepr.js';

‎lib/sys/hud.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as ECS from '../../packages/ecs-js/index';
2-
import * as THREE from 'three';
2+
// import * as THREE from 'three';
3+
import * as THREE from '../../packages/three/three.module-r120';
34
import {XError, ramTexture} from '../xutils/xcommon';
45
import {AssetType} from '../component/visual'
56
import {Obj3Type} from '../component/obj3'

‎lib/sys/mapctrl.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as ECS from '../../packages/ecs-js/index';
2-
import * as THREE from 'three';
2+
// import * as THREE from 'three';
3+
import * as THREE from '../../packages/three/three.module-r120';
34
import {XMapControls, XOrbitControls} from '../../packages/three/orbit-controls'
45

56
import {vec3} from '../xmath/vec';

‎lib/sys/raypicker.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import * as THREE from 'three';
1+
// import * as THREE from 'three';
2+
import * as THREE from '../../packages/three/three.module-r120';
23
import * as ECS from '../../packages/ecs-js/index';
34
import {x} from '../xapp/xworld';
45
import {ramTexture} from '../xutils/xcommon';

‎lib/sys/thrender.js

+77-16
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11

2-
import * as THREE from 'three'
2+
// import * as THREE from 'three'
3+
import * as THREE from '../../packages/three/three.module-r120'
34
import {EffectComposer} from '../../packages/three/postprocessing/EffectComposer'
45
import {RenderPass} from '../../packages/three/postprocessing/RenderPass'
56
import {OutlinePass} from '../../packages/three/postprocessing/OutlinePass'
67
import {Reflector} from '../../packages/three/core/Reflector'
78
import {EXRLoader} from '../../packages/three/EXRLoader'
9+
import {PMREMGenerator} from '../../packages/three/extra/PMREMGenerator'
810

911
import * as ECS from '../../packages/ecs-js/index'
1012

@@ -22,6 +24,8 @@ import xgeom from '../xmath/geom'
2224

2325
const any = ['Obj3'];
2426

27+
var __renderer__11_; // for debug
28+
2529
/**@class Thrender
2630
* @classdesc
2731
* X renderer of ecs subsystem based on Three.js renderer.
@@ -434,9 +438,10 @@ export default class Thrender extends ECS.System {
434438
addObj3(scene, a, e);
435439
break;
436440
case AssetType.skyBox:
437-
mat = Thrender.create3Material(uniforms, e.Visual.vtype, e.Visual.paras, e.Obj3);
438-
var m = Thrender.createObj3mesh(e.Obj3, e.Obj3.geom, mat, e.Visual);
439-
addObj3(scene, m, e);
441+
mat = Thrender.create3Material(uniforms, e.Visual.vtype,
442+
e.Visual.paras, e.Obj3, scene);
443+
//var m = Thrender.createObj3mesh(e.Obj3, e.Obj3.geom, mat, e.Visual);
444+
// addObj3(scene, m, e);
440445
break;
441446
case AssetType.reflector3js:
442447
var g = Thrender.geometryCase(e.Obj3.geom, e.Obj3.box,
@@ -585,6 +590,43 @@ export default class Thrender extends ECS.System {
585590
// Three.js directional light and map co-orperate with a few special
586591
// materials' uniforms
587592
uniforms = Object.assign(uniforms, THREE.ShaderLib.shadow.uniforms);
593+
594+
/* r110 style:
595+
Uniforms.lights = {
596+
ambientLightColor: { value: [] },
597+
lightProbe: { value: [] },
598+
599+
directionalLights: { value: [], properties: {
600+
direction: {},
601+
color: {},
602+
603+
shadow: {},
604+
shadowBias: {},
605+
shadowRadius: {},
606+
shadowMapSize: {}
607+
} },
608+
...
609+
}
610+
r120 style:
611+
directionalLights: { value: [], properties: {
612+
direction: {},
613+
color: {}
614+
} },
615+
This difference makes x-visual's shaders following r110 failed.
616+
*/
617+
uniforms = THREE.UniformsUtils.merge(
618+
[ uniforms,
619+
{ directionalLights: { value: [], properties: {
620+
direction: {},
621+
color: {},
622+
623+
shadow: {},
624+
shadowBias: {},
625+
shadowRadius: {},
626+
shadowMapSize: {}
627+
} } }
628+
] );
629+
588630
delete uniforms.vertexShader;
589631
delete uniforms.fragmentShader;
590632
}
@@ -618,7 +660,7 @@ export default class Thrender extends ECS.System {
618660

619661
// TODO merge with mesh branch after debugged
620662
static create3Material(uniforms = {}, vtype, vparas, obj3, scene) {
621-
let def = {scene};
663+
let def = {};
622664
let u_tex = GlUniform.uTex(vparas);
623665

624666
def.map = GlUniform.tex0(); //new ramTexture(3, 4, {alpha: alp});
@@ -660,40 +702,58 @@ export default class Thrender extends ECS.System {
660702
if (vtype === AssetType.mesh)
661703
mat = new THREE.MeshPhongMaterial(def);
662704
else if (vtype === AssetType.skyBox) {
663-
def["USE_MAP"] = "";
705+
//def["USE_MAP"] = "";
706+
def.scene = scene;
664707
mat = new THREE.MeshBasicMaterial(def);
665708
if (Array.isArray(u_tex) && u_tex.length === 6) {
666709
// cube
667710
throw new XError("Sky box + cube textures, You really need this?");
668711
}
669712
else {
670713
// Equirectangle
714+
let pth = 'assets/' + (Array.isArray(u_tex) ? u_tex[0] : u_tex);
715+
console.log(pth);
671716
new EXRLoader()
672-
.setDataType( THREE.UnsignedByteType )
717+
.setDataType( THREE.FloatType )
673718
.load(
674-
Array.isArray(u_tex) ? u_tex[0] : u_tex,
719+
pth,
675720
function() {
676721
var _def = def;
677722
var _mat = mat;
678723
return function ( texture ) {
679-
/*
680-
*/
681724
let skyTarget = pmremGenerator.fromEquirectangular( texture );
682725
// _def.map = cubeTarget.texture;
683-
if (_def.scene)
684-
_def.scene.background = skyTarget.texture;
685-
// _mat.map = skyTarget.texture;
726+
// if (_def.scene)
727+
// _def.scene.background = skyTarget.texture;
728+
_mat.map = skyTarget.texture;
686729

687730
texture.dispose();
688-
731+
689732
// let mtr = new THREE.MeshBasicMaterial( { map: texture } );
690733
// _def.scene.background = mtr;
691734
// _def.scene.background = texture;
692735
// texture.needsUpdate = true;
693736
}
694737
} () );
738+
739+
var pmremGenerator = new PMREMGenerator( __renderer__11_ );
740+
pmremGenerator.compileCubemapShader();
741+
742+
/*
743+
let loader = new THREE.TextureLoader();
744+
let texture = loader.load(
745+
'../assets/tex/sky-blue.jpg',
746+
function() {
747+
var _def = def;
748+
var _mat = mat;
749+
return function ( texture ) {
750+
let rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
751+
rt.fromEquirectangularTexture(__renderer__11_, texture);
752+
_def.scene.background = rt;
753+
}
754+
}());
755+
*/
695756
}
696-
// mat = new THREE.MeshPhongMaterial(def);
697757
}
698758
else // mesh_basic
699759
mat = new THREE.MeshBasicMaterial(def);
@@ -1423,11 +1483,12 @@ export default class Thrender extends ECS.System {
14231483
{ canvas: canvas, alpha: true, antialias: true },
14241484
x.options.renderer )
14251485
var renderer = new THREE.WebGLRenderer( opt );
1486+
__renderer__11_ = renderer;
14261487

14271488
renderer.shadowMap.enabled = true;
14281489
// renderer.shadowMap.type = opt.shadowMap.type;
14291490
// renderer.shadowMapCullFace = THREE.CullFaceBack;
1430-
renderer.toneMappingExposure = 1.;
1491+
// renderer.toneMappingExposure = 1.;
14311492

14321493
if (! x.options.shadow)
14331494
x.options.shadow = {};

‎lib/sys/tween/animizer.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
*
55
*/
66

7-
import * as THREE from 'three';
7+
// import * as THREE from 'three';
8+
import * as THREE from '../../../packages/three/three.module-r120';
89
import * as ECS from '../../../packages/ecs-js/index';
910

1011
import {AnimType, ModelSeqs, AnimCate} from '../../component/morph';

‎lib/xapp/xworld.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as ECS from '../../packages/ecs-js/index';
22

3-
import * as THREE from 'three'
3+
// import * as THREE from 'three'
4+
import * as THREE from '../../packages/three/three.module-r120';
45

56
// npm i --save-dev babel-plugin-wildcard
67
// .babelrc: { "plugins": ["wildcard"] }

‎lib/xmath/geom.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import * as THREE from 'three'
1+
// import * as THREE from 'three'
2+
import * as THREE from '../../packages/three/three.module-r120';
23
import earcut from 'earcut'
34
import {DirTubeBufferGeometry, DirTubeGeometry} from '../../packages/three/geometries/TubeGeometry'
45

‎lib/xmath/vec.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
* Vector and Matrix Helper
33
*/
44

5-
import * as THREE from 'three'
5+
// import * as THREE from 'three'
6+
import * as THREE from '../../packages/three/three.module-r120';
67
import {XError} from '../xutils/xcommon'
78
import xmath from './math'
89

‎lib/xutils/assetkeepr.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import * as THREE from 'three';
1+
// import * as THREE from 'three';
2+
import * as THREE from '../../packages/three/three.module-r120';
23
import * as oboe from 'oboe';
34

45
// For why using source instead of npm package, see packages/three/README.md

‎lib/xutils/xcommon.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import * as THREE from 'three';
1+
// import * as THREE from 'three';
2+
import * as THREE from '../../packages/three/three.module-r120';
23

34
/**
45
* Stub for jsdoc, a collection of common methods

‎lib/xutils/xglsl.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

2-
import * as THREE from 'three'
2+
// import * as THREE from 'three'
3+
import * as THREE from '../../packages/three/three.module-r120';
34
import {x} from '../xapp/xworld'
45
import {ShaderFlag, ShaderAlpha} from '../component/visual'
56
import * as xutils from './xcommon'

‎packages/three/EXRLoader.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import {
4343
LinearFilter,
4444
RGBAFormat,
4545
RGBFormat
46-
} from "three";
46+
} from "./three.module-r120.js";
4747

4848
// /*
4949
// Copyright (c) 2014 - 2017, Syoyo Fujita
@@ -1276,6 +1276,7 @@ EXRLoader.prototype = Object.assign( Object.create( DataTextureLoader.prototype
12761276

12771277
switch ( texture.type ) {
12781278

1279+
default:
12791280
case FloatType:
12801281

12811282
texture.encoding = LinearEncoding;

‎packages/three/GLTFLoader.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ import {
6868
VectorKeyframeTrack,
6969
VertexColors,
7070
sRGBEncoding
71-
} from "three";
71+
} from "./three.module-r120";
7272

7373
var GLTFLoader = ( function () {
7474

‎packages/three/SVGLoader.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
ShapePath,
1616
Vector2,
1717
Vector3
18-
} from "three"
18+
} from "./three.module-r120"
1919

2020
var SVGLoader = function ( manager ) {
2121

‎packages/three/core/Reflector.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
Vector4,
1818
WebGLRenderTarget,
1919
ShaderLib
20-
} from "three";
20+
} from "../three.module-r120.js";
2121

2222
var Reflector = function ( geometry, options ) {
2323

0 commit comments

Comments
 (0)