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

相关推荐
記億揺晃着的那天1 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
GISer_Jing2 小时前
ByteDance——jy真题
前端·javascript·面试
真的想不出名儿2 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
阳光阴郁大boy2 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
sorryhc3 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy3 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq3 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开3 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
技术钱5 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript
DoraBigHead6 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试