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

Fix: Picture frame position, camera tweaks

Browse Source
This commit is contained in:
Dejvino 2025-11-17 23:00:35 +01:00
parent bc79301364
commit e5e6312f0d
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tv-player/src/core/animate.js
View File

@ -14,7 +14,7 @@ function updateCamera() {
// Base Camera Position in front of the TV // Base Camera Position in front of the TV
const baseX = -0.5; const baseX = -0.5;
const baseY = 1.5; const baseY = 1.5;
const baseZ = 2.5; const baseZ = 2.2;
// Base LookAt target (Center of the screen) // Base LookAt target (Center of the screen)
const baseTargetX = -0.7; const baseTargetX = -0.7;
@ -31,7 +31,7 @@ function updateCamera() {
state.camera.position.z = baseZ + camOffsetZ; state.camera.position.z = baseZ + camOffsetZ;
// LookAt Target Offsets (Subtle Gaze Shift) // LookAt Target Offsets (Subtle Gaze Shift)
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude; const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude * 3;
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude; const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
// Apply lookAt to the subtly shifted target // Apply lookAt to the subtly shifted target

3
tv-player/src/scene/PictureFrame.js
View File

@ -61,11 +61,12 @@ export class PictureFrame {
// Create two picture planes for cross-fading // Create two picture planes for cross-fading
this.pictureBack = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex] })); this.pictureBack = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex] }));
this.pictureBack.position.z = 0.001;
this.pictureBack.receiveShadow = true; this.pictureBack.receiveShadow = true;
paintingGroup.add(this.pictureBack); paintingGroup.add(this.pictureBack);
this.pictureFront = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex], transparent: true, opacity: 0 })); this.pictureFront = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex], transparent: true, opacity: 0 }));
this.pictureFront.position.z = 0.001; // Place slightly in front to avoid z-fighting this.pictureFront.position.z = 0.003; // Place slightly in front to avoid z-fighting
this.pictureFront.receiveShadow = true; this.pictureFront.receiveShadow = true;
paintingGroup.add(this.pictureFront); paintingGroup.add(this.pictureFront);

4
tv-player/src/scene/root.js
View File

@ -139,7 +139,7 @@ export function createSceneObjects() {
createBookshelf(state.roomSize/2 * 0.7, -state.roomSize/2+0.3, 0, 1); createBookshelf(state.roomSize/2 * 0.7, -state.roomSize/2+0.3, 0, 1);
const pictureFrame = new PictureFrame(state.scene, { const pictureFrame = new PictureFrame(state.scene, {
position: new THREE.Vector3(-state.roomSize/2 + 0.1, 2.0, -state.roomSize/2 + 1.5), position: new THREE.Vector3(-state.roomSize/2, 2.0, -state.roomSize/2 + 1.5),
width: 1.5, width: 1.5,
height: 1, height: 1,
imageUrls: [painting1, painting2], imageUrls: [painting1, painting2],
@ -148,7 +148,7 @@ export function createSceneObjects() {
state.pictureFrames.push(pictureFrame); state.pictureFrames.push(pictureFrame);
const pictureFrame2 = new PictureFrame(state.scene, { const pictureFrame2 = new PictureFrame(state.scene, {
position: new THREE.Vector3(state.roomSize/2 - 0.1, 2.0, 0.5), position: new THREE.Vector3(state.roomSize/2, 2.0, 0.3),
width: 1.5, width: 1.5,
height: 1, height: 1,
imageUrls: [painting2, painting1], imageUrls: [painting2, painting1],