From 579aab8f9a50e33379548efa0c5ab421e2ff9752 Mon Sep 17 00:00:00 2001 From: ShuangLiu Date: Tue, 13 Aug 2024 22:55:39 +0800 Subject: [PATCH] chore: add more shape2D samples --- packages/geometry/ExtrudeGeometry/Path2D.ts | 10 +- samples/geometry/Sample_ExtrudeGeometry.ts | 199 ++++++++++++++++---- src/util/GridObject.ts | 1 - 3 files changed, 167 insertions(+), 43 deletions(-) diff --git a/packages/geometry/ExtrudeGeometry/Path2D.ts b/packages/geometry/ExtrudeGeometry/Path2D.ts index 702b4818..310d66d3 100644 --- a/packages/geometry/ExtrudeGeometry/Path2D.ts +++ b/packages/geometry/ExtrudeGeometry/Path2D.ts @@ -49,7 +49,7 @@ export class Path2D { return points; } - public setFromPoints(points: Vector2[]): Path2D { + public setFromPoints(points: Vector2[]) { this.moveTo(points[0].x, points[0].y); for (let i = 1; i < points.length; i++) { this.lineTo(points[i].x, points[i].y); @@ -57,24 +57,24 @@ export class Path2D { return this; } - public moveTo(x: number, y: number): Path2D { + public moveTo(x: number, y: number) { this.currentPoint.set(x, y); return this; } - public lineTo(x: number, y: number): Path2D { + public lineTo(x: number, y: number) { this.curves.push(new LineCurve2D(this.currentPoint.clone(), new Vector2(x, y))); this.currentPoint.set(x, y); return this; } - public quadraticCurveTo(cpX: number, cpY: number, x: number, y: number): Path2D { + public quadraticCurveTo(cpX: number, cpY: number, x: number, y: number) { this.curves.push(new QuadraticBezierCurve2D(this.currentPoint.clone(), new Vector2(cpX, cpY), new Vector2(x, y))); this.currentPoint.set(x, y); return this; } - public bezierCurveTo(cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, x: number, y: number): Path2D { + public bezierCurveTo(cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, x: number, y: number) { this.curves.push(new CubicBezierCurve2D(this.currentPoint.clone(), new Vector2(cp1X, cp1Y), new Vector2(cp2X, cp2Y), new Vector2(x, y))); this.currentPoint.set(x, y); return this; diff --git a/samples/geometry/Sample_ExtrudeGeometry.ts b/samples/geometry/Sample_ExtrudeGeometry.ts index db59e1c4..19bd7f90 100644 --- a/samples/geometry/Sample_ExtrudeGeometry.ts +++ b/samples/geometry/Sample_ExtrudeGeometry.ts @@ -1,27 +1,20 @@ -import { Engine3D, View3D, Scene3D, CameraUtil, AtmosphericComponent, webGPUContext, HoverCameraController, Object3D, DirectLight, KelvinUtil, LitMaterial, MeshRenderer, Color, GridObject } from "@orillusion/core"; -import { Shape2D, ExtrudeGeometry } from "@orillusion/geometry"; +import { Engine3D, View3D, Scene3D, CameraUtil, AtmosphericComponent, webGPUContext, HoverCameraController, Object3D, DirectLight, KelvinUtil, LitMaterial, MeshRenderer, Color, GridObject, Vector2, Vector3 } from "@orillusion/core"; +import { Shape2D, ExtrudeGeometry, Path2D } from "@orillusion/geometry"; class Sample_ExtrudeGeometry { - lightObj: Object3D; + scene: Scene3D async run() { await Engine3D.init(); let view = new View3D(); - view.scene = new Scene3D(); + view.scene = this.scene = new Scene3D(); let sky = view.scene.addComponent(AtmosphericComponent); view.camera = CameraUtil.createCamera3DObject(view.scene); view.camera.perspective(60, webGPUContext.aspect, 1, 5000.0); view.camera.object3D.z = -15; - view.camera.object3D.addComponent(HoverCameraController).setCamera(35, -20, 200); + view.camera.object3D.addComponent(HoverCameraController).setCamera(0, -20, 500); - Engine3D.startRenderView(view); - - await this.createScene(view.scene); - sky.relativeTransform = this.lightObj.transform; - } - - async createScene(scene: Scene3D) { - let lightObj3D = this.lightObj = new Object3D(); + let lightObj3D = new Object3D(); let sunLight = lightObj3D.addComponent(DirectLight); sunLight.intensity = 3; sunLight.lightColor = KelvinUtil.color_temperature_to_rgb(6553); @@ -29,35 +22,167 @@ class Sample_ExtrudeGeometry { lightObj3D.rotationX = 53.2; lightObj3D.rotationY = 220; lightObj3D.rotationZ = 5.58; - scene.addChild(lightObj3D); + view.scene.addChild(lightObj3D); + sky.relativeTransform = lightObj3D.transform; + + view.scene.addChild(new GridObject(1000, 100)) + + Engine3D.startRenderView(view); + + this.createShapes(); + } + + async createShapes() { + + // california + { + let points:Vector2[] = [] + points.push( new Vector2( 610, 320 ) ); + points.push( new Vector2( 450, 300 ) ); + points.push( new Vector2( 392, 392 ) ); + points.push( new Vector2( 266, 438 ) ); + points.push( new Vector2( 190, 570 ) ); + points.push( new Vector2( 190, 600 ) ); + points.push( new Vector2( 160, 620 ) ); + points.push( new Vector2( 160, 650 ) ); + points.push( new Vector2( 180, 640 ) ); + points.push( new Vector2( 165, 680 ) ); + points.push( new Vector2( 150, 670 ) ); + points.push( new Vector2( 90, 737 ) ); + points.push( new Vector2( 80, 795 ) ); + points.push( new Vector2( 50, 835 ) ); + points.push( new Vector2( 64, 870 ) ); + points.push( new Vector2( 60, 945 ) ); + points.push( new Vector2( 300, 945 ) ); + points.push( new Vector2( 300, 743 ) ); + points.push( new Vector2( 600, 473 ) ); + points.push( new Vector2( 626, 425 ) ); + points.push( new Vector2( 600, 370 ) ); + points.push( new Vector2( 610, 320 ) ); + + let shape = new Shape2D(points.map(p=>p.multiplyScaler(0.25))) + this.addShape(shape, -300, -60, 0) + } - scene.addChild(new GridObject(1000, 100)) + // triangle { let shape = new Shape2D(); - shape.moveTo(0, 20); - shape.bezierCurveTo(0, 10, -18, 0, -25, 0); - shape.bezierCurveTo(-55, 0, -55, 35, -55, 35); - shape.bezierCurveTo(-55, 55, -35, 77, 0, 95); - shape.bezierCurveTo(35, 77, 55, 55, 55, 35); - shape.bezierCurveTo(55, 35, 55, 0, 25, 0); - shape.bezierCurveTo(18, 0, 0, 10, 0, 20); - - let obj = new Object3D(); - let mr = obj.addComponent(MeshRenderer); - mr.geometry = new ExtrudeGeometry([shape], { - depth: 10, - bevelEnabled: false, - steps: 1 - }); - let mats = []; - let mat = new LitMaterial(); + shape.moveTo(80, 20); + shape.lineTo(40, 80); + shape.lineTo(120, 80); + shape.lineTo(80, 20); + + this.addShape(shape, -180, 0, 0) + } + + // heart + { + const x = 0, y = 0; + const shape = new Shape2D() + .moveTo( x + 25, y + 25 ) + .bezierCurveTo( x + 25, y + 25, x + 20, y, x, y ) + .bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 ) + .bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 ) + .bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 ) + .bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y ) + .bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 ); + + + this.addShape(shape, 0, 20, 0) + } + + // square + { + const sqLength = 80; + const squareShape = new Shape2D() + .moveTo( 0, 0 ) + .lineTo( 0, sqLength ) + .lineTo( sqLength, sqLength ) + .lineTo( sqLength, 0 ) + .lineTo( 0, 0 ); + + this.addShape(squareShape, 100, 20, 0) + } + + // Circle + { + const circleRadius = 40; + const circleShape = new Shape2D() + .moveTo( 0, circleRadius ) + .quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 ) + .quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius ) + .quadraticCurveTo( - circleRadius, - circleRadius, - circleRadius, 0 ) + .quadraticCurveTo( - circleRadius, circleRadius, 0, circleRadius ); + + this.addShape(circleShape, 140, 150, 0) + } + + // Fish + { + const x = 0, y =0; + const fishShape = new Shape2D() + .moveTo( x, y ) + .quadraticCurveTo( x + 50, y - 80, x + 90, y - 10 ) + .quadraticCurveTo( x + 100, y - 10, x + 115, y - 40 ) + .quadraticCurveTo( x + 115, y, x + 115, y + 40 ) + .quadraticCurveTo( x + 100, y + 10, x + 90, y + 10 ) + .quadraticCurveTo( x + 50, y + 80, x, y ); + + this.addShape(fishShape, -40, 160, 0) + } + + // holes + { + const sqLength = 80; + const squareShape = new Shape2D() + .moveTo( 0, 0 ) + .lineTo( 0, sqLength ) + .lineTo( sqLength, sqLength ) + .lineTo( sqLength, 0 ) + .lineTo( 0, 0 ); + + let hole1 = new Path2D() + .moveTo( 10, 10 ) + .lineTo( 10, 30 ) + .lineTo( 30, 30 ) + .lineTo( 30, 10 ) + .lineTo( 10, 10 ); + + let hole2 = new Path2D() + .moveTo( 40, 10 ) + .lineTo( 40, 30 ) + .lineTo( 60, 30 ) + .lineTo( 60, 10 ) + .lineTo( 40, 10 ); + + squareShape.holes.push(hole1, hole2); + + this.addShape(squareShape, -150, 100, 0) + } + + } + + matrial: LitMaterial; + addShape(shape: Shape2D, x:number = 0, y:number = 0, z:number = 0){ + let obj = new Object3D(); + obj.localPosition = new Vector3(x, y, z) + let mr = obj.addComponent(MeshRenderer); + mr.geometry = new ExtrudeGeometry([shape], { + depth: 10, + bevelEnabled: false, + steps: 1 + }); + if(!this.matrial){ + let mat = this.matrial = new LitMaterial(); mat.baseColor = new Color(0.2, 0.5, 1.0); - for (let i = 0; i < mr.geometry.subGeometries.length; i++) { - mats.push(mat); - } - mr.materials = mats; - scene.addChild(obj); + mat.castShadow = false; + } + let mats = []; + for (let i = 0; i < mr.geometry.subGeometries.length; i++) { + mats.push(this.matrial); } + mr.materials = mats; + this.scene.addChild(obj); } } diff --git a/src/util/GridObject.ts b/src/util/GridObject.ts index 43f89f9d..4e720e81 100644 --- a/src/util/GridObject.ts +++ b/src/util/GridObject.ts @@ -91,7 +91,6 @@ export class GridObject extends Object3D { let mr = z.addComponent(MeshRenderer); mr.geometry = line; let mat = mr.material = new UnLitMaterial(); - console.log(mat) mat.baseColor = new Color(0, 1, 0, 0.5); mat.blendMode = BlendMode.ADD; mat.castReflection = false;