巴比伦js_巴比伦js中的运动建模

巴比伦js

灵感来源 (The Inspiration)

The idea seems intuitive. We all have seen the lights leaving beautiful trajectories, and we want to record the transient moment so we can keep it. Picasso famously made some light paintings, which were documented in 1949.

这个想法似乎很直观。 我们所有人都已经看到了灯光留下的优美轨迹，并且我们想要记录瞬态力矩以便保持它。 毕加索著名的一些光绘作品是在1949年记录的。

Pablo Picasso's Light Painting

巴勃罗·毕加索的油画

演示地址

The idea of modeling with a moving point is exactly how a 3D printer functions.

用移动点建模的想法正是3D打印机的功能。

3D printed concrete outdoor furniture (designboom.com)

3D打印混凝土户外家具(designboom.com)

commissioned by interior designer kara mann, philipp aduatz has created a large collection of custom-made 3D printed concrete furniture pieces for a private client in chicago. for this project, philipp aduatz has cooperated with austrian start-up incremental3d, which produced his ‘digital chaiselongue’ for milan design week in 2018.

由室内设计师kara mann委托的 philipp aduatz 已创建了大量定制 3D打印的 集合 芝加哥私人客户的 混凝土 家具。 在这个项目中，菲利普·阿杜阿兹(philipp aduatz)与奥地利初创公司增量3d合作，为2018年米兰设计周制作了他的``数字贵妃椅''。

Let’s do it in Babylon.js.

让我们在Babylon.js中进行操作。

在Babylon.js中实现 (Implementation in Babylon.js)

With a curve moving in space, we can create a 3D model at each frame to record its shape. Specifically,

随着曲线在空间中移动，我们可以在每个帧上创建一个3D模型以记录其形状。 特别，

• Create a curve to pass 5 animated points
  创建一条曲线以传递5个动画点
• Create a 3D shape (tube) around the curve, and keep track of the tubes for a number of frames
  在曲线周围创建3D形状(管)，并跟踪许多帧的管

The majority of the code is in the class of Danse2. _tubes is an array to store the 3D shapes.

大部分代码在Danse2类中。 _tubes是用于存储3D形状的数组。

import * as BABYLON from 'babylonjs'


export default class Danse2 {
    private _scene: BABYLON.Scene


    // _t: timer for the accumulated time
    private _t: number


    private _tubes: BABYLON.Mesh[]
    private _current: number = 0
    private _n: number = 20
    private _c: BABYLON.Color3 = BABYLON.Color3.Random()


    constructor(scene: BABYLON.Scene) {
        this._scene = scene
        this._t = 0


        this._tubes = []
        for(let i=0;i<this._n;i++) {
            this.make_tube(this._t, false)
        }
        //console.log(this._ribs)
    }


    curve_points(t: number): BABYLON.Vector3[] {
        // create 5 points for Catmull Rom curve
        // each point rotate at different speed
        // the shape of the curve is determined by t
        const r1 = 1.0 * Math.cos(t)
        const r2 = 0.5
        const r3 = 1.2 * Math.sin(t) - 0.6
        const r4 = 0.5
        const r5 = 0.8 * Math.cos(t) -0.4


        let a1 = t * 0.5
        let a2 = t * 2.0
        let a3 = t * 1.5
        let a4 = t * 2.5
        let a5 = t * 0.5


        let p1 = new BABYLON.Vector3(r1*Math.cos(a1),0.5+0.5*Math.cos(t)-0.25,r1*Math.sin(a1))
        let p2 = new BABYLON.Vector3(r2*Math.cos(a2),1.0,r2*Math.sin(a2))
        let p3 = new BABYLON.Vector3(r3*Math.cos(a3),1.8,r3*Math.sin(a3))
        let p4 = new BABYLON.Vector3(r4*Math.cos(a4),2.5,r4*Math.sin(a4))
        let p5 = new BABYLON.Vector3(r5*Math.cos(a5),2.8+0.5*Math.cos(t)-0.25,r5*Math.sin(a5))


        let pts: BABYLON.Vector3[] = [p1,p2,p3,p4,p5]
        return pts
    }


    update(dt: number) {
        // update according to dt: time delta, i.e., the time has passed
        this._t += dt * 0.002


        this.make_tube(this._t, true)
    }


    make_tube(t: number, update: boolean) {
        let cat = BABYLON.Curve3.CreateCatmullRomSpline(
                        this.curve_points(t),10,false)


        if(update) {
            this._tubes[this._current] = BABYLON.MeshBuilder.CreateTube("mesh",
            {path:cat.getPoints(),radius:0.01,
            instance:this._tubes[this._current % this._n]})
        } else {
            this._tubes[this._current] = BABYLON.MeshBuilder.CreateTube("mesh",
            {path:cat.getPoints(), radius:0.01, updatable:true}, this._scene)


            let m = new BABYLON.StandardMaterial("mat", this._scene)
            m.diffuseColor = this._c
            this._tubes[this._current].material = m
        }


        this._current += 1
    }


}

The class contains the scene and calls Dense2.ts is as follows.

该类包含场景，并调用Dense2.ts如下。

import * as BABYLON from 'babylonjs';
import Danse2 from './Danse2'


export default class MyScene {
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.ArcRotateCamera;
    private _light: BABYLON.Light;


    private _danse: Danse2


    constructor(canvasElement : string) {
        // Create canvas and engine.
        this._canvas = document.getElementById(canvasElement) as HTMLCanvasElement;
        this._engine = new BABYLON.Engine(this._canvas, true);
    }


    createScene() : void {
        this._scene = new BABYLON.Scene(this._engine);
        this._scene.clearColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Random())


        this._camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 1, -0), this._scene);
        this._camera.setPosition(new BABYLON.Vector3(0, 0, -6));
        this._camera.attachControl(this._canvas, true);


        // Create a basic light, aiming 0,1,0 - meaning, to the sky.
        this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);


        this._danse = new Danse2(this._scene)
    }


    doRender() : void {
        // Run the render loop.
        this._engine.runRenderLoop(() => {
            this._scene.render();
            let dt = this._engine.getDeltaTime()
            this._danse.update(dt)
        });


        // The canvas/window resize event handler.
        window.addEventListener('resize', () => {
            this._engine.resize();
        });
    }
}

The result looks like this. The color for the tubes and the background are random, so you can have some different looks each time you run the code.

结果看起来像这样。 试管的颜色和背景是随机的，因此每次运行代码时，您可以拥有一些不同的外观。

演示地址

A complete project is on Github.

一个完整的项目在Github上。

Here is an explanation to set up a TypeScript project in Babylon.js, which may be helpful if you want to follow allow.

这是在Babylon.js中设置TypeScript项目的说明，如果您要遵循allow可能会有所帮助。

Please comment and let me know what you think. Cheers.

请发表评论，让我知道您的想法。 干杯。

翻译自: https://medium.com/@reddotblues/modeling-with-motion-in-babylon-js-25d0df72a767

巴比伦js