babylonjs基于自定义网格生成围栏动画

效果:

javascript 复制代码
import { Vector3, Mesh, MeshBuilder, StandardMaterial, Texture, Animation, Color3 } from "@babylonjs/core";
import imgUrl from "./image/headerwangge2.png"
// 创建模型护栏特效
export default class CreateRail {
    constructor(scene,) {
        this.scene = scene;
    };
    create() {
        let _position = [{x:1,y:1,z:1},{x:2,y:2,z:2}]
        if (_position.length <= 0) {
            return;
        }
        var mat = new StandardMaterial("mat", this.scene);
        mat.diffuseTexture = new Texture(imgUrl, this.scene);
        mat.diffuseTexture.vScale = 5;
        mat.diffuseTexture.hasAlpha = true;
        mat.backFaceCulling = false;
        mat.emissiveColor = Color3.White()
        const path = []
        for (let index = 0; index < _position.length - 1; index += 1) {
            path.push(new Vector3(_position[index].x, _position[index].y, _position[index].z));
            path.push(new Vector3(_position[index + 1].x, _position[index + 1].y, _position[index + 1].z));
        }
        let polygon = MeshBuilder.CreatePolygon("polygon", { shape: path, holes: [path], depth: 10, sideOrientation: Mesh.DOUBLESIDE }, this.scene);
        polygon.position.y = 10
        polygon.material = mat;
        Animation.CreateAndStartAnimation("ani", mat, "diffuseTexture.vOffset", 30, 20,
            1, 0, 1, undefined, undefined, this.scene);

    };

}

贴图 headerwangge2

相关推荐
minglie8 小时前
一个置换问题
javascript
默_笙8 小时前
🌀 别再手动写 Prompt 了!我让 AI 自己循环改到满意为止
javascript
To_OC20 小时前
LC 994 腐烂的橘子:人人都说是 BFS 入门题,我却写了三遍才过
javascript·算法·leetcode
To_OC1 天前
LC 200 岛屿数量:经典 DFS 入门题,我第一次写居然连方向都搞错了
javascript·算法·leetcode
labixiong1 天前
实现一个能跑的迷你版Promise(一)
前端·javascript·面试
weedsfly1 天前
还在用 Axios?你可能需要重新理解 XHR 与 Fetch
前端·javascript·面试
CoderWeen1 天前
从零实现一个 Vue3 流程图编辑器:节点拖拽、贝塞尔连线与框选
前端·javascript
To_OC2 天前
LC 128 最长连续序列:别上来就排序,O (n) 解法才是这题的灵魂
javascript·算法·leetcode
kyriewen2 天前
我用 50 行代码重写了 React Router 核心,终于搞懂了前端路由原理
前端·javascript·react.js
Asize2 天前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas