three+cannon实现一个三维文字菜单点击重力推拉效果代码-html代码-BFW代码库

three+cannon实现一个三维文字菜单点击重力推拉效果代码

代码语言：html

所属分类：三维

代码描述：three+cannon实现一个三维文字菜单点击重力推拉效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua-1.5.5.css">

    <style>
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          margin: 0;
          background: #f7f7fd;
        }
        
        :root {
          --blue-color-1: #2c3e50;
        }
        
        .bg-blue-1 {
          background: var(--blue-color-1);
        }
    </style>




</head>

<body>
    <div class="relative w-screen h-screen">
        <nav class="menu fixed hv-center z-5 pointer-events-none">
            <ul class="menu-list text-center space-y-12 text-9xl opacity-0">
                <li class="menu-list-item"><a href="#">Home</a></li>
                <li class="menu-list-item"><a href="#">Archives</a></li>
                <li class="menu-list-item"><a href="#">About</a></li>
            </ul>
        </nav>
        <div class="stage w-full h-full bg-blue-1"></div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/cannon.js"></script>
    <script>
        const calcAspect = (el) => el.clientWidth / el.clientHeight;
        const getNormalizedMousePos = (e) => {
            return {
                x: (e.clientX / window.innerWidth) * 2 - 1,
                y: -(e.clientY / window.innerHeight) * 2 + 1
            };
        };
        // 创建文本
        const createText = (text = "", config, material = new THREE.MeshStandardMaterial({
            color: "#ffffff"
        })) => {
            const geo = new THREE.TextGeometry(text, config);
            const mesh = new THREE.Mesh(geo, material);
            return mesh;
        };
        // 加载字体
        const loadFont = (url) => {
            const loader = new THREE.FontLoader();
            return new Promise((resolve) => {
                loader.load(url, (font) => {
                    resolve(font);
                });
            });
        };
        const menuFontUrl = "//repo.bfw.wiki/bfwrepo/fonts/helvetiker_regular.typeface.json";
        const menuFontConfig = {
            size: 3,
            height: 0.4,
            curveSegments: 24,
            bevelEnabled: true,
            bevelThickness: 0.9,
            bevelSize: 0.3,
            bevelSegments: 10
        };
        class MouseTracker {
            constructor() {
                this.mousePos = new THREE.Vector2(0, 0);
                this.mouseSpeed = 0;
            }
            // 追踪鼠标位置
            trackMousePos() {
                window.addEventListener("mousemove", (e) => {
                    this.setMousePos(e);
                });
                window.addEventListener("touchstart", (e) => {
                    this.setMousePos(e.touches[0]);
                }, { passive: false });
                window.addEventListener("touchmove", (e) => {
                    this.setMousePos(e.touches[0]);
                });
            }
            // 设置鼠标位置
            setMousePos(e) {
                const { x, y } = getNormalizedMousePos(e);
                this.mousePos.x = x;
                this.mousePos.y = y;
            }
            // 追踪鼠标速度
            trackMouseSpeed() {
                // https://stackoverflow.com/questions/6417036/track-mouse-speed-with-js
                let lastMouseX = -1;
                let lastMouseY = -1;
                let mouseSpeed = 0;
                window.addEventListener("mousemove", (e) => {
                    const mousex = e.pageX;
                    const mousey = e.pageY;
                    if (lastMouseX > -1) {
                        mouseSpeed = Math.max(Math.abs(mousex - lastMouseX), Math.abs(mousey - lastMouseY));
                        this.mouseSpeed = mouseSpeed / 100;
                    }
                    lastMouseX = mousex;
                    lastMouseY = mousey;
                });
                document.addEventListener("mouseleave", () => {
                    this.mouseSpeed = 0;
                });
            }
        }
        class RaycastSelector {
            constructor(scene, camera) {
                this.scene = scene;
                this.camera = camera;
                this.raycaster = new THREE.Raycaster();
                this.mouseTracker = n.........完整代码请登录后点击上方下载按钮下载查看