From 11bc5dbac1dbaf4e880c26e750f636aed0efaab5 Mon Sep 17 00:00:00 2001 From: azhan Date: Thu, 6 Feb 2025 14:10:36 +0800 Subject: [PATCH] feat: update doc --- docs/en/basics/overview.md | 2 +- docs/en/graphics/2D/lottie.md | 3 +- docs/zh/basics/overview.md | 2 +- docs/zh/graphics/2D/lottie.md | 3 +- e2e/.dev/vite.config.js | 1 + examples/draw-lines.ts | 2 +- examples/input-log.ts | 3 +- examples/input-pointer.ts | 227 ++++++++++++++-------------------- examples/physx-select.ts | 219 +++++++++++--------------------- 9 files changed, 175 insertions(+), 287 deletions(-) diff --git a/docs/en/basics/overview.md b/docs/en/basics/overview.md index 8e440e88d..b8c02d2db 100644 --- a/docs/en/basics/overview.md +++ b/docs/en/basics/overview.md @@ -35,7 +35,7 @@ Includes the following sub-packages: | [@galacean/engine](https://www.npmjs.com/package/@galacean/engine) | Core architecture logic and core functionalities | [API](/apis/galacean) | | [@galacean/engine-physics-lite](https://www.npmjs.com/package/@galacean/engine-physics-lite) | Lightweight physics engine | [Doc](/en/docs/physics/overall) | | [@galacean/engine-physics-physx](https://www.npmjs.com/package/@galacean/engine-physics-physx) | Full-featured physics engine | [Doc](/en/docs/physics/overall) | -| [@galacean/engine-shader-lab](https://www.npmjs.com/package/@galacean/engine-shader-lab) | Galacean Shader compiler | [Doc](/en/docs/graphics/shader/lab) | +| [@galacean/engine-shaderlab](https://www.npmjs.com/package/@galacean/engine-shaderlab) | Galacean Shader compiler | [Doc](/en/docs/graphics/shader/lab) | | [@galacean/engine-xr](https://www.npmjs.com/package/@galacean/engine-xr) | XR logic package | [Doc](/en/docs/xr/overall) | | [@galacean/engine-xr-webxr](https://www.npmjs.com/package/@galacean/engine-xr-webxr) | WebXR backend | [Doc](/en/docs/xr/overall) | diff --git a/docs/en/graphics/2D/lottie.md b/docs/en/graphics/2D/lottie.md index ea52ea830..20400c634 100644 --- a/docs/en/graphics/2D/lottie.md +++ b/docs/en/graphics/2D/lottie.md @@ -145,7 +145,8 @@ Thanks to the unified architecture of the Galacean Engine 2D/3D engine, 3D trans | Engine Version | Lottie Version | | :--- | :--- | | 1.2.x | 1.1.0-beta.0 | -| 1.3.x | 1.1.0-beta.0 | +| 1.3.x | engine-1.3 | +| 1.4.x | engine-1.4 | ## Performance Recommendations diff --git a/docs/zh/basics/overview.md b/docs/zh/basics/overview.md index ef18e456f..3c97f4c3e 100644 --- a/docs/zh/basics/overview.md +++ b/docs/zh/basics/overview.md @@ -35,7 +35,7 @@ flowchart LR | [@galacean/engine](https://www.npmjs.com/package/@galacean/engine) | 核心架构逻辑和核心功能 | [API](/apis/galacean) | | [@galacean/engine-physics-lite](https://www.npmjs.com/package/@galacean/engine-physics-lite) | 轻量级物理引擎 | [Doc](/docs/physics/overall) | | [@galacean/engine-physics-physx](https://www.npmjs.com/package/@galacean/engine-physics-physx) | 全功能物理引擎 | [Doc](/docs/physics/overall) | -| [@galacean/engine-shader-lab](https://www.npmjs.com/package/@galacean/engine-shader-lab) | Galacean Shader 编译器 | [Doc](/docs/graphics/shader/shaderLab/intro/) | +| [@galacean/engine-shaderlab](https://www.npmjs.com/package/@galacean/engine-shaderlab) | Galacean Shader 编译器 | [Doc](/docs/graphics/shader/shaderLab/intro/) | | [@galacean/engine-xr](https://www.npmjs.com/package/@galacean/engine-xr) | XR 逻辑包 | [Doc](/docs/xr/overall) | | [@galacean/engine-xr-webxr](https://www.npmjs.com/package/@galacean/engine-xr-webxr) | WebXR 后端 | [Doc](/docs/xr/overall) | diff --git a/docs/zh/graphics/2D/lottie.md b/docs/zh/graphics/2D/lottie.md index 2c4a6f1ca..6a45ab54c 100644 --- a/docs/zh/graphics/2D/lottie.md +++ b/docs/zh/graphics/2D/lottie.md @@ -148,7 +148,8 @@ engine.resourceManager.load({ | 引擎版本 | Lottie 版本 | | :--- | :--- | | 1.2.x | 1.1.0-beta.0 | -| 1.3.x | 1.1.0-beta.0 | +| 1.3.x | engine-1.3 | +| 1.4.x | engine-1.4 | ## 性能方面的建议 diff --git a/e2e/.dev/vite.config.js b/e2e/.dev/vite.config.js index 459bd71db..b6d811f46 100644 --- a/e2e/.dev/vite.config.js +++ b/e2e/.dev/vite.config.js @@ -56,6 +56,7 @@ module.exports = { "@galacean/engine-draco", "@galacean/engine-lottie", "@galacean/engine-spine", + "@galacean/engine-shaderlab", "@galacean/tools-baker", "@galacean/engine-toolkit", "@galacean/engine-toolkit-auxiliary-lines", diff --git a/examples/draw-lines.ts b/examples/draw-lines.ts index 7c0d53dac..9cf0a8939 100644 --- a/examples/draw-lines.ts +++ b/examples/draw-lines.ts @@ -131,7 +131,7 @@ class DrawScript extends Script { } } - onPointerDown(): void { + onPointerBeginDrag(): void { // Screen pointer to world pointer. this._preDrawTime = this.engine.time.elapsedTime; const { x: screenX, y: screenY } = diff --git a/examples/input-log.ts b/examples/input-log.ts index 18d6c528b..39a4afff9 100644 --- a/examples/input-log.ts +++ b/examples/input-log.ts @@ -21,7 +21,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Pointer: true, Keyboard: true, Size: 1, - Color: [255, 255, 255], + Color: [255, 0, 0], OffsetX: 0, OffsetY: 0, }; @@ -53,5 +53,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { inputLogger.color.set(v[0] / 255, v[1] / 255, v[2] / 255, 1); }); + inputLogger.color.set(1, 0, 0, 1); textFolder.open(); }); diff --git a/examples/input-pointer.ts b/examples/input-pointer.ts index fd366d388..8a79e1d52 100644 --- a/examples/input-pointer.ts +++ b/examples/input-pointer.ts @@ -17,149 +17,112 @@ import { Entity, Vector3, WebGLEngine, + PointerEventData } from "@galacean/engine"; import { LitePhysics } from "@galacean/engine-physics-lite"; // Create engine -WebGLEngine.create({ canvas: "canvas", physics: new LitePhysics() }).then( - (engine) => { - engine.canvas.resizeByClientSize(); - const invCanvasWidth = 1 / engine.canvas.width; - const invCanvasHeight = 1 / engine.canvas.height; - // @ts-ignore - const inputManager = engine.inputManager; - const scene = engine.sceneManager.activeScene; - const rootEntity = scene.createRootEntity("root"); +WebGLEngine.create({ canvas: "canvas", physics: new LitePhysics() }).then((engine) => { + engine.canvas.resizeByClientSize(); + const invCanvasWidth = 1 / engine.canvas.width; + const invCanvasHeight = 1 / engine.canvas.height; + // @ts-ignore + const inputManager = engine.inputManager; + const scene = engine.sceneManager.activeScene; + const rootEntity = scene.createRootEntity("root"); - scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1); - scene.ambientLight.diffuseIntensity = 1.2; + scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1); + scene.ambientLight.diffuseIntensity = 1.2; - // init camera - const cameraEntity = rootEntity.createChild("camera"); - const camera = cameraEntity.addComponent(Camera); - cameraEntity.transform.setPosition(10, 10, 10); - cameraEntity.transform.lookAt(new Vector3(0, 0, 0)); + // init camera + const cameraEntity = rootEntity.createChild("camera"); + const camera = cameraEntity.addComponent(Camera); + cameraEntity.transform.setPosition(10, 10, 10); + cameraEntity.transform.lookAt(new Vector3(0, 0, 0)); - // init point light - let light = rootEntity.createChild("light1"); - light.transform.setPosition(-8, -2, 8); - light.addComponent(PointLight).intensity = 0.12; + // init point light + let light = rootEntity.createChild("light1"); + light.transform.setPosition(-8, -2, 8); + light.addComponent(PointLight).intensity = 0.12; - light = rootEntity.createChild("light2"); - light.transform.setPosition(8, -2, 0); - light.addComponent(PointLight).intensity = 0.12; + light = rootEntity.createChild("light2"); + light.transform.setPosition(8, -2, 0); + light.addComponent(PointLight).intensity = 0.12; - class PanScript extends Script { - private startPointerPos = new Vector3(); - private tempVec2: Vector2 = new Vector2(); - private tempVec3: Vector3 = new Vector3(); - private zValue: number = 0; + class PanScript extends Script { + private startPointerPos = new Vector3(); + private tempVec2: Vector2 = new Vector2(); + private tempVec3: Vector3 = new Vector3(); + private zValue: number = 0; - onPointerDown(pointer: Pointer) { - this.zValue = camera.worldToViewportPoint( - this.entity.transform.worldPosition, - this.tempVec3 - ).z; - const { tempVec2, tempVec3 } = this; - tempVec2.copyFrom(pointer.position); - tempVec3.set( - tempVec2.x * invCanvasWidth, - tempVec2.y * invCanvasHeight, - this.zValue - ); - camera.viewportToWorldPoint(tempVec3, this.startPointerPos); - } - - onPointerDrag(pointer: Pointer) { - const { tempVec2, tempVec3, startPointerPos } = this; - const { transform } = this.entity; - tempVec2.copyFrom(pointer.position); - tempVec3.set( - tempVec2.x * invCanvasWidth, - tempVec2.y * invCanvasHeight, - this.zValue - ); - camera.viewportToWorldPoint(tempVec3, tempVec3); - Vector3.subtract(tempVec3, startPointerPos, startPointerPos); - transform.worldPosition.add(startPointerPos); - startPointerPos.copyFrom(tempVec3); - } + onPointerBeginDrag(eventData: PointerEventData) { + this.zValue = camera.worldToViewportPoint(this.entity.transform.worldPosition, this.tempVec3).z; + const { tempVec2, tempVec3 } = this; + tempVec2.copyFrom(eventData.pointer.position); + tempVec3.set(tempVec2.x * invCanvasWidth, tempVec2.y * invCanvasHeight, this.zValue); + camera.viewportToWorldPoint(tempVec3, this.startPointerPos); } - class ClickScript extends Script { - private material: BlinnPhongMaterial; - onStart() { - this.material = ( - this.entity.getComponent(MeshRenderer).getInstanceMaterial() - ); - } - - onPointerClick() { - this.material.baseColor.set( - Math.random(), - Math.random(), - Math.random(), - 1.0 - ); - } + onPointerDrag(eventData: PointerEventData) { + const { tempVec2, tempVec3, startPointerPos } = this; + const { transform } = this.entity; + tempVec2.copyFrom(eventData.pointer.position); + tempVec3.set(tempVec2.x * invCanvasWidth, tempVec2.y * invCanvasHeight, this.zValue); + camera.viewportToWorldPoint(tempVec3, tempVec3); + Vector3.subtract(tempVec3, startPointerPos, startPointerPos); + transform.worldPosition.add(startPointerPos); + startPointerPos.copyFrom(tempVec3); } - - class EnterExitScript extends Script { - private material: BlinnPhongMaterial; - onStart() { - this.material = ( - this.entity.getComponent(MeshRenderer).getInstanceMaterial() - ); - } - - onPointerEnter() { - this.material.baseColor.set( - Math.random(), - Math.random(), - Math.random(), - 1.0 - ); - } - - onPointerExit() { - this.material.baseColor.set( - Math.random(), - Math.random(), - Math.random(), - 1.0 - ); - } - } - - function createBox(x: number, y: number, z: number): Entity { - // create box test entity - const cubeSize = 2.0; - const boxEntity = rootEntity.createChild("BoxEntity"); - boxEntity.transform.setPosition(x, y, z); - - const boxMtl = new BlinnPhongMaterial(engine); - const boxRenderer = boxEntity.addComponent(MeshRenderer); - boxMtl.baseColor.set(0.6, 0.3, 0.3, 1.0); - boxRenderer.mesh = PrimitiveMesh.createCuboid( - engine, - cubeSize, - cubeSize, - cubeSize - ); - boxRenderer.setMaterial(boxMtl); - - const boxCollider: StaticCollider = - boxEntity.addComponent(StaticCollider); - const boxColliderShape = new BoxColliderShape(); - boxColliderShape.size.set(cubeSize, cubeSize, cubeSize); - boxCollider.addShape(boxColliderShape); - return boxEntity; - } - createBox(0, 0, 0).addComponent(PanScript); - createBox(3, 0, -3).addComponent(ClickScript); - createBox(-3, 0, 3).addComponent(EnterExitScript); - - // Run engine - engine.run(); } -); + + class ClickScript extends Script { + private material: BlinnPhongMaterial; + onStart() { + this.material = this.entity.getComponent(MeshRenderer).getInstanceMaterial(); + } + + onPointerClick() { + this.material.baseColor.set(Math.random(), Math.random(), Math.random(), 1.0); + } + } + + class EnterExitScript extends Script { + private material: BlinnPhongMaterial; + onStart() { + this.material = this.entity.getComponent(MeshRenderer).getInstanceMaterial(); + } + + onPointerEnter() { + this.material.baseColor.set(Math.random(), Math.random(), Math.random(), 1.0); + } + + onPointerExit() { + this.material.baseColor.set(Math.random(), Math.random(), Math.random(), 1.0); + } + } + + function createBox(x: number, y: number, z: number): Entity { + // create box test entity + const cubeSize = 2.0; + const boxEntity = rootEntity.createChild("BoxEntity"); + boxEntity.transform.setPosition(x, y, z); + + const boxMtl = new BlinnPhongMaterial(engine); + const boxRenderer = boxEntity.addComponent(MeshRenderer); + boxMtl.baseColor.set(0.6, 0.3, 0.3, 1.0); + boxRenderer.mesh = PrimitiveMesh.createCuboid(engine, cubeSize, cubeSize, cubeSize); + boxRenderer.setMaterial(boxMtl); + + const boxCollider: StaticCollider = boxEntity.addComponent(StaticCollider); + const boxColliderShape = new BoxColliderShape(); + boxColliderShape.size.set(cubeSize, cubeSize, cubeSize); + boxCollider.addShape(boxColliderShape); + return boxEntity; + } + createBox(0, 0, 0).addComponent(PanScript); + createBox(3, 0, -3).addComponent(ClickScript); + createBox(-3, 0, 3).addComponent(EnterExitScript); + + // Run engine + engine.run(); +}); diff --git a/examples/physx-select.ts b/examples/physx-select.ts index 0144e5955..a2ce78b9c 100644 --- a/examples/physx-select.ts +++ b/examples/physx-select.ts @@ -20,6 +20,7 @@ import { PBRMaterial, PlaneColliderShape, Pointer, + PointerEventData, PrimitiveMesh, Quaternion, Script, @@ -29,7 +30,7 @@ import { Texture2D, Vector2, Vector3, - WebGLEngine, + WebGLEngine } from "@galacean/engine"; import { PhysXPhysics } from "@galacean/engine-physics-physx"; @@ -47,35 +48,23 @@ class PanScript extends Script { this.collider = this.entity.getComponent(DynamicCollider); } - onPointerDown(pointer: Pointer) { + onPointerDown(eventData: PointerEventData) { // get depth - this.camera.worldToViewportPoint( - this.entity.transform.worldPosition, - this.tempVec3 - ); - this.zValue = this.camera.worldToViewportPoint( - this.entity.transform.worldPosition, - this.tempVec3 - ).z; + this.camera.worldToViewportPoint(this.entity.transform.worldPosition, this.tempVec3); + this.zValue = this.camera.worldToViewportPoint(this.entity.transform.worldPosition, this.tempVec3).z; const { tempVec3 } = this; - tempVec3.set( - pointer.position.x * this.invCanvasWidth, - pointer.position.y * this.invCanvasHeight, - this.zValue - ); + const { position } = eventData.pointer; + tempVec3.set(position.x * this.invCanvasWidth, position.y * this.invCanvasHeight, this.zValue); this.camera.viewportToWorldPoint(tempVec3, this.startPointerPos); this.collider.linearVelocity = new Vector3(); this.collider.angularVelocity = new Vector3(); } - onPointerDrag(pointer: Pointer) { + onPointerDrag(eventData: PointerEventData) { const { tempVec3, startPointerPos } = this; const { transform } = this.entity; - this.tempVec3.set( - pointer.position.x * this.invCanvasWidth, - pointer.position.y * this.invCanvasHeight, - this.zValue - ); + const { position } = eventData.pointer; + this.tempVec3.set(position.x * this.invCanvasWidth, position.y * this.invCanvasHeight, this.zValue); this.camera.viewportToWorldPoint(tempVec3, tempVec3); Vector3.subtract(tempVec3, startPointerPos, startPointerPos); transform.worldPosition = transform.worldPosition.add(startPointerPos); @@ -83,19 +72,9 @@ class PanScript extends Script { } } -function addPlane( - rootEntity: Entity, - size: Vector2, - position: Vector3, - rotation: Quaternion -): Entity { +function addPlane(rootEntity: Entity, size: Vector2, position: Vector3, rotation: Quaternion): Entity { const mtl = new PBRMaterial(rootEntity.engine); - mtl.baseColor.set( - 0.2179807202597362, - 0.2939682161541871, - 0.31177952549087604, - 1 - ); + mtl.baseColor.set(0.2179807202597362, 0.2939682161541871, 0.31177952549087604, 1); mtl.roughness = 0.0; mtl.metallic = 0.0; @@ -135,13 +114,7 @@ function addVerticalBox( const boxRenderer = entity.addComponent(MeshRenderer); boxMtl.baseTexture = texture; boxMtl.baseTexture.anisoLevel = 12; - boxRenderer.mesh = PrimitiveMesh.createCuboid( - rootEntity.engine, - 0.5, - 0.33, - 2, - false - ); + boxRenderer.mesh = PrimitiveMesh.createCuboid(rootEntity.engine, 0.5, 0.33, 2, false); boxRenderer.setMaterial(boxMtl); const physicsBox = new BoxColliderShape(); @@ -153,8 +126,7 @@ function addVerticalBox( const boxCollider = entity.addComponent(DynamicCollider); boxCollider.addShape(physicsBox); boxCollider.mass = 1; - boxCollider.collisionDetectionMode = - CollisionDetectionMode.ContinuousSpeculative; + boxCollider.collisionDetectionMode = CollisionDetectionMode.ContinuousSpeculative; const pan = entity.addComponent(PanScript); pan.camera = camera; @@ -181,12 +153,7 @@ function addHorizontalBox( const boxRenderer = entity.addComponent(MeshRenderer); boxMtl.baseTexture = texture; boxMtl.baseTexture.anisoLevel = 12; - boxRenderer.mesh = PrimitiveMesh.createCuboid( - rootEntity.engine, - 2, - 0.33, - 0.5 - ); + boxRenderer.mesh = PrimitiveMesh.createCuboid(rootEntity.engine, 2, 0.33, 0.5); boxRenderer.setMaterial(boxMtl); const physicsBox = new BoxColliderShape(); @@ -198,8 +165,7 @@ function addHorizontalBox( const boxCollider = entity.addComponent(DynamicCollider); boxCollider.addShape(physicsBox); boxCollider.mass = 0.5; - boxCollider.collisionDetectionMode = - CollisionDetectionMode.ContinuousSpeculative; + boxCollider.collisionDetectionMode = CollisionDetectionMode.ContinuousSpeculative; const pan = entity.addComponent(PanScript); pan.camera = camera; @@ -216,36 +182,9 @@ function addBox( invCanvasHeight: number ): void { for (let i: number = 0; i < 8; i++) { - addVerticalBox( - rootEntity, - texture1, - -0.65, - 0.165 + i * 0.33 * 2, - 0, - camera, - invCanvasWidth, - invCanvasHeight - ); - addVerticalBox( - rootEntity, - texture1, - 0, - 0.165 + i * 0.33 * 2, - 0, - camera, - invCanvasWidth, - invCanvasHeight - ); - addVerticalBox( - rootEntity, - texture1, - 0.65, - 0.165 + i * 0.33 * 2, - 0, - camera, - invCanvasWidth, - invCanvasHeight - ); + addVerticalBox(rootEntity, texture1, -0.65, 0.165 + i * 0.33 * 2, 0, camera, invCanvasWidth, invCanvasHeight); + addVerticalBox(rootEntity, texture1, 0, 0.165 + i * 0.33 * 2, 0, camera, invCanvasWidth, invCanvasHeight); + addVerticalBox(rootEntity, texture1, 0.65, 0.165 + i * 0.33 * 2, 0, camera, invCanvasWidth, invCanvasHeight); addHorizontalBox( rootEntity, @@ -257,16 +196,7 @@ function addBox( invCanvasWidth, invCanvasHeight ); - addHorizontalBox( - rootEntity, - texture2, - 0, - 0.165 + 0.33 + i * 0.33 * 2, - 0, - camera, - invCanvasWidth, - invCanvasHeight - ); + addHorizontalBox(rootEntity, texture2, 0, 0.165 + 0.33 + i * 0.33 * 2, 0, camera, invCanvasWidth, invCanvasHeight); addHorizontalBox( rootEntity, texture2, @@ -281,69 +211,60 @@ function addBox( } //-------------------------------------------------------------------------------------------------------------------- -WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }).then( - (engine) => { - engine.canvas.resizeByClientSize(); - const invCanvasWidth = 1 / engine.canvas.width; - const invCanvasHeight = 1 / engine.canvas.height; - const scene = engine.sceneManager.activeScene; - scene.shadowDistance = 20; - const rootEntity = scene.createRootEntity("root"); +WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }).then((engine) => { + engine.canvas.resizeByClientSize(); + const invCanvasWidth = 1 / engine.canvas.width; + const invCanvasHeight = 1 / engine.canvas.height; + const scene = engine.sceneManager.activeScene; + scene.shadowDistance = 20; + const rootEntity = scene.createRootEntity("root"); - scene.ambientLight.diffuseSolidColor.set(0.5, 0.5, 0.5, 1); - scene.ambientLight.diffuseIntensity = 1.2; + scene.ambientLight.diffuseSolidColor.set(0.5, 0.5, 0.5, 1); + scene.ambientLight.diffuseIntensity = 1.2; - // init camera - const cameraEntity = rootEntity.createChild("camera"); - const camera = cameraEntity.addComponent(Camera); - cameraEntity.transform.setPosition(7, 7, 7); - cameraEntity.transform.lookAt(new Vector3(0, 2, 0), new Vector3(0, 1, 0)); + // init camera + const cameraEntity = rootEntity.createChild("camera"); + const camera = cameraEntity.addComponent(Camera); + cameraEntity.transform.setPosition(7, 7, 7); + cameraEntity.transform.lookAt(new Vector3(0, 2, 0), new Vector3(0, 1, 0)); - const entity = cameraEntity.createChild("text"); - entity.transform.position = new Vector3(0, 3.5, -10); - const renderer = entity.addComponent(TextRenderer); - renderer.color = new Color(); - renderer.text = "Use mouse to move the bricks"; - renderer.font = Font.createFromOS(entity.engine, "Arial"); - renderer.fontSize = 40; + const entity = cameraEntity.createChild("text"); + entity.transform.position = new Vector3(0, 3.5, -10); + const renderer = entity.addComponent(TextRenderer); + renderer.color = new Color(); + renderer.text = "Use mouse to move the bricks"; + renderer.font = Font.createFromOS(entity.engine, "Arial"); + renderer.fontSize = 40; - // init point light - const light = rootEntity.createChild("light"); - light.transform.setPosition(0, 5, 8); - light.transform.lookAt(new Vector3(0, 2, 0), new Vector3(0, 1, 0)); - const directLight = light.addComponent(DirectLight); - directLight.shadowType = ShadowType.SoftLow; + // init point light + const light = rootEntity.createChild("light"); + light.transform.setPosition(0, 5, 8); + light.transform.lookAt(new Vector3(0, 2, 0), new Vector3(0, 1, 0)); + const directLight = light.addComponent(DirectLight); + directLight.shadowType = ShadowType.SoftLow; - addPlane(rootEntity, new Vector2(30, 30), new Vector3(), new Quaternion()); + addPlane(rootEntity, new Vector2(30, 30), new Vector3(), new Quaternion()); - Promise.all([ - engine.resourceManager.load({ - url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*Wkn5QY0tpbcAAAAAAAAAAAAAARQnAQ", - type: AssetType.Texture2D, - }), - engine.resourceManager.load({ - url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*W5azT5DjDAEAAAAAAAAAAAAAARQnAQ", - type: AssetType.Texture2D, - }), - ]).then((asset: Texture2D[]) => { - addBox( - rootEntity, - asset[0], - asset[1], - camera, - invCanvasWidth, - invCanvasHeight - ); + Promise.all([ + engine.resourceManager.load({ + url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*Wkn5QY0tpbcAAAAAAAAAAAAAARQnAQ", + type: AssetType.Texture2D + }), + engine.resourceManager.load({ + url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*W5azT5DjDAEAAAAAAAAAAAAAARQnAQ", + type: AssetType.Texture2D + }) + ]).then((asset: Texture2D[]) => { + addBox(rootEntity, asset[0], asset[1], camera, invCanvasWidth, invCanvasHeight); - engine.resourceManager - .load({ - type: AssetType.Env, - url: "https://gw.alipayobjects.com/os/bmw-prod/89c54544-1184-45a1-b0f5-c0b17e5c3e68.bin", - }) - .then((ambientLight) => { - scene.ambientLight = ambientLight; - engine.run(); - }); - }); - } -); + engine.resourceManager + .load({ + type: AssetType.Env, + url: "https://gw.alipayobjects.com/os/bmw-prod/89c54544-1184-45a1-b0f5-c0b17e5c3e68.bin" + }) + .then((ambientLight) => { + scene.ambientLight = ambientLight; + engine.run(); + }); + }); +});