lythreeframe 1.2.26 → 1.2.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/bundle.cjs.js
CHANGED
|
@@ -866,9 +866,9 @@ class TSmartPointer {
|
|
|
866
866
|
release() {
|
|
867
867
|
if (this.value !== null) {
|
|
868
868
|
this.referenceCount--;
|
|
869
|
-
console.log(`Reference count decreased to: ${this.referenceCount}`);
|
|
869
|
+
//console.log(`Reference count decreased to: ${this.referenceCount}`);
|
|
870
870
|
if (this.referenceCount === 0) {
|
|
871
|
-
console.log("No more references. Deleting object.");
|
|
871
|
+
//console.log("No more references. Deleting object.");
|
|
872
872
|
this.value = null;
|
|
873
873
|
}
|
|
874
874
|
}
|
|
@@ -1034,7 +1034,7 @@ class AssetManager {
|
|
|
1034
1034
|
if (newComp === null) {
|
|
1035
1035
|
threejsObject.children = children;
|
|
1036
1036
|
//threejsObject.parent = parent
|
|
1037
|
-
console.log("Unprocess", threejsObject);
|
|
1037
|
+
//console.log("Unprocess", threejsObject);
|
|
1038
1038
|
return null;
|
|
1039
1039
|
}
|
|
1040
1040
|
parentLYComponent.addChildComponent(newComp);
|
|
@@ -1539,12 +1539,34 @@ class Viewport {
|
|
|
1539
1539
|
this.outlineObjects = [];
|
|
1540
1540
|
this.postProcessParam = Object.assign({}, postProcessParam);
|
|
1541
1541
|
this._app = app;
|
|
1542
|
-
let element = null;
|
|
1543
1542
|
if (viewportParam.elementId) {
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1543
|
+
this._canvas = document.getElementById(viewportParam.elementId);
|
|
1544
|
+
}
|
|
1545
|
+
this.createRenderer(rendererParam);
|
|
1546
|
+
if (viewportParam.isLabelRendererNeeded) {
|
|
1547
|
+
this.createLabelRenderer();
|
|
1548
|
+
}
|
|
1549
|
+
if (this._canvas) {
|
|
1550
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
1551
|
+
for (let entry of entries) {
|
|
1552
|
+
if (entry.contentBoxSize) {
|
|
1553
|
+
this.onWindowResize();
|
|
1554
|
+
}
|
|
1555
|
+
}
|
|
1556
|
+
});
|
|
1557
|
+
this.resizeObserver.observe(this._canvas);
|
|
1558
|
+
}
|
|
1559
|
+
this.app.onCameraChangedDelegate.add(() => {
|
|
1560
|
+
this.setupPostProcess();
|
|
1561
|
+
});
|
|
1562
|
+
}
|
|
1563
|
+
createRenderer(rendererParam) {
|
|
1564
|
+
const element = this._canvas;
|
|
1565
|
+
if (this._renderer) {
|
|
1566
|
+
if (element) {
|
|
1567
|
+
element.removeChild(this._renderer.domElement);
|
|
1547
1568
|
}
|
|
1569
|
+
this._renderer.dispose();
|
|
1548
1570
|
}
|
|
1549
1571
|
let width = element ? element.clientWidth : 512;
|
|
1550
1572
|
let height = element ? element.clientHeight : 512;
|
|
@@ -1564,34 +1586,29 @@ class Viewport {
|
|
|
1564
1586
|
this._renderer.shadowMap.type = rendererParam.shadowMapType;
|
|
1565
1587
|
this._renderer.toneMapping = rendererParam.toneMapping;
|
|
1566
1588
|
this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
|
|
1567
|
-
if (
|
|
1568
|
-
this.
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1589
|
+
if (element) {
|
|
1590
|
+
element.appendChild(this._renderer.domElement);
|
|
1591
|
+
}
|
|
1592
|
+
}
|
|
1593
|
+
createLabelRenderer() {
|
|
1594
|
+
const element = this._canvas;
|
|
1595
|
+
if (this.labelRenderer) {
|
|
1574
1596
|
if (element) {
|
|
1575
|
-
element.
|
|
1597
|
+
element.removeChild(this.labelRenderer.domElement);
|
|
1576
1598
|
}
|
|
1599
|
+
this.labelRenderer.dispose();
|
|
1577
1600
|
}
|
|
1601
|
+
let width = element ? element.clientWidth : 512;
|
|
1602
|
+
let height = element ? element.clientHeight : 512;
|
|
1603
|
+
this.labelRenderer = new Addons_js.CSS2DRenderer();
|
|
1604
|
+
this.labelRenderer.setSize(width, height);
|
|
1605
|
+
this.labelRenderer.domElement.style.pointerEvents = 'none';
|
|
1606
|
+
this.labelRenderer.domElement.style.position = 'absolute';
|
|
1607
|
+
this.labelRenderer.domElement.style.top = '0px';
|
|
1608
|
+
this.labelRenderer.domElement.className = 'scene-labelRenderer';
|
|
1578
1609
|
if (element) {
|
|
1579
|
-
element.appendChild(this.
|
|
1580
|
-
this._canvas = element;
|
|
1610
|
+
element.appendChild(this.labelRenderer.domElement);
|
|
1581
1611
|
}
|
|
1582
|
-
if (this._canvas) {
|
|
1583
|
-
this.resizeObserver = new ResizeObserver((entries) => {
|
|
1584
|
-
for (let entry of entries) {
|
|
1585
|
-
if (entry.contentBoxSize) {
|
|
1586
|
-
this.onWindowResize();
|
|
1587
|
-
}
|
|
1588
|
-
}
|
|
1589
|
-
});
|
|
1590
|
-
this.resizeObserver.observe(this._canvas);
|
|
1591
|
-
}
|
|
1592
|
-
this.app.onCameraChangedDelegate.add(() => {
|
|
1593
|
-
this.setupPostProcess();
|
|
1594
|
-
});
|
|
1595
1612
|
}
|
|
1596
1613
|
init() {
|
|
1597
1614
|
this.setupPostProcess();
|
|
@@ -1612,14 +1629,14 @@ class Viewport {
|
|
|
1612
1629
|
case exports.PostProcessStepType.Bloom:
|
|
1613
1630
|
{
|
|
1614
1631
|
const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
|
|
1615
|
-
console.log("[PostProcess] BloomPass 构建完成");
|
|
1632
|
+
//console.log("[PostProcess] BloomPass 构建完成");
|
|
1616
1633
|
finalNode = finalNode.add(bloomPass);
|
|
1617
1634
|
break;
|
|
1618
1635
|
}
|
|
1619
1636
|
case exports.PostProcessStepType.DepthOfField:
|
|
1620
1637
|
{
|
|
1621
1638
|
const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
|
|
1622
|
-
console.log("[PostProcess] DOFPass 构建完成");
|
|
1639
|
+
//console.log("[PostProcess] DOFPass 构建完成");
|
|
1623
1640
|
finalNode = finalNode.add(dofPass);
|
|
1624
1641
|
break;
|
|
1625
1642
|
}
|
|
@@ -1666,7 +1683,7 @@ class Viewport {
|
|
|
1666
1683
|
// outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
|
|
1667
1684
|
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1668
1685
|
finalNode = outlinePulse.add(finalNode);
|
|
1669
|
-
console.log("[PostProcess] OutlinePass 构建完成");
|
|
1686
|
+
//console.log("[PostProcess] OutlinePass 构建完成");
|
|
1670
1687
|
break;
|
|
1671
1688
|
}
|
|
1672
1689
|
case exports.PostProcessStepType.Antialiasing:
|
|
@@ -1674,11 +1691,11 @@ class Viewport {
|
|
|
1674
1691
|
const aaParam = step;
|
|
1675
1692
|
if (aaParam.method === "fxaa") {
|
|
1676
1693
|
finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1677
|
-
console.log("[PostProcess] FXAAPass 构建完成");
|
|
1694
|
+
//console.log("[PostProcess] FXAAPass 构建完成");
|
|
1678
1695
|
}
|
|
1679
1696
|
if (aaParam.method === "smaa") {
|
|
1680
1697
|
finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1681
|
-
console.log("[PostProcess] SMAAPass 构建完成");
|
|
1698
|
+
//console.log("[PostProcess] SMAAPass 构建完成");
|
|
1682
1699
|
}
|
|
1683
1700
|
break;
|
|
1684
1701
|
}
|
|
@@ -1686,13 +1703,17 @@ class Viewport {
|
|
|
1686
1703
|
});
|
|
1687
1704
|
this.postProcessing.outputNode = finalNode;
|
|
1688
1705
|
this.postProcessing.needsUpdate = true;
|
|
1689
|
-
console.log("[PostProcess] setup complete",
|
|
1706
|
+
//console.log("[PostProcess] setup complete", this.postProcessParam.steps);
|
|
1690
1707
|
this.markRenderStateDirty();
|
|
1691
1708
|
}
|
|
1692
1709
|
updatePostProcess(steps) {
|
|
1693
1710
|
this.postProcessParam.steps = steps;
|
|
1694
1711
|
this.setupPostProcess();
|
|
1695
1712
|
}
|
|
1713
|
+
updateRendererSettings(data) {
|
|
1714
|
+
this.createRenderer(data);
|
|
1715
|
+
this.markRenderStateDirty();
|
|
1716
|
+
}
|
|
1696
1717
|
// updateBloomPass(params: BloomParam)
|
|
1697
1718
|
// {
|
|
1698
1719
|
// this.postProcessParam.bloom = { ...params };
|
|
@@ -1749,7 +1770,7 @@ class Viewport {
|
|
|
1749
1770
|
}
|
|
1750
1771
|
}
|
|
1751
1772
|
onWindowResize() {
|
|
1752
|
-
console.log("resize")
|
|
1773
|
+
//console.log("resize")
|
|
1753
1774
|
let ele = this._canvas;
|
|
1754
1775
|
if (!ele) {
|
|
1755
1776
|
return;
|
|
@@ -2194,59 +2215,90 @@ class Controller {
|
|
|
2194
2215
|
|
|
2195
2216
|
class CameraFactory {
|
|
2196
2217
|
static createCamera(param) {
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2218
|
+
try {
|
|
2219
|
+
switch (param.type) {
|
|
2220
|
+
case "Perspective":
|
|
2221
|
+
{
|
|
2222
|
+
let data = param;
|
|
2223
|
+
return new webgpu.PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
|
|
2224
|
+
}
|
|
2225
|
+
case "Orthographic":
|
|
2226
|
+
{
|
|
2227
|
+
let data = param;
|
|
2228
|
+
return new webgpu.OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
|
|
2229
|
+
}
|
|
2230
|
+
default:
|
|
2231
|
+
{
|
|
2232
|
+
throw new Error("Invalid camera type");
|
|
2233
|
+
}
|
|
2234
|
+
}
|
|
2203
2235
|
}
|
|
2204
|
-
|
|
2205
|
-
console.
|
|
2206
|
-
|
|
2207
|
-
|
|
2236
|
+
catch (error) {
|
|
2237
|
+
console.warn("[CameraFactory]Error occurred while creating camera: ", error);
|
|
2238
|
+
console.warn("[CameraFactory]Create default perspective camera instead");
|
|
2239
|
+
return new webgpu.PerspectiveCamera(50, 1, 0.1, 1000);
|
|
2208
2240
|
}
|
|
2209
|
-
return cam;
|
|
2210
2241
|
}
|
|
2211
2242
|
static updataCamera(param, camera) {
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2243
|
+
try {
|
|
2244
|
+
switch (param.type) {
|
|
2245
|
+
case "Perspective":
|
|
2246
|
+
{
|
|
2247
|
+
let data = param;
|
|
2248
|
+
if (camera instanceof webgpu.PerspectiveCamera) {
|
|
2249
|
+
camera.near = data.near;
|
|
2250
|
+
camera.far = data.far;
|
|
2251
|
+
camera.fov = data.fov;
|
|
2252
|
+
camera.aspect = data.aspect;
|
|
2253
|
+
return camera;
|
|
2254
|
+
}
|
|
2255
|
+
return new webgpu.PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
|
|
2256
|
+
}
|
|
2257
|
+
case "Orthographic":
|
|
2258
|
+
{
|
|
2259
|
+
let data = param;
|
|
2260
|
+
if (camera instanceof webgpu.OrthographicCamera) {
|
|
2261
|
+
camera.near = data.near;
|
|
2262
|
+
camera.far = data.far;
|
|
2263
|
+
camera.left = data.left;
|
|
2264
|
+
camera.right = data.right;
|
|
2265
|
+
camera.top = data.top;
|
|
2266
|
+
camera.bottom = data.bottom;
|
|
2267
|
+
return camera;
|
|
2268
|
+
}
|
|
2269
|
+
return new webgpu.OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
|
|
2270
|
+
}
|
|
2271
|
+
default:
|
|
2272
|
+
{
|
|
2273
|
+
throw new Error("Invalid camera type");
|
|
2274
|
+
}
|
|
2222
2275
|
}
|
|
2223
2276
|
}
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
camera.left = param.param.left;
|
|
2229
|
-
camera.right = param.param.right;
|
|
2230
|
-
camera.top = param.param.top;
|
|
2231
|
-
camera.bottom = param.param.bottom;
|
|
2232
|
-
return camera;
|
|
2233
|
-
}
|
|
2234
|
-
else {
|
|
2235
|
-
return new webgpu.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
|
|
2236
|
-
}
|
|
2277
|
+
catch (error) {
|
|
2278
|
+
console.warn("[CameraFactory]Error occurred while updating camera: ", error);
|
|
2279
|
+
console.warn("[CameraFactory]Update Failed. Return old camera instead");
|
|
2280
|
+
return camera;
|
|
2237
2281
|
}
|
|
2238
|
-
return camera;
|
|
2239
2282
|
}
|
|
2240
2283
|
}
|
|
2241
2284
|
|
|
2242
|
-
const
|
|
2285
|
+
const DefaultPerspectiveCameraParam = {
|
|
2243
2286
|
near: 0.1,
|
|
2244
2287
|
far: 1000,
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2288
|
+
type: "Perspective",
|
|
2289
|
+
fov: 50,
|
|
2290
|
+
aspect: 1,
|
|
2291
|
+
};
|
|
2292
|
+
const DefaultOrthographicCameraParam = {
|
|
2293
|
+
type: "Orthographic",
|
|
2294
|
+
near: 0.1,
|
|
2295
|
+
far: 1000,
|
|
2296
|
+
left: -1,
|
|
2297
|
+
right: 1,
|
|
2298
|
+
top: 1,
|
|
2299
|
+
bottom: -1,
|
|
2249
2300
|
};
|
|
2301
|
+
const DefaultCameraParam = JSON.parse(JSON.stringify(DefaultPerspectiveCameraParam));
|
|
2250
2302
|
|
|
2251
2303
|
const DefaultViewportParam = {
|
|
2252
2304
|
elementId: null,
|
|
@@ -2286,7 +2338,6 @@ class Actor extends BaseObject {
|
|
|
2286
2338
|
return this._world;
|
|
2287
2339
|
}
|
|
2288
2340
|
get name() {
|
|
2289
|
-
console.log("getname", this._name);
|
|
2290
2341
|
return this._name;
|
|
2291
2342
|
}
|
|
2292
2343
|
set name(name) {
|
|
@@ -3353,7 +3404,9 @@ exports.DefaultCameraParam = DefaultCameraParam;
|
|
|
3353
3404
|
exports.DefaultDOFParam = DefaultDOFParam;
|
|
3354
3405
|
exports.DefaultDenoiseParam = DefaultDenoiseParam;
|
|
3355
3406
|
exports.DefaultGTAOParam = DefaultGTAOParam;
|
|
3407
|
+
exports.DefaultOrthographicCameraParam = DefaultOrthographicCameraParam;
|
|
3356
3408
|
exports.DefaultOutlineParams = DefaultOutlineParams;
|
|
3409
|
+
exports.DefaultPerspectiveCameraParam = DefaultPerspectiveCameraParam;
|
|
3357
3410
|
exports.DefaultPostProcessParam = DefaultPostProcessParam;
|
|
3358
3411
|
exports.DefaultRendererParameters = DefaultRendererParameters;
|
|
3359
3412
|
exports.DefaultSSRParam = DefaultSSRParam;
|
package/dist/bundle.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster,
|
|
1
|
+
import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, OrthographicCamera, PerspectiveCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
|
|
2
2
|
import { GLTFLoader, DRACOLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
|
|
3
3
|
import { pass, mrt, output, uniform, metalness, transformedNormalView, time, oscSine } from 'three/tsl';
|
|
4
4
|
import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
|
|
@@ -864,9 +864,9 @@ class TSmartPointer {
|
|
|
864
864
|
release() {
|
|
865
865
|
if (this.value !== null) {
|
|
866
866
|
this.referenceCount--;
|
|
867
|
-
console.log(`Reference count decreased to: ${this.referenceCount}`);
|
|
867
|
+
//console.log(`Reference count decreased to: ${this.referenceCount}`);
|
|
868
868
|
if (this.referenceCount === 0) {
|
|
869
|
-
console.log("No more references. Deleting object.");
|
|
869
|
+
//console.log("No more references. Deleting object.");
|
|
870
870
|
this.value = null;
|
|
871
871
|
}
|
|
872
872
|
}
|
|
@@ -1032,7 +1032,7 @@ class AssetManager {
|
|
|
1032
1032
|
if (newComp === null) {
|
|
1033
1033
|
threejsObject.children = children;
|
|
1034
1034
|
//threejsObject.parent = parent
|
|
1035
|
-
console.log("Unprocess", threejsObject);
|
|
1035
|
+
//console.log("Unprocess", threejsObject);
|
|
1036
1036
|
return null;
|
|
1037
1037
|
}
|
|
1038
1038
|
parentLYComponent.addChildComponent(newComp);
|
|
@@ -1537,12 +1537,34 @@ class Viewport {
|
|
|
1537
1537
|
this.outlineObjects = [];
|
|
1538
1538
|
this.postProcessParam = Object.assign({}, postProcessParam);
|
|
1539
1539
|
this._app = app;
|
|
1540
|
-
let element = null;
|
|
1541
1540
|
if (viewportParam.elementId) {
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1541
|
+
this._canvas = document.getElementById(viewportParam.elementId);
|
|
1542
|
+
}
|
|
1543
|
+
this.createRenderer(rendererParam);
|
|
1544
|
+
if (viewportParam.isLabelRendererNeeded) {
|
|
1545
|
+
this.createLabelRenderer();
|
|
1546
|
+
}
|
|
1547
|
+
if (this._canvas) {
|
|
1548
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
1549
|
+
for (let entry of entries) {
|
|
1550
|
+
if (entry.contentBoxSize) {
|
|
1551
|
+
this.onWindowResize();
|
|
1552
|
+
}
|
|
1553
|
+
}
|
|
1554
|
+
});
|
|
1555
|
+
this.resizeObserver.observe(this._canvas);
|
|
1556
|
+
}
|
|
1557
|
+
this.app.onCameraChangedDelegate.add(() => {
|
|
1558
|
+
this.setupPostProcess();
|
|
1559
|
+
});
|
|
1560
|
+
}
|
|
1561
|
+
createRenderer(rendererParam) {
|
|
1562
|
+
const element = this._canvas;
|
|
1563
|
+
if (this._renderer) {
|
|
1564
|
+
if (element) {
|
|
1565
|
+
element.removeChild(this._renderer.domElement);
|
|
1545
1566
|
}
|
|
1567
|
+
this._renderer.dispose();
|
|
1546
1568
|
}
|
|
1547
1569
|
let width = element ? element.clientWidth : 512;
|
|
1548
1570
|
let height = element ? element.clientHeight : 512;
|
|
@@ -1562,34 +1584,29 @@ class Viewport {
|
|
|
1562
1584
|
this._renderer.shadowMap.type = rendererParam.shadowMapType;
|
|
1563
1585
|
this._renderer.toneMapping = rendererParam.toneMapping;
|
|
1564
1586
|
this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
|
|
1565
|
-
if (
|
|
1566
|
-
this.
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1587
|
+
if (element) {
|
|
1588
|
+
element.appendChild(this._renderer.domElement);
|
|
1589
|
+
}
|
|
1590
|
+
}
|
|
1591
|
+
createLabelRenderer() {
|
|
1592
|
+
const element = this._canvas;
|
|
1593
|
+
if (this.labelRenderer) {
|
|
1572
1594
|
if (element) {
|
|
1573
|
-
element.
|
|
1595
|
+
element.removeChild(this.labelRenderer.domElement);
|
|
1574
1596
|
}
|
|
1597
|
+
this.labelRenderer.dispose();
|
|
1575
1598
|
}
|
|
1599
|
+
let width = element ? element.clientWidth : 512;
|
|
1600
|
+
let height = element ? element.clientHeight : 512;
|
|
1601
|
+
this.labelRenderer = new CSS2DRenderer();
|
|
1602
|
+
this.labelRenderer.setSize(width, height);
|
|
1603
|
+
this.labelRenderer.domElement.style.pointerEvents = 'none';
|
|
1604
|
+
this.labelRenderer.domElement.style.position = 'absolute';
|
|
1605
|
+
this.labelRenderer.domElement.style.top = '0px';
|
|
1606
|
+
this.labelRenderer.domElement.className = 'scene-labelRenderer';
|
|
1576
1607
|
if (element) {
|
|
1577
|
-
element.appendChild(this.
|
|
1578
|
-
this._canvas = element;
|
|
1608
|
+
element.appendChild(this.labelRenderer.domElement);
|
|
1579
1609
|
}
|
|
1580
|
-
if (this._canvas) {
|
|
1581
|
-
this.resizeObserver = new ResizeObserver((entries) => {
|
|
1582
|
-
for (let entry of entries) {
|
|
1583
|
-
if (entry.contentBoxSize) {
|
|
1584
|
-
this.onWindowResize();
|
|
1585
|
-
}
|
|
1586
|
-
}
|
|
1587
|
-
});
|
|
1588
|
-
this.resizeObserver.observe(this._canvas);
|
|
1589
|
-
}
|
|
1590
|
-
this.app.onCameraChangedDelegate.add(() => {
|
|
1591
|
-
this.setupPostProcess();
|
|
1592
|
-
});
|
|
1593
1610
|
}
|
|
1594
1611
|
init() {
|
|
1595
1612
|
this.setupPostProcess();
|
|
@@ -1610,14 +1627,14 @@ class Viewport {
|
|
|
1610
1627
|
case PostProcessStepType.Bloom:
|
|
1611
1628
|
{
|
|
1612
1629
|
const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
|
|
1613
|
-
console.log("[PostProcess] BloomPass 构建完成");
|
|
1630
|
+
//console.log("[PostProcess] BloomPass 构建完成");
|
|
1614
1631
|
finalNode = finalNode.add(bloomPass);
|
|
1615
1632
|
break;
|
|
1616
1633
|
}
|
|
1617
1634
|
case PostProcessStepType.DepthOfField:
|
|
1618
1635
|
{
|
|
1619
1636
|
const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
|
|
1620
|
-
console.log("[PostProcess] DOFPass 构建完成");
|
|
1637
|
+
//console.log("[PostProcess] DOFPass 构建完成");
|
|
1621
1638
|
finalNode = finalNode.add(dofPass);
|
|
1622
1639
|
break;
|
|
1623
1640
|
}
|
|
@@ -1664,7 +1681,7 @@ class Viewport {
|
|
|
1664
1681
|
// outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
|
|
1665
1682
|
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1666
1683
|
finalNode = outlinePulse.add(finalNode);
|
|
1667
|
-
console.log("[PostProcess] OutlinePass 构建完成");
|
|
1684
|
+
//console.log("[PostProcess] OutlinePass 构建完成");
|
|
1668
1685
|
break;
|
|
1669
1686
|
}
|
|
1670
1687
|
case PostProcessStepType.Antialiasing:
|
|
@@ -1672,11 +1689,11 @@ class Viewport {
|
|
|
1672
1689
|
const aaParam = step;
|
|
1673
1690
|
if (aaParam.method === "fxaa") {
|
|
1674
1691
|
finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1675
|
-
console.log("[PostProcess] FXAAPass 构建完成");
|
|
1692
|
+
//console.log("[PostProcess] FXAAPass 构建完成");
|
|
1676
1693
|
}
|
|
1677
1694
|
if (aaParam.method === "smaa") {
|
|
1678
1695
|
finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1679
|
-
console.log("[PostProcess] SMAAPass 构建完成");
|
|
1696
|
+
//console.log("[PostProcess] SMAAPass 构建完成");
|
|
1680
1697
|
}
|
|
1681
1698
|
break;
|
|
1682
1699
|
}
|
|
@@ -1684,13 +1701,17 @@ class Viewport {
|
|
|
1684
1701
|
});
|
|
1685
1702
|
this.postProcessing.outputNode = finalNode;
|
|
1686
1703
|
this.postProcessing.needsUpdate = true;
|
|
1687
|
-
console.log("[PostProcess] setup complete",
|
|
1704
|
+
//console.log("[PostProcess] setup complete", this.postProcessParam.steps);
|
|
1688
1705
|
this.markRenderStateDirty();
|
|
1689
1706
|
}
|
|
1690
1707
|
updatePostProcess(steps) {
|
|
1691
1708
|
this.postProcessParam.steps = steps;
|
|
1692
1709
|
this.setupPostProcess();
|
|
1693
1710
|
}
|
|
1711
|
+
updateRendererSettings(data) {
|
|
1712
|
+
this.createRenderer(data);
|
|
1713
|
+
this.markRenderStateDirty();
|
|
1714
|
+
}
|
|
1694
1715
|
// updateBloomPass(params: BloomParam)
|
|
1695
1716
|
// {
|
|
1696
1717
|
// this.postProcessParam.bloom = { ...params };
|
|
@@ -1747,7 +1768,7 @@ class Viewport {
|
|
|
1747
1768
|
}
|
|
1748
1769
|
}
|
|
1749
1770
|
onWindowResize() {
|
|
1750
|
-
console.log("resize")
|
|
1771
|
+
//console.log("resize")
|
|
1751
1772
|
let ele = this._canvas;
|
|
1752
1773
|
if (!ele) {
|
|
1753
1774
|
return;
|
|
@@ -2192,59 +2213,90 @@ class Controller {
|
|
|
2192
2213
|
|
|
2193
2214
|
class CameraFactory {
|
|
2194
2215
|
static createCamera(param) {
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2216
|
+
try {
|
|
2217
|
+
switch (param.type) {
|
|
2218
|
+
case "Perspective":
|
|
2219
|
+
{
|
|
2220
|
+
let data = param;
|
|
2221
|
+
return new PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
|
|
2222
|
+
}
|
|
2223
|
+
case "Orthographic":
|
|
2224
|
+
{
|
|
2225
|
+
let data = param;
|
|
2226
|
+
return new OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
|
|
2227
|
+
}
|
|
2228
|
+
default:
|
|
2229
|
+
{
|
|
2230
|
+
throw new Error("Invalid camera type");
|
|
2231
|
+
}
|
|
2232
|
+
}
|
|
2201
2233
|
}
|
|
2202
|
-
|
|
2203
|
-
console.
|
|
2204
|
-
|
|
2205
|
-
|
|
2234
|
+
catch (error) {
|
|
2235
|
+
console.warn("[CameraFactory]Error occurred while creating camera: ", error);
|
|
2236
|
+
console.warn("[CameraFactory]Create default perspective camera instead");
|
|
2237
|
+
return new PerspectiveCamera(50, 1, 0.1, 1000);
|
|
2206
2238
|
}
|
|
2207
|
-
return cam;
|
|
2208
2239
|
}
|
|
2209
2240
|
static updataCamera(param, camera) {
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2241
|
+
try {
|
|
2242
|
+
switch (param.type) {
|
|
2243
|
+
case "Perspective":
|
|
2244
|
+
{
|
|
2245
|
+
let data = param;
|
|
2246
|
+
if (camera instanceof PerspectiveCamera) {
|
|
2247
|
+
camera.near = data.near;
|
|
2248
|
+
camera.far = data.far;
|
|
2249
|
+
camera.fov = data.fov;
|
|
2250
|
+
camera.aspect = data.aspect;
|
|
2251
|
+
return camera;
|
|
2252
|
+
}
|
|
2253
|
+
return new PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
|
|
2254
|
+
}
|
|
2255
|
+
case "Orthographic":
|
|
2256
|
+
{
|
|
2257
|
+
let data = param;
|
|
2258
|
+
if (camera instanceof OrthographicCamera) {
|
|
2259
|
+
camera.near = data.near;
|
|
2260
|
+
camera.far = data.far;
|
|
2261
|
+
camera.left = data.left;
|
|
2262
|
+
camera.right = data.right;
|
|
2263
|
+
camera.top = data.top;
|
|
2264
|
+
camera.bottom = data.bottom;
|
|
2265
|
+
return camera;
|
|
2266
|
+
}
|
|
2267
|
+
return new OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
|
|
2268
|
+
}
|
|
2269
|
+
default:
|
|
2270
|
+
{
|
|
2271
|
+
throw new Error("Invalid camera type");
|
|
2272
|
+
}
|
|
2220
2273
|
}
|
|
2221
2274
|
}
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
camera.left = param.param.left;
|
|
2227
|
-
camera.right = param.param.right;
|
|
2228
|
-
camera.top = param.param.top;
|
|
2229
|
-
camera.bottom = param.param.bottom;
|
|
2230
|
-
return camera;
|
|
2231
|
-
}
|
|
2232
|
-
else {
|
|
2233
|
-
return new OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
|
|
2234
|
-
}
|
|
2275
|
+
catch (error) {
|
|
2276
|
+
console.warn("[CameraFactory]Error occurred while updating camera: ", error);
|
|
2277
|
+
console.warn("[CameraFactory]Update Failed. Return old camera instead");
|
|
2278
|
+
return camera;
|
|
2235
2279
|
}
|
|
2236
|
-
return camera;
|
|
2237
2280
|
}
|
|
2238
2281
|
}
|
|
2239
2282
|
|
|
2240
|
-
const
|
|
2283
|
+
const DefaultPerspectiveCameraParam = {
|
|
2241
2284
|
near: 0.1,
|
|
2242
2285
|
far: 1000,
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2286
|
+
type: "Perspective",
|
|
2287
|
+
fov: 50,
|
|
2288
|
+
aspect: 1,
|
|
2289
|
+
};
|
|
2290
|
+
const DefaultOrthographicCameraParam = {
|
|
2291
|
+
type: "Orthographic",
|
|
2292
|
+
near: 0.1,
|
|
2293
|
+
far: 1000,
|
|
2294
|
+
left: -1,
|
|
2295
|
+
right: 1,
|
|
2296
|
+
top: 1,
|
|
2297
|
+
bottom: -1,
|
|
2247
2298
|
};
|
|
2299
|
+
const DefaultCameraParam = JSON.parse(JSON.stringify(DefaultPerspectiveCameraParam));
|
|
2248
2300
|
|
|
2249
2301
|
const DefaultViewportParam = {
|
|
2250
2302
|
elementId: null,
|
|
@@ -2284,7 +2336,6 @@ class Actor extends BaseObject {
|
|
|
2284
2336
|
return this._world;
|
|
2285
2337
|
}
|
|
2286
2338
|
get name() {
|
|
2287
|
-
console.log("getname", this._name);
|
|
2288
2339
|
return this._name;
|
|
2289
2340
|
}
|
|
2290
2341
|
set name(name) {
|
|
@@ -3339,4 +3390,4 @@ class TransformGizmo extends Pawn {
|
|
|
3339
3390
|
}
|
|
3340
3391
|
}
|
|
3341
3392
|
|
|
3342
|
-
export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
|
|
3393
|
+
export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOrthographicCameraParam, DefaultOutlineParams, DefaultPerspectiveCameraParam, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
|
package/dist/index.d.ts
CHANGED
|
@@ -10,8 +10,8 @@ export { ThreeJsApp } from "./lythreeframe/ThreeJsApp";
|
|
|
10
10
|
export { Controller } from "./lythreeframe/Frame/Controller";
|
|
11
11
|
export { Viewport } from "./lythreeframe/Frame/Viewport";
|
|
12
12
|
export { World } from "./lythreeframe/Frame/World";
|
|
13
|
-
export type { CameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
|
|
14
|
-
export { DefaultCameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
|
|
13
|
+
export type { CameraParam, PerspectiveCameraParam, OrthographicCameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
|
|
14
|
+
export { DefaultCameraParam, DefaultPerspectiveCameraParam, DefaultOrthographicCameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
|
|
15
15
|
export type { AppParam, AppClass } from "./lythreeframe/Frame/Parameters/AppParameter";
|
|
16
16
|
export { DefaultAppParam } from "./lythreeframe/Frame/Parameters/AppParameter";
|
|
17
17
|
export type { ViewportParam } from './lythreeframe/Frame/Parameters/ViewportParameters';
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
export interface CameraParam {
|
|
2
|
-
|
|
3
|
-
far: number;
|
|
4
|
-
param: PerspectiveCameraParam | OrthographicCameraParam;
|
|
2
|
+
type: "Perspective" | "Orthographic";
|
|
5
3
|
}
|
|
6
|
-
export interface PerspectiveCameraParam {
|
|
4
|
+
export interface PerspectiveCameraParam extends CameraParam {
|
|
5
|
+
type: "Perspective";
|
|
7
6
|
fov: number;
|
|
8
7
|
aspect: number;
|
|
8
|
+
near: number;
|
|
9
|
+
far: number;
|
|
9
10
|
}
|
|
10
|
-
export interface OrthographicCameraParam {
|
|
11
|
+
export interface OrthographicCameraParam extends CameraParam {
|
|
12
|
+
type: "Orthographic";
|
|
11
13
|
left: number;
|
|
12
14
|
right: number;
|
|
13
15
|
top: number;
|
|
14
16
|
bottom: number;
|
|
17
|
+
near: number;
|
|
18
|
+
far: number;
|
|
15
19
|
}
|
|
20
|
+
export declare const DefaultPerspectiveCameraParam: PerspectiveCameraParam;
|
|
21
|
+
export declare const DefaultOrthographicCameraParam: OrthographicCameraParam;
|
|
16
22
|
export declare const DefaultCameraParam: CameraParam;
|
|
@@ -18,9 +18,12 @@ export declare class Viewport {
|
|
|
18
18
|
private postProcessing;
|
|
19
19
|
private outlineObjects;
|
|
20
20
|
constructor(app: ThreeJsApp, viewportParam: ViewportParam, rendererParam: RendererParameters, postProcessParam: PostProcessParam);
|
|
21
|
+
protected createRenderer(rendererParam: RendererParameters): void;
|
|
22
|
+
protected createLabelRenderer(): void;
|
|
21
23
|
init(): void;
|
|
22
24
|
setupPostProcess(): void;
|
|
23
25
|
updatePostProcess(steps: PostProcessStepParam[]): void;
|
|
26
|
+
updateRendererSettings(data: RendererParameters): void;
|
|
24
27
|
addOutlineObject(obj: Object3D): void;
|
|
25
28
|
setOutlineObjects(objects: Object3D[]): void;
|
|
26
29
|
removeOutlineObject(obj: Object3D): void;
|