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

【黑师代码】遗失的心跳（学习黑师20250605《一个人的龟兹》ThreeJS后期通道效果）

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

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1966155051" autoplay loop></audio>
        <video id="vid" src="https://video.699pic.com/videos/14/28/53/b_ivr7IbG7Jmzt1583142853.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 { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
        import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
        import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

        const scene = new THREE.Scene();
        const clock = new THREE.Clock();
        const camera = new THREE.PerspectiveCamera(75, tz.offsetWidth / tz.offsetHeight, 1, 1000);
        camera.position.set(-0, 1.5, 5);
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(tz.offsetWidth, tz.offsetHeight);
        tz.appendChild(renderer.domElement);

        const texture = new THREE.TextureLoader().load('https://642303.freep.cn/642303/tu/20250607ysdxtxiao.webp');
        texture.colorSpace = THREE.SRGBColorSpace;

        const box = new THREE.Mesh(
                new THREE.BoxGeometry(),
                new THREE.MeshBasicMaterial({ map: texture })
        );
        const mesh = new THREE.Mesh(
                new THREE.CylinderGeometry(0.8, 1, 1.2, 8, 1),
                new THREE.MeshBasicMaterial({ wireframe: true })
        );
        mesh.add(box);
        mesh.position.set(-0.15, 0, 0);
        scene.add(mesh);

        // 后期处理
        const composer = new EffectComposer(renderer); // 效果合成器
        const renderPass = new RenderPass(scene, camera); // 渲染通道
        composer.addPass(renderPass); // 通道加入合成器
        // 轮廓描边
        const outlinePass = new OutlinePass(new THREE.Vector2(tz.offsetWidth, tz.offsetHeight), scene, camera);
        outlinePass.visibleEdgeColor.set(0x9f97b8); // 描边颜色（缺省白色）
        outlinePass.edgeThickness = 58; // 描边厚度
        outlinePass.edgeStrength = 5; // 光亮强度
        outlinePass.pulsePeriod =1; // 闪烁间隔时间（0不闪烁）
        outlinePass.selectedObjects = ; // 针对的图形对象
        composer.addPass(outlinePass); // 描边效果加入合成器
       
const filmPass = new FilmPass();
        composer.addPass(filmPass);

        const animate = (currentTime) => {
                const delta = clock.getDelta();
                mesh.rotation.y -= delta / 5;
                composer.render(); // 前期（基本绘制画）和后期（描边效果）合成渲染
                requestAnimationFrame(animate);
        };
        aud.onplaying = aud.onpause = () => aud.paused ? (clock.stop(), outlinePass.pulsePeriod = 0) : (clock.start(), outlinePass.pulsePeriod = 0.5);

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

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

@马黑黑 看到下午发的新效果就想跟一个通道效果作业，结果发现球体贴图实在不好找合适的。
换成立方体贴图，用了描边和胶片颗粒效果

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

花飞飞 发表于 2025-6-7 21:22
@马黑黑 看到下午发的新效果就想跟一个通道效果作业，结果发现球体贴图实在不好找合适的。
换成立方体贴图 ...

贴合球体的纹理贴图其实很多，但要让球体立体感十足，需要做一些其它处理

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

帖子的设计非常奇巧精妙，整体效果妙不可言，令人不忍离去

花飞飞 发表于 2025-6-7 23:00

马黑黑 发表于 2025-6-7 22:16
贴合球体的纹理贴图其实很多，但要让球体立体感十足，需要做一些其它处理

找不到没法用。。我今天的图贴上去简直没法看{:4_173:}

花飞飞 发表于 2025-6-7 23:00

马黑黑 发表于 2025-6-7 22:17
帖子的设计非常奇巧精妙，整体效果妙不可言，令人不忍离去

菇凉有点瘦，还有树枝长在身上。。{:4_170:}

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

花飞飞 发表于 2025-6-7 23:00
菇凉有点瘦，还有树枝长在身上。。

挺好的，自然环保

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

花飞飞 发表于 2025-6-7 23:00
找不到没法用。。我今天的图贴上去简直没法看

挺不错的

梦江南 发表于 2025-6-8 07:26

欣赏老师佳作，漂亮啊！{:4_187:}

樵歌 发表于 2025-6-8 10:27

典型的怀旧风格！

杨帆 发表于 2025-6-8 10:55

漂亮！谢谢飞飞友友精彩分享{:4_204:}

花飞飞 发表于 2025-6-8 17:48

马黑黑 发表于 2025-6-7 23:32
挺好的，自然环保

一个人物加背景好象做得比较多。。
最近老想尝试一下小人物加个大空旷的场景这样新的构图方式。
之前那个海的就是有意识的尝试{:4_173:}

花飞飞 发表于 2025-6-8 17:48

马黑黑 发表于 2025-6-7 23:32
挺不错的

都没贴好还挺不错的呀。{:4_173:}

花飞飞 发表于 2025-6-8 17:52

杨帆 发表于 2025-6-8 10:55
漂亮！谢谢飞飞友友精彩分享

感谢扬帆支持{:4_190:}

花飞飞 发表于 2025-6-8 17:52

樵歌 发表于 2025-6-8 10:27
典型的怀旧风格！

感谢樵管支持{:4_190:}

花飞飞 发表于 2025-6-8 17:53

梦江南 发表于 2025-6-8 07:26
欣赏老师佳作，漂亮啊！

感谢梦江南支持鼓励{:4_190:}

马黑黑 发表于 2025-6-8 20:15

花飞飞 发表于 2025-6-8 17:48
都没贴好还挺不错的呀。

可以的

马黑黑 发表于 2025-6-8 20:16

花飞飞 发表于 2025-6-8 17:48
一个人物加背景好象做得比较多。。
最近老想尝试一下小人物加个大空旷的场景这样新的构图方式。
之前那 ...

没问题的

花飞飞 发表于 2025-6-8 21:08

马黑黑 发表于 2025-6-8 20:15
可以的

看到今天的范例了，密集型的小图案更合适些。。大图不合适

马黑黑 发表于 2025-6-8 21:09

花飞飞 发表于 2025-6-8 21:08
看到今天的范例了，密集型的小图案更合适些。。大图不合适

你全屏看看效果
页: [1] 2
查看完整版本: 【黑师代码】遗失的心跳（学习黑师20250605《一个人的龟兹》ThreeJS后期通道效果）