红影 发表于 2025-5-11 18:39

《勇者之歌》（套用黑黑《古域传说》代码）


<style>
        #tz { --state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9;overflow: hidden; background: url('https://file.uhsea.com/2505/db8b5e5e86b2c9a7d7474547eff06c33WC.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; position: relative; border-radius:20px; }
        #player { position: absolute; left: 30px; top: 30px; z-index: 10; clip-path: circle(45%); transition: filter .7s; cursor: pointer; animation: rot 12s infinite linear var(--state); }
        #player:hover { filter: invert(0.8); }
        #btnFs { left: 20px; bottom: 20px; color: #eee; text-align: center; }
        #btnFs:hover { color: red; }
        #vid {position: absolute; width: 100%; height: 120%; bottom: 0; opacity: .8; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2636461223" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/28/55/6292ea858a819_10s_big.mp4" autoplay loop muted></video>
        <img id="player" src="https://file.uhsea.com/2505/a26398388754d0d82dfd95971696f8d29F.png" width="10%" title="播放/暂停" />
</div>

<script type="module">

import * as THREE from 'https://esm.sh/three';
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls";
import { FS } from 'https://638183.freep.cn/638183/web/ku/fscreen.js';

let rotRaf, isPaused = true, balls = [];

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
camera.position.z = 30;
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(tz.offsetWidth, tz.offsetHeight);
tz.appendChild(renderer.domElement);

const geometry = new THREE.SphereGeometry(2, 32, 32, 0, 1.75 * Math.PI, 0, 1.6 * Math.PI);
for (let i = 0; i <= 6; i++) {
        const material = new THREE.MeshNormalMaterial({
                transparent: true,
                opacity: 0.65,
                wireframe: true,
                side: THREE.DoubleSide
        });
        const ball = new THREE.Mesh(geometry, material);
        const radian = (360 / 6) * (Math.PI / 180);
        ball.rotateY(Math.random() * 180);
        if (i < 6) ball.position.set(6 * Math.sin(radian * i), 6 * Math.cos(radian * i), 0);
        balls.push(ball);
        scene.add(ball);
}

const controller = new OrbitControls(camera, renderer.domElement);
controller.autoRotate = true;

isPaused = aud.paused;

const mState = () => {
        isPaused = aud.paused;
        aud.paused ? cancelAnimationFrame(rotRaf) : rotating();
};

const rotating = () => {
        if (isPaused ) return;
        balls.forEach(b => b.rotation.y -= Math.random() * 0.05);
        controller.update();
        renderer.render(scene, camera);
        rotRaf = requestAnimationFrame(rotating);
};

window.onresize = () => renderer.setSize(tz.offsetWidth, tz.offsetHeight);

aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(rotRaf);

rotating();
FS(tz, player);

</script>

红影 发表于 2025-5-11 18:40

把球球弄少了点，把相机也弄得少许远了点，虽然鼠标也能调@马黑黑 {:4_173:}

红影 发表于 2025-5-11 18:42

俩个人跟球球战斗，是不是有点堂吉诃德战风车的感觉。
找个一个图图两个人在战斗，觉得离太近，没法加球球进去，只能抠图然后另外放，却成了战球球{:4_170:}

马黑黑 发表于 2025-5-11 18:53

{:4_187:}

红影 发表于 2025-5-11 19:56

马黑黑 发表于 2025-5-11 18:53


谢谢黑黑的代码，这个真有趣{:4_187:}

梦油 发表于 2025-5-11 21:14

这七个彩球做得真漂亮。

马黑黑 发表于 2025-5-11 21:32

红影 发表于 2025-5-11 19:56
谢谢黑黑的代码，这个真有趣

你设计的形状不错

红影 发表于 2025-5-11 22:07

梦油 发表于 2025-5-11 21:14
这七个彩球做得真漂亮。

这是黑黑的代码，我套用的{:4_173:}

红影 发表于 2025-5-11 22:08

马黑黑 发表于 2025-5-11 21:32
你设计的形状不错

也没什么设计呢，就是改了几个数字{:4_173:}

梦江南 发表于 2025-5-12 08:11

这球球自动化了，自己会变化。太棒了！{:4_187:}

梦江南 发表于 2025-5-12 08:15

这是在火焰山上决斗。{:4_173:}

梦江南 发表于 2025-5-12 08:15

这是在火焰山上决斗。{:4_173:}

马黑黑 发表于 2025-5-12 12:16

红影 发表于 2025-5-11 22:08
也没什么设计呢，就是改了几个数字

这就是设计

红影 发表于 2025-5-12 14:44

梦江南 发表于 2025-5-12 08:11
这球球自动化了，自己会变化。太棒了！

这是黑黑的代码效果呢，这些球球用在帖子里真好看{:4_173:}

红影 发表于 2025-5-12 14:44

梦江南 发表于 2025-5-12 08:15
这是在火焰山上决斗。

勇者上刀山下火海都无惧{:4_173:}

红影 发表于 2025-5-12 14:46

梦江南 发表于 2025-5-12 08:15
这是在火焰山上决斗。

也可能战斗到海里去{:4_170:}

红影 发表于 2025-5-12 14:46

马黑黑 发表于 2025-5-12 12:16
这就是设计

这也算啊，谢谢黑黑{:4_187:}

梦油 发表于 2025-5-12 16:51

红影 发表于 2025-5-11 22:07
这是黑黑的代码，我套用的

运用得当。

马黑黑 发表于 2025-5-12 19:11

红影 发表于 2025-5-12 14:46
这也算啊，谢谢黑黑

设计就是酱紫的：改变原模型数据

小辣椒 发表于 2025-5-12 21:39

哇塞，亲爱的，你这个制作就是黑黑那个魔幻的古域传说，做的太棒了~~
页: [1] 2
查看完整版本: 《勇者之歌》（套用黑黑《古域传说》代码）