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

相关推荐
左耳咚2 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu2 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After2 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
用户47949283569154 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在4 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好14 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
明仔的阳光午后6 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人7 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
San307 小时前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze7 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js