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 Mous.........完整代码请登录后点击上方下载按钮下载查看