dejvino/music-video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: improved fireplace - logs and shader

Browse Source
This commit is contained in:
Dejvino 2025-11-20 12:11:30 +01:00
parent 40952b348a
commit c48581379c
2 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
magic-mirror/src/scene/fireplace.js
View File

@ -2,6 +2,7 @@ import * as THREE from 'three';
import { state } from '../state.js'; import { state } from '../state.js';
import { fireVertexShader, fireFragmentShader } from '../shaders/fire-shaders.js'; import { fireVertexShader, fireFragmentShader } from '../shaders/fire-shaders.js';
import stoneTextureUrl from '/textures/stone_floor.png'; import stoneTextureUrl from '/textures/stone_floor.png';
import woodTextureUrl from '/textures/wood.png';
let fireMaterial; let fireMaterial;
let fireLight; let fireLight;
@ -16,6 +17,12 @@ export function createFireplace(x, z, rotY) {
stoneTexture.repeat.set(2, 2); stoneTexture.repeat.set(2, 2);
const stoneMaterial = new THREE.MeshPhongMaterial({ map: stoneTexture, color: 0x999999, shininess: 10 }); const stoneMaterial = new THREE.MeshPhongMaterial({ map: stoneTexture, color: 0x999999, shininess: 10 });
const woodTexture = state.loader.load(woodTextureUrl);
const logMaterial = new THREE.MeshPhongMaterial({
map: woodTexture,
color: 0x5c4033 // A dark wood tint
});
const hearthWidth = 2.5; const hearthWidth = 2.5;
const hearthHeight = 0.2; const hearthHeight = 0.2;
const hearthDepth = 1.5; const hearthDepth = 1.5;
@ -72,6 +79,23 @@ export function createFireplace(x, z, rotY) {
rightJamb.position.set(openingWidth / 2 + frameThickness / 2, hearthHeight + jambHeight / 2, bodyDepth / 2 + frameDepth / 2); rightJamb.position.set(openingWidth / 2 + frameThickness / 2, hearthHeight + jambHeight / 2, bodyDepth / 2 + frameDepth / 2);
fireplaceGroup.add(rightJamb); fireplaceGroup.add(rightJamb);
// 3.8. Logs inside fireplace
const logGeo = new THREE.CylinderGeometry(0.08, 0.1, openingWidth * 0.7, 8);
const createLog = (pos, rot) => {
const log = new THREE.Mesh(logGeo, logMaterial);
log.position.copy(pos);
log.rotation.copy(rot);
log.castShadow = false;
log.receiveShadow = true;
fireplaceGroup.add(log);
};
const logY = hearthHeight + 0.1;
createLog(new THREE.Vector3(0, logY, 0.5), new THREE.Euler(0, 0, Math.PI / 2));
createLog(new THREE.Vector3(-0.1, logY + 0.1, 0.4), new THREE.Euler(0.2, 0, Math.PI / 2.2));
createLog(new THREE.Vector3(0.2, logY + 0.1, 0.5), new THREE.Euler(-0.2, 0, Math.PI / 1.8));
// 4. Animated Fire // 4. Animated Fire
fireMaterial = new THREE.ShaderMaterial({ fireMaterial = new THREE.ShaderMaterial({
uniforms: { uniforms: {

4
magic-mirror/src/shaders/fire-shaders.js
View File

@ -49,7 +49,7 @@ float fbm(in vec2 st) {
void main() { void main() {
vec2 uv = vUv; vec2 uv = vUv;
float q = fbm(uv * 2.0 - vec2(0.0, u_time * 0.2)); float q = fbm(uv * 2.0 - vec2(0.0, u_time * 1.2));
float r = fbm(uv * 2.0 + q + vec2(1.7, 9.2) + vec2(0.0, u_time * -0.3)); float r = fbm(uv * 2.0 + q + vec2(1.7, 9.2) + vec2(0.0, u_time * -0.3));
float fireAmount = fbm(uv * 2.0 + r + vec2(0.0, u_time * 0.15)); float fireAmount = fbm(uv * 2.0 + r + vec2(0.0, u_time * 0.15));
@ -57,7 +57,7 @@ void main() {
// Shape the fire to rise from the bottom // Shape the fire to rise from the bottom
fireAmount *= (1.0 - uv.y); fireAmount *= (1.0 - uv.y);
vec3 fireColor = mix(vec3(0.9, 0.5, 0.1), vec3(1.0, 0.9, 0.3), fireAmount); vec3 fireColor = mix(vec3(0.9, 0.3, 0.1), vec3(1.0, 0.9, 0.3), fireAmount);
gl_FragColor = vec4(fireColor, fireAmount * 2.0); gl_FragColor = vec4(fireColor, fireAmount * 2.0);
} }
`; `;