ConduitGeometry2

---

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

import { ComponentBase, DirectLight, Vector4, Time, Material, AtmosphericComponent, AttributeAnimCurve, BitmapTexture2D, BlendMode, CameraUtil, Color, Engine3D, ExtrudeGeometry, HoverCameraController, LitMaterial, MeshRenderer, Object3D, Object3DUtil, PropertyAnimClip, PropertyAnimation, Scene3D, Vector3, View3D, KelvinUtil, WrapMode, BloomPost } from '@orillusion/core';
import { Stats } from '@orillusion/stats';

// An sample to use ExtrudeGeometry and make uv move animation
class Sample_ConduitGeometry2 {
    scene: Scene3D;
    material: LitMaterial;
    animClip: PropertyAnimClip;
    curveX: AttributeAnimCurve;
    curveY: AttributeAnimCurve;
    curveZ: AttributeAnimCurve;
    totalTime: number;

    async run() {
        Engine3D.setting.shadow.shadowBound = 50;
        Engine3D.setting.shadow.shadowSize = 1024;
        Engine3D.setting.shadow.shadowBias = 0.01;

        await Engine3D.init();
        // init Scene3D
        this.scene = new Scene3D();
        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, 60);

        // 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 = 2;

        this.scene.addChild(light.object3D);

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

        Engine3D.startRenderView(view);

        await this.createMaterial();
        await this.loadCurveData();

        this.bindCurveAnimation();
        this.createConduit();
        this.createFloor();
    }

    createFloor() {
        let object3D = Object3DUtil.GetSingleCube(200, 1, 200, 1, 1, 1);
        object3D.y = -2;
        this.scene.addChild(object3D);
    }

    bindCurveAnimation(): void {
        let obj = Object3DUtil.GetSingleSphere(0.2, 0.8, 0.4, 0.2);
        obj.scaleX = 1.5;
        let holder = new Object3D();
        this.scene.addChild(holder);
        holder.scaleX = holder.scaleY = holder.scaleZ = 5;
        holder.addChild(obj);
        let animation = obj.addComponent(PropertyAnimation);
        animation.autoPlay = true;
        animation.defaultClip = this.animClip.name;
        animation.speed = 0.5;
        animation.appendClip(this.animClip);
    }
    async loadCurveData() {
        // load external curve data
        let json: any = await Engine3D.res.loadJSON('https://cdn.orillusion.com/json/anim_0.json');
        this.animClip = new PropertyAnimClip();
        this.animClip.parse(json);
        this.animClip.wrapMode = WrapMode.Loop;
        let curve = this.animClip['objAnimClip']['']['curve'];
        this.curveX = curve['m_LocalPosition.x'];
        this.curveY = curve['m_LocalPosition.y'];
        this.curveZ = curve['m_LocalPosition.z'];
        this.totalTime = this.animClip.totalTime;
    }

    async createMaterial() {
        this.material = new LitMaterial();
        this.material.depthCompare = 'always';
        this.material.blendMode = BlendMode.ADD;
        this.material.baseColor = new Color(0, 1, 0.5, 1.0);
        this.material.transparent = true;

        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;
        renderer.geometry = new ExtrudeGeometry().build(shape, true, curve, 0.2);

        let component = conduitObject3D.addComponent(UVMoveComponent);
        component.speed.set(0, -0.8, 0.5, 0.5);
    }

    private getShape(): Vector3[] {
        let vertexList: Vector3[] = []; //circle
        let radius = 1.2;
        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[] = [];
        for (let i = 0; i < this.totalTime; i += 0.05) {
            let point = new Vector3();
            point.x = this.curveX.getValue(i);
            point.y = this.curveY.getValue(i);
            point.z = -this.curveZ.getValue(i);
            point.multiplyScalar(5);
            vertexList.push(point);
        }
        return vertexList;
    }
}

class UVMoveComponent extends ComponentBase {
    private _material: Material;
    private readonly _speed: Vector4 = new Vector4(0.1, 0.1, 1, 1);

    public get speed(): Vector4 {
        return this._speed;
    }

    public set speed(value: Vector4) {
        this._speed.copyFrom(value);
    }

    start(): void {
        let mr = this.object3D.getComponent(MeshRenderer);
        if (mr) {
            this._material = mr.material;
        }
    }

    onUpdate(): void {
        if (this._material) {
            let value = this._material.getUniformV4(`baseMapOffsetSize`);
            value.x += Time.delta * this._speed.x * 0.001;
            value.y += Time.delta * this._speed.y * 0.001;
            value.z = this._speed.z;
            value.w = this._speed.w;
            this._material.setUniformVector4(`baseMapOffsetSize`, value);
        }
    }
}

new Sample_ConduitGeometry2().run();