论坛 › 音乐沙龙 › Maga - Te Siento en Mi

马黑黑 发表于 2025-6-7 18:03

Maga - Te Siento en Mi

<style>
#tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: #eee url('https://638183.freep.cn/638183/t24/w4/red001.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
        #btnFs { bottom: 20px; color: #eee; text-align: center; }
        #btnFs:hover { color: red; }
        #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        #player { position: absolute; width: 18%; height: auto; aspect-ratio: 1/1; border-radius: 50%; opacity: .65; cursor: pointer; overflow: hidden;}
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1395143673" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/25/20/video6822f3e0d18c7.mp4" autoplay loop muted></video>
        <div id="player" title="播放/暂停"></div>
</div>

<script type="importmap">
{
        "imports": {
                "three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
                "three/addons/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
        }
}
</script>

<script type="module">
        import * as THREE from 'three';
        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
        import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
        import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';
        import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, player.offsetWidth/player.offsetHeight, 0.1, 100);
        camera.position.z = 5.2;
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setClearAlpha(0.0);
        renderer.setSize(player.offsetWidth, player.offsetHeight);
        const clock = new THREE.Clock();
        player.appendChild(renderer.domElement);

        const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/t24/w4/red001.webp');
        const mesh = new THREE.Mesh(
                new THREE.SphereGeometry(2),
                new THREE.MeshBasicMaterial({ map: texture })
        );
        scene.add(mesh);

        const composer = new EffectComposer(renderer);
        const renderPass = new RenderPass(scene, camera);
        composer.addPass(renderPass);
        const filmPass = new FilmPass();
        composer.addPass(filmPass);       
        const halftonePass = new HalftonePass();
        halftonePass.greyscale = true;
        composer.addPass(halftonePass);

        const animate = () => {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                mesh.rotation.x += delta;
                mesh.rotation.y += delta;
                composer.render();
        };

        window.onresize = () => {
                camera.aspect = player.offsetWidth / player.offsetHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(player.offsetWidth, player.offsetHeight);
        };

        aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();

        animate();
        FS(tz, player);
</script>

马黑黑 发表于 2025-6-7 18:03

帖子代码

<style>
#tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: #eee url('https://638183.freep.cn/638183/t24/w4/red001.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
        #btnFs { bottom: 20px; color: #eee; text-align: center; }
        #btnFs:hover { color: red; }
        #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        #player { position: absolute; width: 18%; height: auto; aspect-ratio: 1/1; border-radius: 50%; opacity: .65; cursor: pointer; overflow: hidden;}
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1395143673" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/25/20/video6822f3e0d18c7.mp4" autoplay loop muted></video>
        <div id="player" title="播放/暂停"></div>
</div>

<script type="importmap">
{
        "imports": {
                "three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
                "three/addons/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
        }
}
</script>

<script type="module">
        import * as THREE from 'three';
        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
        import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
        import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';
        import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, player.offsetWidth/player.offsetHeight, 0.1, 100);
        camera.position.z = 5.2;
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setClearAlpha(0.0);
        renderer.setSize(player.offsetWidth, player.offsetHeight);
        const clock = new THREE.Clock();
        player.appendChild(renderer.domElement);

        const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/t24/w4/red001.webp');
        const mesh = new THREE.Mesh(
                new THREE.SphereGeometry(2),
                new THREE.MeshBasicMaterial({ map: texture })
        );
        scene.add(mesh);

        const composer = new EffectComposer(renderer);
        const renderPass = new RenderPass(scene, camera);
        composer.addPass(renderPass);
        const filmPass = new FilmPass();
        composer.addPass(filmPass);       
        const halftonePass = new HalftonePass();
        halftonePass.greyscale = true;
        composer.addPass(halftonePass);

        const animate = () => {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                mesh.rotation.x += delta;
                mesh.rotation.y += delta;
                composer.render();
        };

        window.onresize = () => {
                camera.aspect = player.offsetWidth / player.offsetHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(player.offsetWidth, player.offsetHeight);
        };

        aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();

        animate();
        FS(tz, player);
</script>

马黑黑 发表于 2025-6-7 18:12

本帖：

ThreeJS 父元素为 id="player" 的 div，小尺寸的dom盒子，宽高均为帖子元素 id="tz" div 的 10%。之所以这么设计，主要原因是后期处理的特效通道 HalftonePass（半色调通道）会吞掉主场景的背景设置，图像之外的区域永远是漆黑一片。

小型化 ThreeJS 场景用于帖子播放器的制作，这倒是个好主意。

樵歌 发表于 2025-6-7 21:32

洋哥呵{:4_189:}

花飞飞 发表于 2025-6-7 21:39

马黑黑 发表于 2025-6-7 18:12
本帖：

ThreeJS 父元素为 id="player" 的 div，小尺寸的dom盒子，宽高均为帖子元素 id="tz" div 的 10% ...

难怪，我刚才跟贴的时候，就是出现黑漆漆一大片，是这个半色调通道独有的吧，
后来换成了胶片颗粒效果，就正常了，只在图上显示。

花飞飞 发表于 2025-6-7 21:46

马黑黑 发表于 2025-6-7 18:12
本帖：

ThreeJS 父元素为 id="player" 的 div，小尺寸的dom盒子，宽高均为帖子元素 id="tz" div 的 10% ...

现在知道是33行的代码起作用。。
宽高用了PLAYER的尺寸，平时都用1，这里用了0.1，只有十分之一{:4_173:}

花飞飞 发表于 2025-6-7 21:47

昨天用这个半调色试的时候是教程里那个纽结的，好象没出现漆黑一片的样纸，因为没的背景的缘故吧

花飞飞 发表于 2025-6-7 21:49

歌曲特别，头一次听。。画面这红土地看着震撼，搭配金色粒子飞舞效果，非常漂亮{:4_173:}

马黑黑 发表于 2025-6-7 22:09

花飞飞 发表于 2025-6-7 21:49
歌曲特别，头一次听。。画面这红土地看着震撼，搭配金色粒子飞舞效果，非常漂亮

视频很不错的

马黑黑 发表于 2025-6-7 22:11

花飞飞 发表于 2025-6-7 21:47
昨天用这个半调色试的时候是教程里那个纽结的，好象没出现漆黑一片的样纸，因为没的背景的缘故吧

昨天没有用半色调通道，用的是高亮边框和电影胶片颗粒两个通道

马黑黑 发表于 2025-6-7 22:12

花飞飞 发表于 2025-6-7 21:46
现在知道是33行的代码起作用。。
宽高用了PLAYER的尺寸，平时都用1，这里用了0.1，只有十分之一{:4_173: ...

那个是相机设置，0.1和1，100和1000，都无所谓

马黑黑 发表于 2025-6-7 22:14

花飞飞 发表于 2025-6-7 21:39
难怪，我刚才跟贴的时候，就是出现黑漆漆一大片，是这个半色调通道独有的吧，
后来换成了胶片颗粒效果， ...

辉光和半色调通道都会吃掉alpha通道，这是设计缺陷，一般可以通过修改源码彻底解决问题但是修改之后整体效果又受到一定的影响

马黑黑 发表于 2025-6-7 22:15

樵歌 发表于 2025-6-7 21:32
洋哥呵

樵歌唱洋歌一个字，妙

花飞飞 发表于 2025-6-7 22:53

马黑黑 发表于 2025-6-7 22:09
视频很不错的

红土地愣被整成金土地了{:4_173:}

花飞飞 发表于 2025-6-7 22:54

马黑黑 发表于 2025-6-7 22:11
昨天没有用半色调通道，用的是高亮边框和电影胶片颗粒两个通道

你昨天是没有用这个，
是我学教程的时候，把纽结换了个半色调的，
在教程贴子里回复了的。。{:4_173:}

花飞飞 发表于 2025-6-7 22:55

马黑黑 发表于 2025-6-7 22:12
那个是相机设置，0.1和1，100和1000，都无所谓

那哪里体现了十分之一呢。我只看到这里有变化{:4_173:}

花飞飞 发表于 2025-6-7 22:59

马黑黑 发表于 2025-6-7 22:14
辉光和半色调通道都会吃掉alpha通道，这是设计缺陷，一般可以通过修改源码彻底解决问题但是修改之后整体 ...

原来还有设计缺陷。。。
但今天球体这个你解决的很完美呀{:4_173:}

马黑黑 发表于 2025-6-7 23:33

花飞飞 发表于 2025-6-7 22:59
原来还有设计缺陷。。。
但今天球体这个你解决的很完美呀

这是精心剪裁的

马黑黑 发表于 2025-6-7 23:33

花飞飞 发表于 2025-6-7 22:55
那哪里体现了十分之一呢。我只看到这里有变化

变化是其它的数据引起的，那里恰巧我也改了一下下而已，并不特别有影响

马黑黑 发表于 2025-6-7 23:34

花飞飞 发表于 2025-6-7 22:54
你昨天是没有用这个，
是我学教程的时候，把纽结换了个半色调的，
在教程贴子里回复了的。。

半色调通道没有给alpha通道让步

查看完整版本: Maga - Te Siento en Mi