tthree实现disco歌舞厅ktv灯光动画效果代码-html代码-BFW代码库

tthree实现disco歌舞厅ktv灯光动画效果代码

代码语言：html

所属分类：动画

代码描述：tthree实现disco歌舞厅ktv灯光动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
</head>

<body translate="no">
  <style>
* { margin: 0; padding: 0; }
canvas { display: block; }
body { background: black; overflow: hidden; }
</style>

<div id="container"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.160.js"></script>

<script>
window.addEventListener('load', () => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 15, 25);
    camera.lookAt(0, 0, 0);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    document.getElementById('container').appendChild(renderer.domElement);

    const floorGroup = new THREE.Group();
    const hexRadius = 2;
    const gridSize = 8;

    const hexShape = new THREE.Shape();
    for (let i = 0; i < 6; i++) {
        const angle = (i / 6) * Math.PI * 2;
        const x = Math.cos(angle) * hexRadius;
        const y = Math.sin(angle) * hexRadius;
        if (i === 0) hexShape.moveTo(x, y);
        else hexShape.lineTo(x, y);
    }
    hexShape.lineTo(hexRadius, 0);

    const extrudeSettings = {
        depth: 0.2,
        bevelEnabled: true,
        bevelSegments: 2,
        bevelSize: 0.1,
        bevelThickness: 0.1
    };

    for (let row = -gridSize; row <= gridSize; row++) {
        for (let col = -gridSize; col <= gridSize; col++) {
            const offsetX = col * hexRadius * 1.75;
            const offsetZ = row * hexRadius * 1.5 + (col % 2) * hexRadius * 0.75;

            if (Math.abs(offsetX) + Math.abs(offsetZ) <= gridSize * 2.5) {
                const hexGeometry = new THREE.ExtrudeGeometry(hexShape, extrudeSettings);
                const hexMaterial = new THREE.MeshPhysicalMaterial({
                    color: 0xffffff,
                    metalness: 0.8,
                    roughness: 0.2,
                    clearcoat: 1.0,
                    clearcoatRoughness: 0.1,
                    reflectivity: 1.0,
                    emissive: 0xffffff,
                    emissiveIntensity: 0
                });

                const hex = new THREE.Mesh(hexGeometry, hexMaterial);
                hex.rotation.x = -Math.PI / 2;
                hex.position.set(offsetX, -0.2, offsetZ);

                hex.userData = {
                    baseY: hex.position.y,
                    pulsePhase: Math.random() * Math.PI * 2,
                    colorPhase: Math.random() * Math.PI * 2
                };

                floorGroup.add(hex);
            }
        }
    }
    scene.add(floorGroup);

    const discoBallGroup = new THREE.Group();

    const ballRadius = .........完整代码请登录后点击上方下载按钮下载查看