Skip to content

ConduitGeometry


WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

ts
import { BitmapTexture2D, Color, Engine3D, ExtrudeGeometry, GeometryBase, LitMaterial, MeshRenderer, SphereGeometry, Vector3, AtmosphericComponent, CameraUtil, DirectLight, HoverCameraController, KelvinUtil, Object3D, Scene3D, View3D } from '@orillusion/core'
import dat from 'dat.gui'
import { Stats } from '@orillusion/stats'

// An sample to use ExtrudeGeometry
class Sample_ConduitGeometry {
    scene: Scene3D
    material: LitMaterial
    object3Ds: Object3D[] = []
    isClosedConduit: boolean = true
    shapeRadius = 1
    modelRadius = 4
    private geo: GeometryBase
    private mats: LitMaterial[]

    async run() {
        await Engine3D.init()

        // init Scene3D
        this.scene = new Scene3D()
        this.scene.exposure = 1
        this.scene.addComponent(Stats)

        // init sky
        let atmosphericSky: AtmosphericComponent
        atmosphericSky = this.scene.addComponent(AtmosphericComponent)

        // init Camera3D
        let camera = CameraUtil.createCamera3DObject(this.scene)
        camera.perspective(60, Engine3D.aspect, 1, 5000)

        // init Camera Controller
        let hoverCtrl = camera.object3D.addComponent(HoverCameraController)
        hoverCtrl.setCamera(-30, -15, 50)

        // init View3D
        let view = new View3D()
        view.scene = this.scene
        view.camera = camera

        // create direction light
        let lightObj3D = new Object3D()
        lightObj3D.x = 0
        lightObj3D.y = 30
        lightObj3D.z = -40
        lightObj3D.rotationX = 20
        lightObj3D.rotationY = 160
        lightObj3D.rotationZ = 0

        let light = lightObj3D.addComponent(DirectLight)
        light.lightColor = KelvinUtil.color_temperature_to_rgb(5355)
        light.castShadow = true
        light.intensity = 30

        this.scene.addChild(light.object3D)

        // relative light to sky
        atmosphericSky.relativeTransform = light.transform

        Engine3D.startRenderView(view)

        await this.createMaterial()

        let gui = new dat.GUI()
        gui.add(this, 'isClosedConduit').onChange(() => {
            if (this.object3Ds.length) {
                for (let item of this.object3Ds) {
                    item.removeSelf()
                }
            }
            this.object3Ds.length = 0
            this.createConduit()
        })
        this.createConduit()
    }

    async createMaterial() {
        this.material = new LitMaterial()
        let texture = new BitmapTexture2D()
        texture.addressModeU = 'repeat'
        texture.addressModeV = 'repeat'
        await texture.load('https://cdn.orillusion.com/textures/grid.webp')
        this.material.baseMap = texture
    }

    private createConduit() {
        let shape = this.getShape()
        let curve = this.getCurve()
        let conduitObject3D = new Object3D()
        this.scene.addChild(conduitObject3D)

        let renderer = conduitObject3D.addComponent(MeshRenderer)
        renderer.material = this.material
        let geometry = (renderer.geometry = new ExtrudeGeometry().build(shape, this.isClosedConduit, curve, 0.2))

        this.object3Ds.push(conduitObject3D)
        //show vertex point
        for (const item of geometry.sections) {
            for (let i = 0, count = item.rotateShape.length; i < count; i++) {
                let ball = this.showPoint(item.rotateShape[i].add(item.center), i)
                this.object3Ds.push(ball)
            }
        }
    }

    private getShape(): Vector3[] {
        let vertexList: Vector3[] = [] //circle
        let radius = this.shapeRadius
        const vertexCount = 8
        for (let i = 0; i < vertexCount; i++) {
            let angle = (Math.PI * 2 * i) / vertexCount
            let point = new Vector3(Math.sin(angle), 0, Math.cos(angle)).multiplyScalar(radius)
            vertexList.push(point)
        }
        return vertexList
    }

    private getCurve(): Vector3[] {
        let vertexList: Vector3[] = []
        let radius = this.modelRadius
        const sectionCount = 60
        for (let i = 0; i < sectionCount; i++) {
            let angle = (Math.PI * 2 * i) / 20
            radius += (0.1 * i) / sectionCount
            let offsetY = 0.6 - Math.sqrt(i / sectionCount)
            let point = new Vector3(Math.sin(angle), offsetY * 6, Math.cos(angle)).multiplyScalar(radius)
            vertexList.push(point)
        }
        return vertexList
    }

    private showPoint(p: Vector3, index: number): Object3D {
        this.geo ||= new SphereGeometry(0.3, 10, 10)
        if (!this.mats) {
            this.mats = []
            for (let i = 0; i < 40; i++) {
                let mat = new LitMaterial()
                mat.baseColor = Color.random()
                this.mats.push(mat)
            }
        }

        let obj = new Object3D()
        this.scene.addChild(obj)
        let m = obj.addComponent(MeshRenderer)
        m.material = this.mats[index]
        m.geometry = this.geo

        obj.localPosition = p

        return obj
    }
}

new Sample_ConduitGeometry().run()