老谟深虑 发表于 2025-5-8 10:53

学习黑黑老师的代码《中国航天人之歌》


<style>
      #papa { --state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #000 url('https://cccimg.com/view.php/84f3c1e448dfc13fae830b4d67a66f79.jpg') no-repeat center/cover; box-shadow: 2px 2px 10px rgba(0,0,0,.65); z-index: 1; display: grid; place-items: center; position: relative; }
#player { position: absolute; z-index: 9; clip-path: circle(45%); transition: filter .7s; cursor: pointer; animation: rot 10s linear infinite var(--state);left: 10px; top: 30px;}
      #player:hover { filter: hue-rotate(90deg); }
      #btnFs { bottom: 30px; color: #eee; }
      #btnFs:hover { color: red; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <audio id="aud" src="https://cccimg.com/view.php/0bad02d0c465f8a57806affc132a43b9.mp3" autoplay loop></audio>
      <img id="player" src="https://cccimg.com/view.php/98bdbaeb6a57278824a651eb414e2188.png" width="10%" title="播放/暂停" />
</div>

<script type="importmap">
      {
                "imports": {
                        "three": "https://esm.sh/three/build/three.webgpu.js",
                        "three/tsl": "https://esm.sh/three@0.176.0/es2022/build/three.tsl.mjs"
                }
      }
</script>

<script type="module">

import * as THREE from 'three';
import {uniform, time, instanceIndex, instancedBufferAttribute} from 'three/tsl';
import {FS} from 'https://638183.freep.cn/638183/web/ku/fscreen.js';

let camera, scene, renderer, material;
let mouseX = 0, mouseY = 0;
let width = papa.offsetWidth, height = papa.offsetHeight;
let windowHalfX = width / 2;
let windowHalfY = height / 2;

const init = () => {
      camera = new THREE.PerspectiveCamera(55, width / height, 2, 2000);
      camera.position.z = 1000;
      scene = new THREE.Scene();
      scene.fog = new THREE.FogExp2(0x000000, 0.001);
      const count = 6000;
      const positions = [];
      for (let i = 0; i < count; i ++) {
                positions.push( 2000 * Math.random() - 1000, 2000 * Math.random() - 1000, 2000 * Math.random() - 1000 );
      }
      const positionAttribute = new THREE.InstancedBufferAttribute(new Float32Array(positions), 3);
      const map = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/star.png');
      map.colorSpace = THREE.SRGBColorSpace;
      material = new THREE.SpriteNodeMaterial({sizeAttenuation: true, map, alphaMap: map, alphaTest: 0.1});
      material.color.setHSL(1.0, 0.3, 0.7, THREE.SRGBColorSpace);
      material.positionNode = instancedBufferAttribute(positionAttribute);
      material.rotationNode = time.add(instanceIndex).sin();
      material.scaleNode = uniform(15);
      const particles = new THREE.Sprite(material);
      particles.count = count;
      scene.add(particles);
      renderer = new THREE.WebGPURenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);
      renderer.setAnimationLoop(render);
      papa.appendChild(renderer.domElement);
      papa.style.touchAction = 'none';
      papa.addEventListener('pointermove', onPointerMove);
      window.addEventListener('resize', onWindowResize);
};

const onWindowResize = () => {
      width = papa.offsetWidth;
      height = papa.offsetHeight;
      windowHalfX = width / 2;
      windowHalfY = height / 2;
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      renderer.setSize(width, height);
};

const onPointerMove = (event) => {
      if (event.isPrimary === false) return;
      mouseX = event.clientX - windowHalfX;
      mouseY = event.clientY - windowHalfY;
};

const render = () => {
      const time = Date.now() * 0.00005;
      camera.position.x += (mouseX - camera.position.x) * 0.05;
      camera.position.y += (- mouseY - camera.position.y) * 0.05;
      camera.lookAt(scene.position);
      const h = ( 360 * (1.0 + time ) % 360) / 360;
      material.color.setHSL(h, 0.5, 0.5);
      renderer.render(scene, camera);
};

init();
FS(papa, player);

</script>















梦油 发表于 2025-5-8 11:04

欣赏佳作，问候老谟。

梦江南 发表于 2025-5-8 11:28

欣赏老师佳作，点赞！{:4_199:}

老谟深虑 发表于 2025-5-8 12:17

梦油 发表于 2025-5-8 11:04
欣赏佳作，问候老谟。

         谢谢老师首席赏评，这是套用黑黑老师的代码制作的，向黑黑老师致谢！

老谟深虑 发表于 2025-5-8 12:20

梦江南 发表于 2025-5-8 11:28
欣赏老师佳作，点赞！

         谢谢老师的支持鼓励，中午好！请问老师你有发表今日头条视频的代码吗？

梦江南 发表于 2025-5-8 16:16

老谟深虑 发表于 2025-5-8 12:20
谢谢老师的支持鼓励，中午好！请问老师你有发表今日头条视频的代码吗？

回老谟老师，今天没发代码帖。

梦油 发表于 2025-5-8 17:26

老谟深虑 发表于 2025-5-8 12:17
谢谢老师首席赏评，这是套用黑黑老师的代码制作的，向黑黑老师致谢！

“活学活用”啊！{:5_117:}

老谟深虑 发表于 2025-5-8 18:33

梦江南 发表于 2025-5-8 16:16
回老谟老师，今天没发代码帖。

         老师我是问你有没有在论坛发表“今日头条视频”的HTML通用代码？

小辣椒 发表于 2025-5-8 21:25

欣赏老谟好制作，满天星星飞舞，效果很美{:4_199:}

小辣椒 发表于 2025-5-8 21:25

主题还特别的正能量的，英雄的航天人，祖国的栋梁

小辣椒 发表于 2025-5-8 21:25

感谢老师分享{:4_187:}

老谟深虑 发表于 2025-5-9 12:25

小辣椒 发表于 2025-5-8 21:25
欣赏老谟好制作，满天星星飞舞，效果很美

         谢谢小辣椒的支持和评精鼓励，套用黑黑老师的代码，向黑黑老师致谢！

老谟深虑 发表于 2025-5-9 12:28

小辣椒 发表于 2025-5-8 21:25
感谢老师分享

          谢谢你，请问你有没有在论坛能发表“今日头条视频”html的通用代码？

世外桃源 发表于 2025-5-9 13:12

欣赏了{:4_199:}

世外桃源 发表于 2025-5-9 13:12

感谢佳作分享

红影 发表于 2025-5-9 13:44

满天星斗很美，欣赏老谟深虑老师好帖。
向英雄的航天人致敬{:4_199:}

老谟深虑 发表于 2025-5-9 15:22

世外桃源 发表于 2025-5-9 13:12
欣赏了

            谢谢老师的欣赏，下午好！

老谟深虑 发表于 2025-5-9 15:23

世外桃源 发表于 2025-5-9 13:12
感谢佳作分享

         谢谢老师分享。

老谟深虑 发表于 2025-5-9 15:24

红影 发表于 2025-5-9 13:44
满天星斗很美，欣赏老谟深虑老师好帖。
向英雄的航天人致敬

          谢谢老师的欣赏，下午好！

红影 发表于 2025-5-9 20:32

老谟深虑 发表于 2025-5-9 15:24
谢谢老师的欣赏，下午好！

客气了，晚上好{:4_187:}
页: [1] 2
查看完整版本: 学习黑黑老师的代码《中国航天人之歌》