梦江南 发表于 2025-5-8 17:57

AI线绘宇宙飞船（套用黑黑老师“太空”的代码）


<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://img3.oldkids.cn/upload/2025/05/08/blog_260798238_20250508174815792.jpeg') 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://img4.oldkids.cn/upload/2025/05/08/blog_260798238_20250508175053412.mp3" autoplay loop></audio>
      <img id="player" src="https://638183.freep.cn/638183/small/mufuz2.jpg" 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 18:39

         欣赏老师的佳作，点赞！

杨帆 发表于 2025-5-8 18:53

漂亮，谢谢江南精彩分享{:4_204:}

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

阿姨好制作，这个AI宇宙飞船做的很好了，AI制作阿姨已经完全拿涅了{:4_199:}

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

满天星星，随鼠标飞舞，漂亮的制作

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

感谢阿姨精彩的分享

梦江南 发表于 2025-5-9 08:16

老谟深虑 发表于 2025-5-8 18:39
欣赏老师的佳作，点赞！

谢谢老谟老师沙发欣赏，早上好！{:4_204:}

梦江南 发表于 2025-5-9 08:17

杨帆 发表于 2025-5-8 18:53
漂亮，谢谢江南精彩分享

谢谢杨帆欣赏支持，早上好！{:4_204:}

梦江南 发表于 2025-5-9 08:43

小辣椒 发表于 2025-5-8 21:08
阿姨好制作，这个AI宇宙飞船做的很好了，AI制作阿姨已经完全拿涅了

小辣椒，其实我是偷懒了，应该把水印去掉的。直接做帖了。

梦江南 发表于 2025-5-9 08:45

小辣椒 发表于 2025-5-8 21:09
满天星星，随鼠标飞舞，漂亮的制作

阿姨是直接套用，漂亮的星星都有是黑黑老师的功劳。{:4_173:}

梦江南 发表于 2025-5-9 08:46

小辣椒 发表于 2025-5-8 21:09
感谢阿姨精彩的分享

谢谢您的加精鼓励，下次不用加了。

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

欣赏了

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

感谢佳作分享

梦江南 发表于 2025-5-9 13:36

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

谢谢世外桃源老师欣赏，下午好。

梦江南 发表于 2025-5-9 13:37

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

再谢老师的分享。

红影 发表于 2025-5-9 14:09

这个好漂亮，AI制作加满天星效果，达到惊艳效果。
欣赏江南好帖{:4_199:}

梦江南 发表于 2025-5-9 15:46

红影 发表于 2025-5-9 14:09
这个好漂亮，AI制作加满天星效果，达到惊艳效果。
欣赏江南好帖

看到您很开心。问好！{:4_187:}

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

梦江南 发表于 2025-5-9 15:46
看到您很开心。问好！

谢谢江南，晚上好{:4_187:}
页: [1]
查看完整版本: AI线绘宇宙飞船（套用黑黑老师“太空”的代码）