lythreeframe 1.2.50 → 1.2.51
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 +138 -278
- package/dist/bundle.esm.js +140 -278
- package/dist/index.d.ts +0 -3
- package/dist/lythreeframe/Frame/Controller.d.ts +0 -1
- package/dist/lythreeframe/Frame/Parameters/AppParameter.d.ts +0 -2
- package/dist/lythreeframe/Frame/Parameters/ViewportParameters.d.ts +0 -1
- package/dist/lythreeframe/Frame/Viewport.d.ts +3 -7
- package/dist/lythreeframe/Object/Components/Light/AmbientLight/AmbientLightComponent.d.ts +1 -1
- package/dist/lythreeframe/PostProcess/Param/AAParam.d.ts +1 -1
- package/dist/lythreeframe/PostProcess/Param/Bloom.d.ts +1 -1
- package/dist/lythreeframe/PostProcess/Param/DOF.d.ts +1 -1
- package/dist/lythreeframe/PostProcess/Param/GTAO.d.ts +1 -1
- package/dist/lythreeframe/PostProcess/Param/Outline.d.ts +2 -2
- package/dist/lythreeframe/PostProcess/Param/SSR.d.ts +1 -1
- package/dist/lythreeframe/PostProcess/WebGPUPostProcessFactory.d.ts +6 -6
- package/dist/lythreeframe/ThreeJsApp.d.ts +8 -60
- package/package.json +1 -1
package/dist/bundle.cjs.js
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
var webgpu = require('three/webgpu');
|
|
4
4
|
var Addons_js = require('three/examples/jsm/Addons.js');
|
|
5
5
|
var tsl = require('three/tsl');
|
|
6
|
-
var three = require('three');
|
|
7
6
|
var DepthOfFieldNode_js = require('three/addons/tsl/display/DepthOfFieldNode.js');
|
|
8
7
|
var BloomNode_js = require('three/examples/jsm/tsl/display/BloomNode.js');
|
|
9
8
|
var DenoiseNode_js = require('three/examples/jsm/tsl/display/DenoiseNode.js');
|
|
@@ -12,6 +11,7 @@ var GTAONode_js = require('three/examples/jsm/tsl/display/GTAONode.js');
|
|
|
12
11
|
var OutlineNode_js = require('three/examples/jsm/tsl/display/OutlineNode.js');
|
|
13
12
|
var SMAANode_js = require('three/examples/jsm/tsl/display/SMAANode.js');
|
|
14
13
|
var gsap = require('gsap');
|
|
14
|
+
var three = require('three');
|
|
15
15
|
var SkyMesh_js = require('three/examples/jsm/objects/SkyMesh.js');
|
|
16
16
|
var CSS2DRenderer_js = require('three/examples/jsm/renderers/CSS2DRenderer.js');
|
|
17
17
|
var PointerLockControls_js = require('three/examples/jsm/controls/PointerLockControls.js');
|
|
@@ -1521,12 +1521,7 @@ class Viewport {
|
|
|
1521
1521
|
}
|
|
1522
1522
|
get renderer() {
|
|
1523
1523
|
if (!this._renderer) {
|
|
1524
|
-
|
|
1525
|
-
return this._webGLRenderer;
|
|
1526
|
-
}
|
|
1527
|
-
else {
|
|
1528
|
-
throw Error("Renderer is not initialized");
|
|
1529
|
-
}
|
|
1524
|
+
throw Error("Renderer is not initialized");
|
|
1530
1525
|
}
|
|
1531
1526
|
return this._renderer;
|
|
1532
1527
|
}
|
|
@@ -1539,7 +1534,6 @@ class Viewport {
|
|
|
1539
1534
|
constructor(app, viewportParam, rendererParam, postProcessParam) {
|
|
1540
1535
|
this._uiDom = null;
|
|
1541
1536
|
this._renderer = null;
|
|
1542
|
-
this._webGLRenderer = null;
|
|
1543
1537
|
this.labelRenderer = null;
|
|
1544
1538
|
this._app = null;
|
|
1545
1539
|
this.resizeObserver = null;
|
|
@@ -1553,7 +1547,6 @@ class Viewport {
|
|
|
1553
1547
|
if (viewportParam.elementId) {
|
|
1554
1548
|
this._outerContainer = document.getElementById(viewportParam.elementId);
|
|
1555
1549
|
}
|
|
1556
|
-
this.viewportParam = Object.assign({}, viewportParam);
|
|
1557
1550
|
this.createRenderer(rendererParam);
|
|
1558
1551
|
if (viewportParam.isLabelRendererNeeded) {
|
|
1559
1552
|
this.createLabelRenderer();
|
|
@@ -1575,7 +1568,7 @@ class Viewport {
|
|
|
1575
1568
|
this.setupPostProcess();
|
|
1576
1569
|
});
|
|
1577
1570
|
}
|
|
1578
|
-
|
|
1571
|
+
createRenderer(rendererParam) {
|
|
1579
1572
|
if (this._outerContainer) {
|
|
1580
1573
|
this._canvasContainer = document.createElement("div");
|
|
1581
1574
|
this._canvasContainer.style.left = "0px";
|
|
@@ -1602,31 +1595,15 @@ class Viewport {
|
|
|
1602
1595
|
renderP.logarithmicDepthBuffer = rendererParam.logarithmicDepthBuffer;
|
|
1603
1596
|
renderP.samples = rendererParam.samples;
|
|
1604
1597
|
renderP.colorBufferType = rendererParam.colorBufferType;
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
element.appendChild(this._webGLRenderer.domElement);
|
|
1615
|
-
}
|
|
1616
|
-
}
|
|
1617
|
-
else {
|
|
1618
|
-
this._renderer = new webgpu.WebGPURenderer(renderP);
|
|
1619
|
-
// WebGPU 需要异步初始化
|
|
1620
|
-
await this._renderer.init();
|
|
1621
|
-
this._renderer.setPixelRatio(window.devicePixelRatio);
|
|
1622
|
-
this._renderer.setSize(width, height);
|
|
1623
|
-
this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
|
|
1624
|
-
this._renderer.shadowMap.type = rendererParam.shadowMapType;
|
|
1625
|
-
this._renderer.toneMapping = rendererParam.toneMapping;
|
|
1626
|
-
this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
|
|
1627
|
-
if (element) {
|
|
1628
|
-
element.appendChild(this._renderer.domElement);
|
|
1629
|
-
}
|
|
1598
|
+
this._renderer = new webgpu.WebGPURenderer(renderP);
|
|
1599
|
+
this._renderer.setPixelRatio(window.devicePixelRatio);
|
|
1600
|
+
this._renderer.setSize(width, height);
|
|
1601
|
+
this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
|
|
1602
|
+
this._renderer.shadowMap.type = rendererParam.shadowMapType;
|
|
1603
|
+
this._renderer.toneMapping = rendererParam.toneMapping;
|
|
1604
|
+
this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
|
|
1605
|
+
if (element) {
|
|
1606
|
+
element.appendChild(this._renderer.domElement);
|
|
1630
1607
|
}
|
|
1631
1608
|
}
|
|
1632
1609
|
createLabelRenderer() {
|
|
@@ -1673,7 +1650,97 @@ class Viewport {
|
|
|
1673
1650
|
this.setupPostProcess();
|
|
1674
1651
|
}
|
|
1675
1652
|
setupPostProcess() {
|
|
1676
|
-
|
|
1653
|
+
if (this.postProcessParam.steps.length === 0) {
|
|
1654
|
+
this.destroyPostProcess();
|
|
1655
|
+
this.markRenderStateDirty();
|
|
1656
|
+
return;
|
|
1657
|
+
}
|
|
1658
|
+
if (!this.postProcessing) {
|
|
1659
|
+
this.postProcessing = new webgpu.PostProcessing(this.renderer);
|
|
1660
|
+
}
|
|
1661
|
+
const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
|
|
1662
|
+
let finalNode = scenePass.getTextureNode('output');
|
|
1663
|
+
this.postProcessParam.steps.forEach((step) => {
|
|
1664
|
+
switch (step.type) {
|
|
1665
|
+
case exports.PostProcessStepType.Bloom:
|
|
1666
|
+
{
|
|
1667
|
+
const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
|
|
1668
|
+
//console.log("[PostProcess] BloomPass 构建完成");
|
|
1669
|
+
finalNode = finalNode.add(bloomPass);
|
|
1670
|
+
break;
|
|
1671
|
+
}
|
|
1672
|
+
case exports.PostProcessStepType.DepthOfField:
|
|
1673
|
+
{
|
|
1674
|
+
const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
|
|
1675
|
+
//console.log("[PostProcess] DOFPass 构建完成");
|
|
1676
|
+
finalNode = finalNode.add(dofPass);
|
|
1677
|
+
break;
|
|
1678
|
+
}
|
|
1679
|
+
case exports.PostProcessStepType.ScreenSpaceReflection:
|
|
1680
|
+
{
|
|
1681
|
+
console.warn("[PostProcess] SSR 目前存在技术问题,暂不支持。");
|
|
1682
|
+
// const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step as SSRParam);
|
|
1683
|
+
// console.log("[PostProcess] SSRPass 构建完成");
|
|
1684
|
+
//finalNode = blendColor(finalNode, ssrPass);
|
|
1685
|
+
break;
|
|
1686
|
+
}
|
|
1687
|
+
case exports.PostProcessStepType.GroundTruthAmbientOcclusion:
|
|
1688
|
+
{
|
|
1689
|
+
console.warn("[PostProcess] AO 目前存在技术问题,暂不支持。");
|
|
1690
|
+
// const stepParam = step as GTAOParam
|
|
1691
|
+
// const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
|
|
1692
|
+
// console.log("[PostProcess] GTAOPass 构建完成");
|
|
1693
|
+
// if (stepParam.denoised)
|
|
1694
|
+
// {
|
|
1695
|
+
// const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
|
|
1696
|
+
// console.log("[PostProcess] GTAODenoisePass 构建完成");
|
|
1697
|
+
// finalNode = denoiseGTAOPass.mul(finalNode);
|
|
1698
|
+
// }
|
|
1699
|
+
// else
|
|
1700
|
+
// {
|
|
1701
|
+
// finalNode = GTAOPass.getTextureNode().mul(finalNode);
|
|
1702
|
+
// }
|
|
1703
|
+
break;
|
|
1704
|
+
}
|
|
1705
|
+
case exports.PostProcessStepType.Outline:
|
|
1706
|
+
{
|
|
1707
|
+
const outlineParam = step;
|
|
1708
|
+
const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
|
|
1709
|
+
const { visibleEdge, hiddenEdge } = outlinePass;
|
|
1710
|
+
const pulsePeriod = tsl.uniform(outlineParam.pulsePeriod);
|
|
1711
|
+
const period = tsl.time.div(pulsePeriod).mul(2);
|
|
1712
|
+
const osc = tsl.oscSine(period).mul(.5).add(.5);
|
|
1713
|
+
const outlineColor = visibleEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.edgeStrength);
|
|
1714
|
+
const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
|
|
1715
|
+
// if(!this.denoiseOutlinePass)
|
|
1716
|
+
// {
|
|
1717
|
+
// this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
|
|
1718
|
+
// }
|
|
1719
|
+
// outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
|
|
1720
|
+
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1721
|
+
finalNode = outlinePulse.add(finalNode);
|
|
1722
|
+
//console.log("[PostProcess] OutlinePass 构建完成");
|
|
1723
|
+
break;
|
|
1724
|
+
}
|
|
1725
|
+
case exports.PostProcessStepType.Antialiasing:
|
|
1726
|
+
{
|
|
1727
|
+
const aaParam = step;
|
|
1728
|
+
if (aaParam.method === "fxaa") {
|
|
1729
|
+
finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1730
|
+
//console.log("[PostProcess] FXAAPass 构建完成");
|
|
1731
|
+
}
|
|
1732
|
+
if (aaParam.method === "smaa") {
|
|
1733
|
+
finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1734
|
+
//console.log("[PostProcess] SMAAPass 构建完成");
|
|
1735
|
+
}
|
|
1736
|
+
break;
|
|
1737
|
+
}
|
|
1738
|
+
}
|
|
1739
|
+
});
|
|
1740
|
+
this.postProcessing.outputNode = finalNode;
|
|
1741
|
+
this.postProcessing.needsUpdate = true;
|
|
1742
|
+
//console.log("[PostProcess] setup complete", this.postProcessParam.steps);
|
|
1743
|
+
this.markRenderStateDirty();
|
|
1677
1744
|
}
|
|
1678
1745
|
updatePostProcess(steps) {
|
|
1679
1746
|
this.postProcessParam.steps = steps;
|
|
@@ -1758,7 +1825,7 @@ class Viewport {
|
|
|
1758
1825
|
return;
|
|
1759
1826
|
}
|
|
1760
1827
|
if (this.postProcessing) {
|
|
1761
|
-
this.postProcessing.
|
|
1828
|
+
this.postProcessing.render();
|
|
1762
1829
|
}
|
|
1763
1830
|
else {
|
|
1764
1831
|
this.renderer.render(this.app.world.scene, this.app.camera);
|
|
@@ -1775,13 +1842,7 @@ class Viewport {
|
|
|
1775
1842
|
await this.postProcessing.renderAsync();
|
|
1776
1843
|
}
|
|
1777
1844
|
else {
|
|
1778
|
-
|
|
1779
|
-
await this._renderer.renderAsync(this.app.world.scene, this.app.camera);
|
|
1780
|
-
}
|
|
1781
|
-
else if (this._webGLRenderer) {
|
|
1782
|
-
console.log("render with gl");
|
|
1783
|
-
this._webGLRenderer.render(this.app.world.scene, this.app.camera);
|
|
1784
|
-
}
|
|
1845
|
+
await this.renderer.renderAsync(this.app.world.scene, this.app.camera);
|
|
1785
1846
|
}
|
|
1786
1847
|
// 检查 renderer.domElement 的尺寸
|
|
1787
1848
|
const sourceWidth = this.renderer.domElement.width;
|
|
@@ -2090,7 +2151,13 @@ class Controller {
|
|
|
2090
2151
|
this.pawn.enabled = isPawnEnabled;
|
|
2091
2152
|
}
|
|
2092
2153
|
init() {
|
|
2093
|
-
if (this.viewPort.canvas)
|
|
2154
|
+
if (this.viewPort.canvas) {
|
|
2155
|
+
this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove);
|
|
2156
|
+
this.viewPort.canvas.addEventListener("pointerenter", this.onPointerEnter);
|
|
2157
|
+
this.viewPort.canvas.addEventListener("pointerleave", this.onPointerLeave);
|
|
2158
|
+
this.viewPort.canvas.addEventListener("pointerup", this.onPointerUp);
|
|
2159
|
+
this.viewPort.canvas.addEventListener("pointerdown", this.onPointerDown);
|
|
2160
|
+
}
|
|
2094
2161
|
}
|
|
2095
2162
|
tick(deltaTime) {
|
|
2096
2163
|
this.pawn.tick(deltaTime);
|
|
@@ -2100,7 +2167,13 @@ class Controller {
|
|
|
2100
2167
|
clearTimeout(this.leftClickTimer);
|
|
2101
2168
|
this.leftClickTimer = null;
|
|
2102
2169
|
}
|
|
2103
|
-
if (this.viewPort.canvas)
|
|
2170
|
+
if (this.viewPort.canvas) {
|
|
2171
|
+
this.viewPort.canvas.removeEventListener("pointermove", this.onPointerMove);
|
|
2172
|
+
this.viewPort.canvas.removeEventListener("pointerenter", this.onPointerEnter);
|
|
2173
|
+
this.viewPort.canvas.removeEventListener("pointerleave", this.onPointerLeave);
|
|
2174
|
+
this.viewPort.canvas.removeEventListener("pointerup", this.onPointerUp);
|
|
2175
|
+
this.viewPort.canvas.removeEventListener("pointerdown", this.onPointerDown);
|
|
2176
|
+
}
|
|
2104
2177
|
this.pawn.unpossess();
|
|
2105
2178
|
this.pawn.destroy();
|
|
2106
2179
|
this._pawn = null;
|
|
@@ -2222,14 +2295,6 @@ class Controller {
|
|
|
2222
2295
|
focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
|
|
2223
2296
|
this.pawn.focusTo(targetPos, targetQuat, distance, time, onGoing, onFinished);
|
|
2224
2297
|
}
|
|
2225
|
-
setPawn(pawn) {
|
|
2226
|
-
if (this._pawn) {
|
|
2227
|
-
this._pawn.unpossess();
|
|
2228
|
-
this._pawn.destroy();
|
|
2229
|
-
}
|
|
2230
|
-
this._pawn = pawn;
|
|
2231
|
-
this._pawn.possess();
|
|
2232
|
-
}
|
|
2233
2298
|
}
|
|
2234
2299
|
|
|
2235
2300
|
class CameraFactory {
|
|
@@ -2255,7 +2320,7 @@ class CameraFactory {
|
|
|
2255
2320
|
catch (error) {
|
|
2256
2321
|
console.warn("[CameraFactory]Error occurred while creating camera: ", error);
|
|
2257
2322
|
console.warn("[CameraFactory]Create default perspective camera instead");
|
|
2258
|
-
return new webgpu.PerspectiveCamera(50, 1, 0.1,
|
|
2323
|
+
return new webgpu.PerspectiveCamera(50, 1, 0.1, 1000);
|
|
2259
2324
|
}
|
|
2260
2325
|
}
|
|
2261
2326
|
static updataCamera(param, camera) {
|
|
@@ -2269,7 +2334,6 @@ class CameraFactory {
|
|
|
2269
2334
|
camera.far = data.far;
|
|
2270
2335
|
camera.fov = data.fov;
|
|
2271
2336
|
camera.aspect = data.aspect;
|
|
2272
|
-
camera.updateProjectionMatrix();
|
|
2273
2337
|
return camera;
|
|
2274
2338
|
}
|
|
2275
2339
|
return new webgpu.PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
|
|
@@ -2284,7 +2348,6 @@ class CameraFactory {
|
|
|
2284
2348
|
camera.right = data.right;
|
|
2285
2349
|
camera.top = data.top;
|
|
2286
2350
|
camera.bottom = data.bottom;
|
|
2287
|
-
camera.updateProjectionMatrix();
|
|
2288
2351
|
return camera;
|
|
2289
2352
|
}
|
|
2290
2353
|
return new webgpu.OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
|
|
@@ -2305,7 +2368,7 @@ class CameraFactory {
|
|
|
2305
2368
|
|
|
2306
2369
|
const DefaultPerspectiveCameraParam = {
|
|
2307
2370
|
near: 0.1,
|
|
2308
|
-
far:
|
|
2371
|
+
far: 1000,
|
|
2309
2372
|
type: "Perspective",
|
|
2310
2373
|
fov: 50,
|
|
2311
2374
|
aspect: 1,
|
|
@@ -2837,14 +2900,7 @@ const DefaultWorldParam = {
|
|
|
2837
2900
|
levelActorClass: LevelActor,
|
|
2838
2901
|
};
|
|
2839
2902
|
|
|
2840
|
-
/** 动画循环启动延迟时间(毫秒) */
|
|
2841
|
-
const ANIMATION_START_DELAY = 100;
|
|
2842
|
-
/**
|
|
2843
|
-
* Three.js应用程序主类
|
|
2844
|
-
* 负责管理场景、视口、控制器和资源
|
|
2845
|
-
*/
|
|
2846
2903
|
class ThreeJsApp {
|
|
2847
|
-
// ========== 公共访问器 ==========
|
|
2848
2904
|
get camera() {
|
|
2849
2905
|
return this._camera;
|
|
2850
2906
|
}
|
|
@@ -2869,132 +2925,67 @@ class ThreeJsApp {
|
|
|
2869
2925
|
get onCameraChangedDelegate() {
|
|
2870
2926
|
return this._onCameraChangedDelegate;
|
|
2871
2927
|
}
|
|
2872
|
-
/**
|
|
2873
|
-
* 构造ThreeJs应用程序实例
|
|
2874
|
-
* @param appParam 应用程序参数配置
|
|
2875
|
-
*/
|
|
2876
2928
|
constructor(appParam = DefaultAppParam) {
|
|
2877
|
-
var _a, _b, _c, _d, _e, _f;
|
|
2878
|
-
// ========== 私有字段 ==========
|
|
2879
|
-
this.animationFrameHandle = 0;
|
|
2880
2929
|
this._tickingFunctions = [];
|
|
2881
2930
|
this._appParam = { viewportParam: DefaultViewportParam };
|
|
2882
2931
|
this._onCameraChangedDelegate = new Delegate();
|
|
2883
|
-
|
|
2884
|
-
this._appParam.
|
|
2885
|
-
this._appParam.
|
|
2886
|
-
this._appParam.
|
|
2887
|
-
this._appParam.
|
|
2888
|
-
this._appParam.worldParam = (_e = appParam.worldParam) !== null && _e !== void 0 ? _e : DefaultWorldParam;
|
|
2889
|
-
this._appParam.isRenderEveryFrame = appParam.isRenderEveryFrame;
|
|
2890
|
-
this._appParam.classes = (_f = appParam.classes) !== null && _f !== void 0 ? _f : {
|
|
2932
|
+
this._appParam.cameraParam = appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam;
|
|
2933
|
+
this._appParam.renderParam = appParam.renderParam ? appParam.renderParam : DefaultRendererParameters;
|
|
2934
|
+
this._appParam.postProcessParam = appParam.postProcessParam ? appParam.postProcessParam : DefaultPostProcessParam;
|
|
2935
|
+
this._appParam.viewportParam = appParam.viewportParam ? appParam.viewportParam : DefaultViewportParam;
|
|
2936
|
+
this._appParam.classes = appParam.classes ? appParam.classes : {
|
|
2891
2937
|
assetManagerClass: AssetManager,
|
|
2892
2938
|
controllerClass: Controller,
|
|
2893
2939
|
worldClass: World,
|
|
2894
2940
|
viewportClass: Viewport,
|
|
2895
2941
|
};
|
|
2896
|
-
|
|
2942
|
+
this._appParam.isRenderEveryFrame = appParam.isRenderEveryFrame;
|
|
2897
2943
|
this._clock = new webgpu.Clock();
|
|
2898
2944
|
this._camera = CameraFactory.createCamera(this._appParam.cameraParam);
|
|
2899
|
-
this._world = new this._appParam.classes.worldClass(this, this._appParam.worldParam);
|
|
2945
|
+
this._world = new this._appParam.classes.worldClass(this, this._appParam.worldParam ? this._appParam.worldParam : DefaultWorldParam);
|
|
2900
2946
|
this._viewport = new this._appParam.classes.viewportClass(this, this._appParam.viewportParam, this._appParam.renderParam, this._appParam.postProcessParam);
|
|
2901
2947
|
this._controller = new this._appParam.classes.controllerClass(this);
|
|
2902
2948
|
this._assetManager = new this._appParam.classes.assetManagerClass(this);
|
|
2949
|
+
this.viewport.renderer.setAnimationLoop(() => {
|
|
2950
|
+
const delta = this._clock.getDelta();
|
|
2951
|
+
this.tick(delta);
|
|
2952
|
+
});
|
|
2903
2953
|
this.postConstruct();
|
|
2904
|
-
this.startAnimationLoop();
|
|
2905
2954
|
}
|
|
2906
|
-
/**
|
|
2907
|
-
* 构造后初始化钩子
|
|
2908
|
-
* 按顺序初始化控制器、世界和视口
|
|
2909
|
-
*/
|
|
2910
2955
|
postConstruct() {
|
|
2911
2956
|
this.controller.init();
|
|
2912
2957
|
this.world.init();
|
|
2913
2958
|
this.viewport.init();
|
|
2914
2959
|
}
|
|
2915
|
-
/**
|
|
2916
|
-
* 公共初始化方法
|
|
2917
|
-
* 可由子类重写以添加自定义初始化逻辑
|
|
2918
|
-
*/
|
|
2919
2960
|
init() {
|
|
2920
|
-
|
|
2921
|
-
}
|
|
2922
|
-
/**
|
|
2923
|
-
* 启动动画循环
|
|
2924
|
-
* 使用延迟启动以确保所有组件完全初始化
|
|
2925
|
-
*/
|
|
2926
|
-
startAnimationLoop() {
|
|
2927
|
-
const tick = () => {
|
|
2928
|
-
this.animationFrameHandle = requestAnimationFrame(tick);
|
|
2929
|
-
try {
|
|
2930
|
-
const delta = this._clock.getDelta();
|
|
2931
|
-
this.tick(delta);
|
|
2932
|
-
}
|
|
2933
|
-
catch (error) {
|
|
2934
|
-
console.error('动画循环错误:', error);
|
|
2935
|
-
}
|
|
2936
|
-
};
|
|
2937
|
-
setTimeout(() => {
|
|
2938
|
-
tick();
|
|
2939
|
-
}, ANIMATION_START_DELAY);
|
|
2940
|
-
}
|
|
2941
|
-
/**
|
|
2942
|
-
* 每帧更新方法
|
|
2943
|
-
* @param deltaTime 距离上一帧的时间增量(秒)
|
|
2944
|
-
*/
|
|
2961
|
+
}
|
|
2945
2962
|
tick(deltaTime) {
|
|
2946
2963
|
this._controller.tick(deltaTime);
|
|
2947
2964
|
this.world.tick(deltaTime);
|
|
2948
|
-
// 执行所有注册的tick函数
|
|
2949
2965
|
this._tickingFunctions.forEach(func => {
|
|
2950
2966
|
func(deltaTime);
|
|
2951
2967
|
});
|
|
2952
|
-
// 根据配置决定是否每帧都渲染
|
|
2953
2968
|
if (this._appParam.isRenderEveryFrame) {
|
|
2954
2969
|
this.viewport.markRenderStateDirty();
|
|
2955
2970
|
}
|
|
2956
2971
|
this.viewport.render();
|
|
2957
2972
|
}
|
|
2958
|
-
/**
|
|
2959
|
-
* 添加每帧执行的函数
|
|
2960
|
-
* @param func 接收deltaTime参数的回调函数
|
|
2961
|
-
*/
|
|
2962
2973
|
addTickingFunction(func) {
|
|
2963
2974
|
this._tickingFunctions.push(func);
|
|
2964
2975
|
}
|
|
2965
|
-
/**
|
|
2966
|
-
* 移除已注册的tick函数
|
|
2967
|
-
* @param func 要移除的函数引用
|
|
2968
|
-
*/
|
|
2969
2976
|
removeTickingFunction(func) {
|
|
2970
2977
|
const index = this._tickingFunctions.indexOf(func);
|
|
2971
2978
|
if (index >= 0) {
|
|
2972
2979
|
this._tickingFunctions.splice(index, 1);
|
|
2973
2980
|
}
|
|
2974
2981
|
}
|
|
2975
|
-
/**
|
|
2976
|
-
* 销毁应用程序并清理所有资源
|
|
2977
|
-
*/
|
|
2978
2982
|
destroy() {
|
|
2979
|
-
// 停止动画循环
|
|
2980
|
-
if (this.animationFrameHandle) {
|
|
2981
|
-
cancelAnimationFrame(this.animationFrameHandle);
|
|
2982
|
-
this.animationFrameHandle = 0;
|
|
2983
|
-
}
|
|
2984
|
-
// 清理委托
|
|
2985
2983
|
this.onCameraChangedDelegate.clear();
|
|
2986
|
-
// 销毁各个组件
|
|
2987
2984
|
this.controller.destroy();
|
|
2988
2985
|
this.world.destroy();
|
|
2989
2986
|
this.viewport.destroy();
|
|
2990
2987
|
this._assetManager.clearAssets();
|
|
2991
|
-
// 清空tick函数列表
|
|
2992
|
-
this._tickingFunctions = [];
|
|
2993
2988
|
}
|
|
2994
|
-
/**
|
|
2995
|
-
* 更新相机参数
|
|
2996
|
-
* @param param 新的相机参数
|
|
2997
|
-
*/
|
|
2998
2989
|
updateCamera(param) {
|
|
2999
2990
|
const previousCam = this.camera;
|
|
3000
2991
|
this._camera = CameraFactory.updataCamera(param, this.camera);
|
|
@@ -3005,31 +2996,16 @@ class ThreeJsApp {
|
|
|
3005
2996
|
this._camera.updateProjectionMatrix();
|
|
3006
2997
|
this.viewport.markRenderStateDirty();
|
|
3007
2998
|
}
|
|
3008
|
-
/**
|
|
3009
|
-
* 窗口大小改变时的处理
|
|
3010
|
-
* @param width 新的宽度
|
|
3011
|
-
* @param height 新的高度
|
|
3012
|
-
*/
|
|
3013
2999
|
onWindowResize(width, height) {
|
|
3014
3000
|
if (this.camera instanceof webgpu.PerspectiveCamera) {
|
|
3015
3001
|
this.camera.aspect = width / height;
|
|
3016
3002
|
}
|
|
3017
|
-
//
|
|
3018
|
-
//
|
|
3019
|
-
//
|
|
3020
|
-
// this.camera.left = -width / 2;
|
|
3021
|
-
// this.camera.right = width / 2;
|
|
3022
|
-
// this.camera.top = height / 2;
|
|
3023
|
-
// this.camera.bottom = -height / 2;
|
|
3003
|
+
// if(this.camera instanceof OrthographicCamera)
|
|
3004
|
+
// {
|
|
3005
|
+
// // to do
|
|
3024
3006
|
// }
|
|
3025
3007
|
this.camera.updateProjectionMatrix();
|
|
3026
3008
|
}
|
|
3027
|
-
/**
|
|
3028
|
-
* 将当前场景渲染为图片
|
|
3029
|
-
* @param width 图片宽度,默认1024
|
|
3030
|
-
* @param height 图片高度,默认1024
|
|
3031
|
-
* @returns 图片的DataURL
|
|
3032
|
-
*/
|
|
3033
3009
|
async renderAsImage(width = 1024, height = 1024) {
|
|
3034
3010
|
return await this.viewport.renderAsImage(width, height);
|
|
3035
3011
|
}
|
|
@@ -3161,7 +3137,7 @@ class AmbientLightComponent extends LightComponent {
|
|
|
3161
3137
|
this.threeObject.intensity = intensity;
|
|
3162
3138
|
}
|
|
3163
3139
|
createDefaultObject() {
|
|
3164
|
-
return new
|
|
3140
|
+
return new webgpu.AmbientLight(0xffffff, 10);
|
|
3165
3141
|
}
|
|
3166
3142
|
setPosition(...args) {
|
|
3167
3143
|
if (args.length === 1) {
|
|
@@ -3205,7 +3181,7 @@ class AmbientLightActor extends Actor {
|
|
|
3205
3181
|
}
|
|
3206
3182
|
|
|
3207
3183
|
class BoxComponent extends MeshComponent {
|
|
3208
|
-
constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new webgpu.MeshStandardMaterial(
|
|
3184
|
+
constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new webgpu.MeshStandardMaterial(), uuid) {
|
|
3209
3185
|
super(app, new webgpu.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material, uuid);
|
|
3210
3186
|
}
|
|
3211
3187
|
}
|
|
@@ -3352,120 +3328,6 @@ class LabelComponent extends SceneComponent {
|
|
|
3352
3328
|
// labelStyle.style.fontSize = "10px";
|
|
3353
3329
|
// labelStyle.style.pointerEvents = 'auto';
|
|
3354
3330
|
|
|
3355
|
-
class CurveComponent extends SceneComponent {
|
|
3356
|
-
get threeObject() {
|
|
3357
|
-
if (!this.obj) {
|
|
3358
|
-
throw new Error("threeObject is null");
|
|
3359
|
-
}
|
|
3360
|
-
return this.obj;
|
|
3361
|
-
}
|
|
3362
|
-
set threeObject(newThreeObject) {
|
|
3363
|
-
this.obj = newThreeObject;
|
|
3364
|
-
if (this.obj) {
|
|
3365
|
-
this.obj.userData["LYObject"] = this;
|
|
3366
|
-
}
|
|
3367
|
-
}
|
|
3368
|
-
get material() {
|
|
3369
|
-
return this.threeObject.material;
|
|
3370
|
-
}
|
|
3371
|
-
constructor(app, points, setup = { color: 0xffffff }, bCreateLine = true, uuid) {
|
|
3372
|
-
var _a, _b, _c;
|
|
3373
|
-
super(app, uuid);
|
|
3374
|
-
this.closed = (_a = setup.closed) !== null && _a !== void 0 ? _a : false;
|
|
3375
|
-
this.curveType = (_b = setup.type) !== null && _b !== void 0 ? _b : 'centripetal';
|
|
3376
|
-
this.tension = (_c = setup.tension) !== null && _c !== void 0 ? _c : 0;
|
|
3377
|
-
this.sourcePoints = points;
|
|
3378
|
-
this.curve = new three.CatmullRomCurve3(points, this.closed, this.curveType, this.tension);
|
|
3379
|
-
this.points = this.curve.getPoints(points.length * (this.tension === 0 ? 1 : 10) - 1);
|
|
3380
|
-
this.material.color = new three.Color(setup.color);
|
|
3381
|
-
this.bCreateLine = bCreateLine;
|
|
3382
|
-
this.name = "CurveComponent";
|
|
3383
|
-
if (this.bCreateLine) {
|
|
3384
|
-
this.createLine();
|
|
3385
|
-
}
|
|
3386
|
-
}
|
|
3387
|
-
isValid() {
|
|
3388
|
-
return this.threeObject != null;
|
|
3389
|
-
}
|
|
3390
|
-
createDefaultObject() {
|
|
3391
|
-
// 创建默认材质
|
|
3392
|
-
const material = new three.LineBasicMaterial({
|
|
3393
|
-
color: 0xffffff,
|
|
3394
|
-
transparent: true,
|
|
3395
|
-
opacity: 1
|
|
3396
|
-
});
|
|
3397
|
-
// 创建空的几何体和线对象
|
|
3398
|
-
const geometry = new three.BufferGeometry();
|
|
3399
|
-
const line = new three.Line(geometry, material);
|
|
3400
|
-
return line;
|
|
3401
|
-
}
|
|
3402
|
-
resetPoints(points) {
|
|
3403
|
-
this.sourcePoints = points;
|
|
3404
|
-
this.curve = new three.CatmullRomCurve3(points, this.closed, this.curveType, this.tension);
|
|
3405
|
-
this.points = this.curve.getPoints(points.length * (this.tension === 0 ? 1 : 10) - 1);
|
|
3406
|
-
if (this.bCreateLine) {
|
|
3407
|
-
this.createLine();
|
|
3408
|
-
}
|
|
3409
|
-
}
|
|
3410
|
-
createLine() {
|
|
3411
|
-
const positions = [];
|
|
3412
|
-
for (let i = 0; i < this.points.length; ++i) {
|
|
3413
|
-
positions.push(this.points[i].x);
|
|
3414
|
-
positions.push(this.points[i].y);
|
|
3415
|
-
positions.push(this.points[i].z);
|
|
3416
|
-
}
|
|
3417
|
-
const geometry = this.threeObject.geometry;
|
|
3418
|
-
geometry.setAttribute('position', new three.Float32BufferAttribute(positions, 3));
|
|
3419
|
-
}
|
|
3420
|
-
destroy() {
|
|
3421
|
-
if (this.isValid() && this.threeObject) {
|
|
3422
|
-
if (this.threeObject.geometry) {
|
|
3423
|
-
this.threeObject.geometry.dispose();
|
|
3424
|
-
}
|
|
3425
|
-
if (this.material) {
|
|
3426
|
-
this.material.dispose();
|
|
3427
|
-
}
|
|
3428
|
-
}
|
|
3429
|
-
super.destroy();
|
|
3430
|
-
}
|
|
3431
|
-
get SourcePoints() {
|
|
3432
|
-
return this.sourcePoints;
|
|
3433
|
-
}
|
|
3434
|
-
get Curve() {
|
|
3435
|
-
return this.curve;
|
|
3436
|
-
}
|
|
3437
|
-
get Points() {
|
|
3438
|
-
return this.points;
|
|
3439
|
-
}
|
|
3440
|
-
getPointAt(u) {
|
|
3441
|
-
return this.curve.getPointAt(u);
|
|
3442
|
-
}
|
|
3443
|
-
getTangentAt(u) {
|
|
3444
|
-
return this.curve.getTangentAt(u);
|
|
3445
|
-
}
|
|
3446
|
-
// 返回曲线在参数 u 处的世界坐标点
|
|
3447
|
-
getWorldPointAt(u) {
|
|
3448
|
-
const p = this.curve.getPointAt(u).clone();
|
|
3449
|
-
if (this.obj) {
|
|
3450
|
-
this.obj.updateMatrixWorld(true);
|
|
3451
|
-
return this.localToWorld(p);
|
|
3452
|
-
}
|
|
3453
|
-
return p;
|
|
3454
|
-
}
|
|
3455
|
-
// 返回曲线在参数 u 处的世界坐标系下的单位切线方向
|
|
3456
|
-
getWorldTangentAt(u) {
|
|
3457
|
-
const t = this.curve.getTangentAt(u).clone();
|
|
3458
|
-
if (this.obj) {
|
|
3459
|
-
this.obj.updateMatrixWorld(true);
|
|
3460
|
-
t.transformDirection(this.obj.matrixWorld);
|
|
3461
|
-
}
|
|
3462
|
-
return t;
|
|
3463
|
-
}
|
|
3464
|
-
getLength() {
|
|
3465
|
-
return this.curve.getLength();
|
|
3466
|
-
}
|
|
3467
|
-
}
|
|
3468
|
-
|
|
3469
3331
|
const DefaultBloomParam = {
|
|
3470
3332
|
type: exports.PostProcessStepType.Bloom,
|
|
3471
3333
|
threshold: 0,
|
|
@@ -3747,7 +3609,6 @@ exports.AssetManager = AssetManager;
|
|
|
3747
3609
|
exports.BoxActor = BoxActor;
|
|
3748
3610
|
exports.BoxComponent = BoxComponent;
|
|
3749
3611
|
exports.Controller = Controller;
|
|
3750
|
-
exports.CurveComponent = CurveComponent;
|
|
3751
3612
|
exports.DefaultAAParams = DefaultAAParams;
|
|
3752
3613
|
exports.DefaultAppParam = DefaultAppParam;
|
|
3753
3614
|
exports.DefaultBloomParam = DefaultBloomParam;
|
|
@@ -3775,7 +3636,6 @@ exports.LevelComponent = LevelComponent;
|
|
|
3775
3636
|
exports.MaterialAssetPointer = MaterialAssetPointer;
|
|
3776
3637
|
exports.MeshComponent = MeshComponent;
|
|
3777
3638
|
exports.Orbital = Orbital;
|
|
3778
|
-
exports.Pawn = Pawn;
|
|
3779
3639
|
exports.PlaneActor = PlaneActor;
|
|
3780
3640
|
exports.PlaneComponent = PlaneComponent;
|
|
3781
3641
|
exports.SceneComponent = SceneComponent;
|