弹簧系统三维可视化

弹簧系统三维可视化

• games 101 最后一次作业，弹簧系统三维可视化
• 主要使用显式 Verlet 方法，并加入阻尼，下面展示可视化图

实现历程

实现弹簧系统可视化需要经历模拟和渲染，模拟和渲染实际上是两个不同步骤。

• 模拟：输入物体质量和位置以及收到的力，输出该物体下一时刻的位置
• 渲染：根据物理质量，坐标，外观实时展示物体当前状态

模拟使用到显式 Verlet，根据加速度、前一刻坐标和当前坐标计算下一时刻的位置，数学公式为

\[\begin{equation}x_{t+dt} = x(t) + [x(t)-x(t-dt)] + a(t) \times dt \times dt\end{equation}\]

如果不存在阻力，任何小球将一直运行下去，因此需要向其中添加阻尼，加入后公式为

\[\begin{equation}x_{t+dt} = x(t) + (1 - dampingFactor) \times [x(t)-x(t-dt)] + a(t) \times dt \times dt\end{equation}\]

为了验证加入阻尼的 Verlet 公式，使用两个小球进行验证

从图中可看出，小球受重力的影响，具有向下的加速度，又因为弹力的作用，会有弹簧拉力将其拉回。

• 模拟：求出合并后的加速度，应用 Verlet 公式，求出小球下一刻的坐标
• 渲染：通过 Threejs 渲染两个小球和弹簧

小球运动的加速度由牛顿第二定律所得

\[F=ma\]

因此小球运动速度与自身质量息息相关，若将小球质量增加，弹簧将被拉得更长

将一个弹簧系统完成后，即可开发更多小球和弹簧的模拟仿真。

代码设计

程序主要分为两个部分，一个部分为模拟和渲染，另一部分为类设计。程序设计到三个类（class）：整个弹簧系统（Rope）、小球（Mass）和弹簧（Spring）。详情如下所示：

弹簧（Spring）类

class Spring {    // 弹簧长度    length;    // 弹簧系数    k=1;    // 弹簧相邻小球集合    points;    // 渲染的线对象    line;    constructor(length=2,k=1, points) {        this.length = length;        this.k = k;        this.line=new THREE.Line(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({color: 0xf0f000}))        this.points = points;        this.updateLine();    }    // 更新弹簧位置    updateLine(){        this.line.geometry.setFromPoints(this.points);    }}

弹簧类中属性的作用

• length 和 k 用来计算弹簧产生的力，该力为一个向量
• points 和 line 用来进行渲染，将弹簧通过 three 展示在屏幕上

小球（Mass）类

class Mass{    // 质量    mass=1;    // 前一时刻的坐标    positionPre;    // 当前时刻的坐标    positionCurr;    // 下一时刻的坐标    positionFuture;    // 渲染的小球对象    object=new THREE.Mesh(new THREE.SphereBufferGeometry(0.5), new THREE.MeshNormalMaterial());    constructor(mass, position) {        this.mass = mass;        this.positionPre = position;        this.positionCurr = position;        this.object.position.set(position.x, position.y, position.z);    }    // 根据阻尼系数，时间 delta 和加速度 a 计算下一时刻的坐标    setPosition(dampingFactor, delta, a){        let {positionPre, positionCurr, positionFuture, object}=this        positionFuture = positionCurr.clone().add(positionCurr.clone().sub(positionPre).multiplyScalar(1-dampingFactor))                .add(a.multiplyScalar(delta^2));        object.position.set(positionFuture.x, positionFuture.y, positionFuture.z)        this.positionPre = positionCurr;        this.positionCurr = positionFuture;    }}

小球类中属性的作用

• mass 质量，计算加速度所需条件
• positionPre、positionCurr、positionFuture 不同时刻的坐标
• object 渲染出的小球对象
• setPosition 复现 Verlet 公式

最复杂的弹簧系统类

class Rope{    // 节点数目    num_nodes=0;    // 包含的小球集合    massArray=[];    // 包含的弹簧集合    springArray=[];    constructor(num_nodes) {        this.num_nodes = num_nodes;        this.initRope(num_nodes);    }    // 根据节点数初始化弹簧    initRope(num){        if(num<2){            alert("节点数量不够");        }        const {massArray, springArray} = this;        for (let i = 0; i < num; i++) {            const position = new THREE.Vector3(i*3, 1, 0);            massArray[i] = new Mass(500, position);        }        for (let i = 0; i < num - 1; i++) {            springArray[i] = new Spring(2, 1,[massArray[i].object.position, massArray[i+1].object.position]);        }    }    // 将所有加入虚拟场景中    addMesh(scene){        for (let i = 0; i < this.num_nodes; i++) {            scene.add(this.massArray[i].object);        }        for (let i = 0; i < this.num_nodes-1; i++) {            scene.add(this.springArray[i].line);        }    }    // 首先通过模拟计算弹簧系统各个成分的坐标，然后通过各个类的更新方法更新坐标    updateRope(delta){        let i=0;        for (i = 1; i < this.num_nodes-1; i++) {            const sphere = this.massArray[i];            const positionPre = this.massArray[i-1].object.position;            const positionCurr = this.massArray[i].object.position;            const positionFuture = this.massArray[i+1].object.position;            // 计算弹力            const vector1 = positionCurr.clone().sub(positionPre);            const springForce1 = vector1.clone().normalize().multiplyScalar(vector1.clone().length()-2).multiplyScalar(-1);            const vector2 = positionFuture.clone().sub(positionCurr);            const springForce2 = vector2.clone().normalize().multiplyScalar(vector2.clone().length()-2).multiplyScalar(-1*(-1));            // 计算重力            const gravity = new THREE.Vector3(0, -1, 0);            // 计算合力            const resultForce = springForce1.clone().add(gravity).add(springForce2);            const a = resultForce.multiplyScalar(1/sphere.mass);            const dampingFactor = 0.005;            sphere.setPosition(dampingFactor, delta, a);        }        for (let i = 0; i < this.num_nodes-1; i++) {            this.springArray[i].updateLine();        }    }}

Rope 类代码量比较多，但实际上仅做了初始化和更新两个操作

1. 初始化物体时，创建对应数目的弹簧和小球
2. 通过 addMesh 方法将小球和弹簧加入虚拟三维场景中
3. 通过 updateRope 方法更新小球和弹簧的位置
   1. 首先计算一个小球相邻弹簧带给其的弹力
   2. 再计算小球的重力
   3. 将小球的两个弹力和重力加起来，注意是向量相加
   4. 通过牛顿第二定律求出小球的加速度 a
   5. 更新小球坐标
   6. 根据小球坐标更新弹簧坐标

渲染结果

import * as THREE from "/lib/three/build/three.module.js"import {OrbitControls} from "/lib/three/examples/jsm/controls/OrbitControls.js"import {DragControls} from "/lib/three/examples/jsm/controls/DragControls.js"import {Rope} from "./springSystemClass.js";// 创建 Canvas 元素const canvas = document.createElement("canvas");const width = canvas.width = 800;const height = canvas.height = 500;document.body.appendChild(canvas);const clock = new THREE.Clock();// init variableconst scene = new THREE.Scene();const camera= new THREE.PerspectiveCamera(45, width/height);const renderer = new THREE.WebGLRenderer({antialias: true, canvas, alpha: 1});renderer.setSize(width, height);// scene.add(new THREE.AxesHelper(10));camera.position.set(10, 10, 10);camera.lookAt(0, 0, 0);const orbitControl = new OrbitControls(camera, canvas);// 创建弹簧系统const rope = new Rope(5);rope.addMesh(scene);let enableSelection = false;const objects = rope.massArray.map(value => value.object);const dragControls = new DragControls(objects, camera, canvas);// 设置拖动事件dragControls.addEventListener( 'dragstart', function ( event ) {    orbitControl.enabled = false;    enableSelection = true;    console.log(event)} );dragControls.addEventListener( 'dragend', function ( event ) {    orbitControl.enabled = true;    enableSelection = false;    console.log(event)} );animation();function animation(){    renderer.render(scene, camera);    const delta = clock.getDelta();    if(!enableSelection) rope.updateRope(delta);    requestAnimationFrame(animation)}

该代码是比较常见的 Threejs 渲染代码

其中需要注意的是

• 通过创建 Rope 的实例动态创建弹簧系统
• 通过 dragControls 控制小球
• 使用 animation 方法重复渲染页面

代码仓库

作业8 · XiaXiang/web games101 - 码云 - 开源中国 (gitee.com)

该仓库还有利用 WebGL 实现 Games101 其它作业的代码，由于实验使用，很多代码没有经过美化，望理解