diff --git a/zh-cn/application-dev/reference/apis-arkgraphics3d/js-apis-inner-scene-nodes.md b/zh-cn/application-dev/reference/apis-arkgraphics3d/js-apis-inner-scene-nodes.md index 08516534be74fd2ca64a5ca0270060dfa5db7131..13dc0217efbd713883a4c7a332fb93f02c977cf7 100644 --- a/zh-cn/application-dev/reference/apis-arkgraphics3d/js-apis-inner-scene-nodes.md +++ b/zh-cn/application-dev/reference/apis-arkgraphics3d/js-apis-inner-scene-nodes.md @@ -415,21 +415,105 @@ raycast(viewPosition: Vec2, params: RaycastParameters): Promise ```ts import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, Vec2, Vec3, RaycastParameters, - RaycastResult } from '@kit.ArkGraphics3D'; + RaycastResult, Quaternion} from '@kit.ArkGraphics3D'; -function Raycast() : void { - let scene: Promise = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.gltf")); - scene.then(async (result: Scene) => { - if (result) { +function Raycast(): void { + Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")) + .then(async (result: Scene) => { + if (!result.root) { + return; + } + let node: Node | null | undefined = result.root.getNodeByPath("rootNode_/Unnamed Node 1/AnimatedCube"); let sceneFactory: SceneResourceFactory = result.getResourceFactory(); let sceneCameraParameter: SceneNodeParameters = { name: "camera1" }; // 创建相机 - let camera: Promise = sceneFactory.createCamera(sceneCameraParameter); + let camera: Camera = await sceneFactory.createCamera(sceneCameraParameter); camera.enabled = true; - lookAt(this.cam, { x: 15, y: 10, z: 20 }, { x: 0, y: 0, z: 0 }, { x: 0, y: 1, z: 0 }); - let viewPos: scene3d.Vec2 = { x: 0.5, y: 0.5 }; - return camera?.raycast(viewPos, result.root); + // 设置相机视角 + lookAt(camera, { x: 0, y: 0, z: -3 }, { x: 0, y: 0, z: 0 }, { x: 0, y: 1, z: 0 }); + + let viewPos: Vec2 = { x: 0.5, y: 0.5 }; + let raycastParams: RaycastParameters = {}; + if (node) { + raycastParams.rootNode = node; + } + return camera.raycast(viewPos, raycastParams); + }); +} + +function Sub(l: Vec3, r: Vec3): Vec3 { + return { x: l.x - r.x, y: l.y - r.y, z: l.z - r.z }; +} +function Dot(l: Vec3, r: Vec3): number { + return l.x * r.x + l.y * r.y + r.z * l.z; +} +function Normalize(l: Vec3): Vec3 { + let d = Math.sqrt(Dot(l, l)); + return { x: l.x / d, y: l.y / d, z: l.z / d }; +} +function Cross(l: Vec3, r: Vec3): Vec3 { + return { x: (l.y * r.z - l.z * r.y), y: (l.z * r.x - l.x * r.z), z: (l.x * r.y - l.y * r.x) }; +} +function Mul(l: Quaternion, d: number): Quaternion { + return { + x: l.x * d, + y: l.y * d, + z: l.z * d, + w: l.w * d + }; +} +function lookAt(node: Node, eye: Vec3, center: Vec3, up: Vec3) { + + let t: number; + + let q: Quaternion = { + x: 0.0, + y: 0.0, + z: 0.0, + w: 0.0 + }; + let f = Normalize(Sub(center, eye)); + let m0 = Normalize(Cross(f, up)); + let m1 = Cross(m0, f); + let m2: Vec3 = { x: -f.x, y: -f.y, z: -f.z }; + if (m2.z < 0) { + if (m0.x > m1.y) { + t = 1.0 + m0.x - m1.y - m2.z; + q = { + x: t, + y: m0.y + m1.x, + z: m2.x + m0.z, + w: m1.z - m2.y + }; + } else { + t = 1.0 - m0.x + m1.y - m2.z; + q = { + x: m0.y + m1.x, + y: t, + z: m1.z + m2.y, + w: m2.x - m0.z + }; } - }); + } else { + if (m0.x < -m1.y) { + t = 1.0 - m0.x - m1.y + m2.z; + q = { + x: m2.x + m0.z, + y: m1.z + m2.y, + z: t, + w: m0.y - m1.x + }; + } else { + t = 1.0 + m0.x + m1.y + m2.z; + q = { + x: m1.z - m2.y, + y: m2.x - m0.z, + z: m0.y - m1.x, + w: t + } + } + } + node.position = eye; + node.rotation = Mul(q, 0.5 / Math.sqrt(t)); } ``` \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis-arkgraphics3d/js-apis-inner-scene.md b/zh-cn/application-dev/reference/apis-arkgraphics3d/js-apis-inner-scene.md index 66cbfedad1f75e9cd7ef5ec5bf4043319b112ba6..9253fe3e9684fbfb2d3d6ead761528951054e6b4 100644 --- a/zh-cn/application-dev/reference/apis-arkgraphics3d/js-apis-inner-scene.md +++ b/zh-cn/application-dev/reference/apis-arkgraphics3d/js-apis-inner-scene.md @@ -194,74 +194,69 @@ createMesh(params: SceneResourceParameters, geometry: GeometryDefinition): Promi ```ts import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, RenderContext, RenderResourceFactory, - GeometryDefinition, MeshResource } from '@kit.ArkGraphics3D'; + CustomGeometry, MeshResource, PrimitiveTopology} from '@kit.ArkGraphics3D'; function createMeshResource(): Promise { - return Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")) - .then(scene => { - const renderContext = scene.getRenderContext(); - if (!renderContext) { - return Promise.reject(new Error("RenderContext is null")); - } - const renderResourceFactory = renderContext.getRenderResourceFactory(); - let geometry = new CustomGeometry( - [ - { x: 0, y: 0, z: 0 }, - { x: 1, y: 0, z: 0 }, - { x: 1, y: 1, z: 0 }, - { x: 0, y: 1, z: 0 }, - { x: 0, y: 0, z: 1 }, - { x: 1, y: 0, z: 1 }, - { x: 1, y: 1, z: 1 }, - { x: 0, y: 1, z: 1 } - ], - [ - 0, 1, 2, 2, 3, 0, - 4, 5, 6, 6, 7, 4, - 0, 4, 5, 5, 1, 0, - 1, 5, 6, 6, 2, 1, - 2, 6, 7, 7, 3, 2, - 3, 7, 4, 4, 0, 3 - ] - ); - geometry.topology = PrimitiveTopology.TRIANGLE_LIST; - geometry.normals = [ - { x: 0, y: 0, z: 1 }, - { x: 0, y: 0, z: 1 }, - { x: 0, y: 0, z: 1 }, - { x: 0, y: 0, z: 1 }, - { x: 0, y: 0, z: 1 }, - { x: 0, y: 0, z: 1 }, - { x: 0, y: 0, z: 1 }, - { x: 0, y: 0, z: 1 } - ]; - - geometry.uvs = [ - { x: 0, y: 0 }, - { x: 1, y: 0 }, - { x: 1, y: 1 }, - { x: 0, y: 1 }, - { x: 0, y: 0 }, - { x: 1, y: 0 }, - { x: 1, y: 1 }, - { x: 0, y: 1 } - ]; - geometry.colors = [ - { r: 1, g: 0, b: 0, a: 1 }, - { r: 0, g: 1, b: 0, a: 1 }, - { r: 0, g: 0, b: 1, a: 1 }, - { r: 1, g: 1, b: 0, a: 1 }, - { r: 1, g: 0, b: 1, a: 1 }, - { r: 0, g: 1, b: 1, a: 1 }, - { r: 1, g: 1, b: 1, a: 1 }, - { r: 0, g: 0, b: 0, a: 1 } - ]; - let sceneResourceParameter: SceneResourceParameters = { - name: "cubeMesh", - uri: $rawfile("models/cube.obj") - }; - return renderResourceFactory.createMesh(sceneResourceParameter, geometry); - }); + const renderContext: RenderContext | null = Scene.getDefaultRenderContext(); + if (!renderContext) { + return Promise.reject(new Error("RenderContext is null")); + } + const renderResourceFactory: RenderResourceFactory = renderContext.getRenderResourceFactory(); + const geometry = new CustomGeometry(); + geometry.vertices = [ + { x: 0, y: 0, z: 0 }, + { x: 1, y: 0, z: 0 }, + { x: 1, y: 1, z: 0 }, + { x: 0, y: 1, z: 0 }, + { x: 0, y: 0, z: 1 }, + { x: 1, y: 0, z: 1 }, + { x: 1, y: 1, z: 1 }, + { x: 0, y: 1, z: 1 } + ]; + geometry.indices = [ + 0, 1, 2, 2, 3, 0, // front + 4, 5, 6, 6, 7, 4, // back + 0, 4, 5, 5, 1, 0, // bottom + 1, 5, 6, 6, 2, 1, // right + 3, 2, 6, 6, 7, 3, // top + 3, 7, 4, 4, 0, 3 // left + ]; + geometry.topology = PrimitiveTopology.TRIANGLE_LIST; + geometry.normals = [ + { x: 0, y: 0, z: 1 }, + { x: 0, y: 0, z: 1 }, + { x: 0, y: 0, z: 1 }, + { x: 0, y: 0, z: 1 }, + { x: 0, y: 0, z: 1 }, + { x: 0, y: 0, z: 1 }, + { x: 0, y: 0, z: 1 }, + { x: 0, y: 0, z: 1 } + ]; + geometry.uvs = [ + { x: 0, y: 0 }, + { x: 1, y: 0 }, + { x: 1, y: 1 }, + { x: 0, y: 1 }, + { x: 0, y: 0 }, + { x: 1, y: 0 }, + { x: 1, y: 1 }, + { x: 0, y: 1 } + ]; + geometry.colors = [ + { r: 1, g: 0, b: 0, a: 1 }, + { r: 0, g: 1, b: 0, a: 1 }, + { r: 0, g: 0, b: 1, a: 1 }, + { r: 1, g: 1, b: 0, a: 1 }, + { r: 1, g: 0, b: 1, a: 1 }, + { r: 0, g: 1, b: 1, a: 1 }, + { r: 1, g: 1, b: 1, a: 1 }, + { r: 0, g: 0, b: 0, a: 1 } + ]; + let sceneResourceParameter: SceneResourceParameters = { + name: "cubeMesh", + uri: $rawfile("image/Cube_BaseColor.png") + }; + return renderResourceFactory.createMesh(sceneResourceParameter, geometry); } ``` @@ -326,26 +321,24 @@ createScene(uri?: ResourceStr): Promise\ **示例：** ```ts import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, - LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, RenderContext, RenderResourceFactory, - ResourceStr } from '@kit.ArkGraphics3D'; + LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, RenderContext, + RenderResourceFactory} from '@kit.ArkGraphics3D'; +// fromFile=true：从指定glb文件加载场景，fromFile=false：创建一个空场景，此参数是为了示例展示两种常见场景创建方式 function createScenePromise(fromFile: boolean = false): Promise { - return Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")) - .then(scene => { - const renderContext = scene.getRenderContext(); - if (!renderContext) { - return Promise.reject(new Error("RenderContext is null")); - } - - const renderResourceFactory = renderContext.getRenderResourceFactory(); - if (fromFile) { - // 从文件创建场景 - return renderResourceFactory.createScene($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")); - } else { - // 创建空场景 - return renderResourceFactory.createScene(); - } - }); + const renderContext: RenderContext | null = Scene.getDefaultRenderContext(); + if (!renderContext) { + return Promise.reject(new Error("RenderContext is null")); + } + + const renderResourceFactory: RenderResourceFactory = renderContext.getRenderResourceFactory(); + if (fromFile) { + // 从文件创建场景 + return renderResourceFactory.createScene($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")); + } else { + // 创建空场景 + return renderResourceFactory.createScene(); + } } ``` @@ -607,8 +600,8 @@ getRenderResourceFactory() : RenderResourceFactory **示例：** ```ts import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, - LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, RenderContext, RenderResourceFactory, - RenderContext } from '@kit.ArkGraphics3D'; + LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, RenderContext, + RenderResourceFactory } from '@kit.ArkGraphics3D'; function getRenderResourceFactory(): void { Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")) @@ -645,8 +638,8 @@ loadPlugin(name: string): Promise\ **示例：** ```ts import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, - LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, RenderContext, RenderResourceFactory, - RenderContext } from '@kit.ArkGraphics3D'; + LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, RenderContext, + RenderResourceFactory } from '@kit.ArkGraphics3D'; function loadPlugin(): void { Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb"))