夜魅 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2025-5-26 21:14

夜魅

马黑黑 发表于 2025-5-26 21:14

帖子代码

<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; background: url('https://638183.freep.cn/638183/t24/webp3/yemw.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: 16%; height: 30%; bottom: 8%; cursor: pointer; }
</style>

<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2701453821" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/14/18/28/59/video6372186b58c54.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
</div>

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

var scene = new THREE.Scene();
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(75, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
camera.position.set(0, 2, 5);
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(tz.offsetWidth, tz.offsetHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
tz.appendChild(renderer.domElement);

var geometry = new THREE.SphereGeometry();
var material = new THREE.MeshStandardMaterial({
color: 0xeeffee,
wireframe: true,
});
var mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;

var planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.ShadowMaterial();
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;

var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(-30, 100, 60);
directionalLight.castShadow = true;
scene.add(mesh, plane, directionalLight);

var animate = () => {
requestAnimationFrame(animate);
var delta = clock.getDelta();
mesh.rotation.y -= delta / 5;
renderer.render(scene, camera);
};

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

tz.onclick = () => aud.paused ? clock.stop() : clock.start();

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

马黑黑 发表于 2025-5-26 21:15

本帖主要演示光源与阴影。关于光和阴影，将在 ThreeJS 入门讲义中介绍

杨帆发表于 2025-5-26 21:35

奇妙的构思，奇特的效果，奇美的感受，期待马老师讲授光和阴影{:4_191:}

小辣椒 发表于 2025-5-26 21:52

漂亮~~~~{:4_178:}

花飞飞 发表于 2025-5-26 22:02

马黑黑发表于 2025-5-26 21:15
本帖主要演示光源与阴影。关于光和阴影，将在 ThreeJS 入门讲义中介绍

黑白红经典三色，典雅端庄。。。这个作品色调高级唯美，特别喜欢。

花飞飞 发表于 2025-5-26 22:08

这个画面的设计跟法新社滤镜一样高级，{:4_173:}暗沉色调突出重点部分
画面线条硬朗，无论是地砖，墙壁还是格栅大门，更有视频的动态射线，都突出几何之美。。
球体用了网络材质给了纯黑之色，有令人意想不到的美观。。

花飞飞 发表于 2025-5-26 22:09

随之变动的阴影，镂空效果也随着原几何体旋转而变动。。这个真是神奇了。。
之前只在幼儿园积木那贴子里看到过阴影变化，别的好象只有自然光和环境光，只看到高光，未曾有阴影
{:4_173:}
看楼上说接下来要讲的就是光源和阴影，
这先看实例猜测，期待教程

马黑黑 发表于 2025-5-26 22:24

花飞飞发表于 2025-5-26 22:02
黑白红经典三色，典雅端庄。。。这个作品色调高级唯美，特别喜欢。

果酱果酱

马黑黑 发表于 2025-5-26 22:25

花飞飞发表于 2025-5-26 22:09
随之变动的阴影，镂空效果也随着原几何体旋转而变动。。这个真是神奇了。。
之前只在幼儿园积木那贴子里看 ...

{:4_191:}

马黑黑 发表于 2025-5-26 22:25

小辣椒发表于 2025-5-26 21:52
漂亮~~~~

谢顶

马黑黑 发表于 2025-5-26 22:25

杨帆发表于 2025-5-26 21:35
奇妙的构思，奇特的效果，奇美的感受，期待马老师讲授光和阴影

{:4_191:}

红影发表于 2025-5-27 10:20

马黑黑发表于 2025-5-26 21:15
本帖主要演示光源与阴影。关于光和阴影，将在 ThreeJS 入门讲义中介绍

一进来就看着这个球体效果还带着阴影，在这样的背景衬托下，这光影效果和色彩的设计都太美了{:4_199:}

红影发表于 2025-5-27 10:22

花飞飞发表于 2025-5-26 22:08
这个画面的设计跟法新社滤镜一样高级，暗沉色调突出重点部分
画面线条硬朗，无论是地砖，墙壁还 ...

飞飞的点评特别到位，把帖子留给人的感觉说得太透彻了{:4_199:}

红影发表于 2025-5-27 10:25

光影的镂空效果真的太美了，也忍不住期待关于新的 ThreeJS 入门讲义的内容了{:4_187:}

马黑黑 发表于 2025-5-27 11:52

红影发表于 2025-5-27 10:25
光影的镂空效果真的太美了，也忍不住期待关于新的 ThreeJS 入门讲义的内容了

先弄清楚光源，有了光源基础，对阴影的理解才不会迷茫

马黑黑 发表于 2025-5-27 11:52

红影发表于 2025-5-27 10:22
飞飞的点评特别到位，把帖子留给人的感觉说得太透彻了

她学习ps对光影非常有心得

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

红影发表于 2025-5-27 10:20
一进来就看着这个球体效果还带着阴影，在这样的背景衬托下，这光影效果和色彩的设计都太美了

夜魅本身就是充满着诱惑{:4_170:}

红影发表于 2025-5-27 13:28

马黑黑发表于 2025-5-27 11:52
先弄清楚光源，有了光源基础，对阴影的理解才不会迷茫

黑黑基于这样的考虑，才把阴影又分了个章节吧{:4_204:}

红影发表于 2025-5-27 13:28

马黑黑发表于 2025-5-27 11:52
她学习ps对光影非常有心得

我这样不会ps的学起来会吃力点{:4_173:}

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

夜魅