BABYLON模型上添加一个光圈_babylonjs 管道上画一个圈-优快云博客

本文链接：https://blog.youkuaiyun.com/wzwzwz555/article/details/143933346
在加载的模型上面放着一块光圈来回滚动
<!--
 * @Description: 优化后的代码
 * @Author: wz
 * @Date: 2024-11-12 10:25:03
 * @LastEditors: wz
 * @LastEditTime: 2024-11-21 09:55:00
 * @FilePath: /babylon/ziji/unit1.html
 * 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <script>
        // 尝试初始化引擎和场景
        try {
            const canvas = document.createElement('canvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            document.body.appendChild(canvas);

            // 创建Babylon.js引擎和场景
            const engine = new BABYLON.Engine(canvas, true);
            const scene = new BABYLON.Scene(engine);

            // 配置相机
            const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / -2, Math.PI / -1, 300, new BABYLON.Vector3(1, 1, 20), scene);
            camera.wheelPrecision = 1.8;
            camera.upperBetaLimit = (Math.PI / 2) * 0.9;
            camera.attachControl(canvas, true);
            
            // 创建灯光
            const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(30, 100, 100), scene);
            light.intensity = 1.5;


            // 创建一个天空盒
const skyboxMaterial = new BABYLON.StandardMaterial("skybox", scene);
skyboxMaterial.backFaceCulling = false; // 背面剔除设置为false，确保从内侧也可见

// 创建立方体纹理，使用六个文件路径
const skyboxTexture = new BABYLON.CubeTexture.CreateFromImages([
    "bg/bg/skybox_px.jpg", // 正向X
    "bg/bg/skybox_nx.jpg", // 反向X
    "bg/bg/skybox_py.jpg", // 正向Y
    "bg/bg/skybox_ny.jpg", // 反向Y
    "bg/bg/skybox_pz.jpg", // 正向Z
    "bg/bg/skybox_nz.jpg"  // 反向Z
], scene);

// 将纹理应用到天空盒的材质
skyboxMaterial.reflectionTexture = skyboxTexture;
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

// 创建一个大立方体并将材质应用给它
const skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 5000 }, scene); // サイズ可以根据需要调整
skybox.material = skyboxMaterial;
skybox.infiniteDistance = true; // 使立方体无限远，以保证相机在其中移动时不会影响视图


            // 加载3D模型
            BABYLON.SceneLoader.Append("./3dmodel/", "78512.obj", scene, function (newScene) {
                newScene.meshes.forEach(mesh => {
                    mesh.isPickable = true;
                    mesh.position.y = 0;
                    mesh.scaling = new BABYLON.Vector3(2, 2, 2);

                    // 创建材质
                    const material = new BABYLON.StandardMaterial("material", scene);
                    material.diffuseTexture = new BABYLON.Texture("./bg1.jpg", scene);
                    mesh.material = material;

                    

                    // 添加粗点环
                    const ringMaterial = new BABYLON.StandardMaterial("ringMaterial", scene);
                    ringMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.8, 1,0.5); // 红色
                    const ring = BABYLON.MeshBuilder.CreateDisc("ring", { radius: 10, sideOrientation: 5, tessellation: 64 }, scene);
                    // const ring = BABYLON.MeshBuilder.CreateDisc("ring", { radius: 10, tessellation: 64, sideOrientation: 64}, scene); // 创建高度为10的粗点环
                    ring.material = ringMaterial;
                    ring.position.y = 1; // 将环抬高以放置在模型表面
                    // ring.position.x = -50; // 将环抬高以放置在模型表面
                    // ring.position.x = 80; // 将环抬高以放置在模型表面
                    ring.parent = mesh; // 将环设置为模型的子对象 
                    ring.rotation.x = 0;  // 圆环的角度
                    ring.rotation.y = Math.PI / 2;  // 圆环的角度
                    ring.rotation.z = 0;  // 圆环的角度

                    let direction = 1; // 1表示向右移动，-1表示向左移动
                    scene.registerBeforeRender(() => {
                        ring.position.x += 0.5 * direction; // 每帧移动0.5单位
                        if (ring.position.x >= 80) {
                            direction = -1; // 到达右边界后反向
                        } else if (ring.position.x <= -60) {
                            direction = 1; // 到达左边界后反向
                        }
                        // mesh.rotation.z += 0.005; // 模型旋转
                        // ring.rotation.y += 0.005; // 模型旋转
                    });
                    // 注册点击动作
                    mesh.actionManager = new BABYLON.ActionManager(scene);
                    mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, (evt) => {
                        console.log("点击了网格:", evt);
                    }));
                });
            }, null, (error) => {
                console.error("加载错误:", error);
            });

            // 添加点击事件监听器
            canvas.addEventListener("click", (evt) => {
                const pickInfo = scene.pick(scene.pointerX, scene.pointerY, mesh => mesh.isPickable);
                if (pickInfo.hit) {
                    console.log("点击了模型：", pickInfo.pickedMesh);
                    console.log("点击位置坐标:", pickInfo.pickedPoint);
                }
            });

            // 启动渲染循环
            engine.runRenderLoop(() => {
                scene.render();
            });

            // 处理窗口调整大小事件
            window.addEventListener('resize', () => {
                engine.resize();
            });
        } catch (error) {
            console.error('引擎初始化失败:', error);
        }
    </script>
</body>

</html>
如图
在这里插入图片描述