New project: Party cathedral
This commit is contained in:
Dejvino
@@ -0,0 +1,116 @@
|
||||
import * as THREE from 'three';
|
||||
|
||||
const FRAME_DEPTH = 0.05;
|
||||
const TRANSITION_DURATION = 5000;
|
||||
const IMAGE_CHANGE_CHANCE = 0.0001;
|
||||
|
||||
export class PictureFrame {
|
||||
constructor(scene, { position, width, height, imageUrls, rotationY = 0 }) {
|
||||
if (!imageUrls || imageUrls.length === 0) {
|
||||
throw new Error('PictureFrame requires at least one image URL in the imageUrls array.');
|
||||
}
|
||||
|
||||
this.scene = scene;
|
||||
this.mesh = this._createPictureFrame(width, height, imageUrls, 0.05);
|
||||
|
||||
this.mesh.position.copy(position);
|
||||
this.mesh.rotation.y = rotationY;
|
||||
|
||||
this.isTransitioning = false;
|
||||
this.transitionStartTime = 0;
|
||||
|
||||
this.scene.add(this.mesh);
|
||||
}
|
||||
|
||||
_createPictureFrame(width, height, imageUrls, frameThickness) {
|
||||
const paintingGroup = new THREE.Group();
|
||||
|
||||
// 1. Create the wooden frame
|
||||
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // SaddleBrown
|
||||
|
||||
const topFrame = new THREE.Mesh(new THREE.BoxGeometry(width + 2 * frameThickness, frameThickness, FRAME_DEPTH), frameMaterial);
|
||||
topFrame.position.y = height / 2 + frameThickness / 2;
|
||||
topFrame.castShadow = true;
|
||||
topFrame.receiveShadow = true;
|
||||
paintingGroup.add(topFrame);
|
||||
|
||||
const bottomFrame = new THREE.Mesh(new THREE.BoxGeometry(width + 2 * frameThickness, frameThickness, FRAME_DEPTH), frameMaterial);
|
||||
bottomFrame.position.y = -height / 2 - frameThickness / 2;
|
||||
bottomFrame.castShadow = true;
|
||||
bottomFrame.receiveShadow = true;
|
||||
paintingGroup.add(bottomFrame);
|
||||
|
||||
const leftFrame = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, height, FRAME_DEPTH), frameMaterial);
|
||||
leftFrame.position.x = -width / 2 - frameThickness / 2;
|
||||
leftFrame.castShadow = true;
|
||||
leftFrame.receiveShadow = true;
|
||||
paintingGroup.add(leftFrame);
|
||||
|
||||
const rightFrame = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, height, FRAME_DEPTH), frameMaterial);
|
||||
rightFrame.position.x = width / 2 + frameThickness / 2;
|
||||
rightFrame.castShadow = true;
|
||||
rightFrame.receiveShadow = true;
|
||||
paintingGroup.add(rightFrame);
|
||||
|
||||
// 2. Create the picture canvases with textures
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
this.textures = imageUrls.map(url => textureLoader.load(url));
|
||||
this.currentTextureIndex = 0;
|
||||
|
||||
const pictureGeometry = new THREE.PlaneGeometry(width, height);
|
||||
|
||||
// Create two picture planes for cross-fading
|
||||
this.pictureBack = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex] }));
|
||||
this.pictureBack.position.z = 0.001;
|
||||
this.pictureBack.receiveShadow = true;
|
||||
paintingGroup.add(this.pictureBack);
|
||||
|
||||
this.pictureFront = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex], transparent: true, opacity: 0 }));
|
||||
this.pictureFront.position.z = 0.003; // Place slightly in front to avoid z-fighting
|
||||
this.pictureFront.receiveShadow = true;
|
||||
paintingGroup.add(this.pictureFront);
|
||||
|
||||
return paintingGroup;
|
||||
}
|
||||
|
||||
setPicture(index) {
|
||||
if (this.isTransitioning || index === this.currentTextureIndex || index < 0 || index >= this.textures.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isTransitioning = true;
|
||||
this.transitionStartTime = Date.now();
|
||||
|
||||
// Front plane fades in with the new texture
|
||||
this.pictureFront.material.map = this.textures[index];
|
||||
this.pictureFront.material.opacity = 0;
|
||||
|
||||
this.nextTextureIndex = index;
|
||||
}
|
||||
|
||||
nextPicture() {
|
||||
this.setPicture((this.currentTextureIndex + 1) % this.textures.length);
|
||||
}
|
||||
|
||||
update() {
|
||||
if (!this.isTransitioning) {
|
||||
if (Math.random() > 1.0 - IMAGE_CHANGE_CHANCE) {
|
||||
this.nextPicture();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const elapsedTime = Date.now() - this.transitionStartTime;
|
||||
const progress = Math.min(elapsedTime / TRANSITION_DURATION, 1.0);
|
||||
this.pictureFront.material.opacity = progress;
|
||||
|
||||
if (progress >= 1.0) {
|
||||
this.isTransitioning = false;
|
||||
this.currentTextureIndex = this.nextTextureIndex;
|
||||
|
||||
// Reset for next transition
|
||||
this.pictureBack.material.map = this.textures[this.currentTextureIndex];
|
||||
this.pictureFront.material.opacity = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import * as THREE from 'three';
|
||||
import { state } from '../state.js';
|
||||
import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
|
||||
|
||||
export function createMagicMirror(x, z, rotY) {
|
||||
// --- Materials ---
|
||||
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513, shininess: 40, specular: 0x333333 });
|
||||
const metalMaterial = new THREE.MeshPhongMaterial({ color: 0xd4af37, shininess: 100, specular: 0xeeeeff }); // Gold-like
|
||||
|
||||
const mirrorGroup = new THREE.Group();
|
||||
|
||||
// --- 1. Mirror Stand Base ---
|
||||
const baseWidth = 1.5;
|
||||
const baseHeight = 0.2;
|
||||
const baseDepth = 0.6;
|
||||
const baseGeo = new THREE.BoxGeometry(baseWidth, baseHeight, baseDepth);
|
||||
const base = new THREE.Mesh(baseGeo, frameMaterial);
|
||||
base.position.y = baseHeight / 2;
|
||||
base.castShadow = true;
|
||||
base.receiveShadow = true;
|
||||
mirrorGroup.add(base);
|
||||
|
||||
// --- 2. Stand Uprights ---
|
||||
const uprightHeight = 2.4;
|
||||
const uprightWidth = 0.15;
|
||||
const uprightGeo = new THREE.BoxGeometry(uprightWidth, uprightHeight, uprightWidth);
|
||||
|
||||
const createUpright = (posX) => {
|
||||
const upright = new THREE.Mesh(uprightGeo, frameMaterial);
|
||||
upright.position.set(posX, uprightHeight / 2, 0);
|
||||
upright.castShadow = true;
|
||||
upright.receiveShadow = true;
|
||||
return upright;
|
||||
};
|
||||
|
||||
const uprightOffset = baseWidth / 2 - 0.3;
|
||||
mirrorGroup.add(createUpright(-uprightOffset));
|
||||
mirrorGroup.add(createUpright(uprightOffset));
|
||||
|
||||
// --- 3. The Elliptical Mirror Surface (The "Screen") ---
|
||||
const mirrorRadius = 0.8; // Adjusted radius for scaling
|
||||
const mirrorGeo = new THREE.CircleGeometry(mirrorRadius, 64);
|
||||
|
||||
// --- 3a. The permanent reflective mirror surface ---
|
||||
const mirrorBackMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x051020, // Dark blue tint
|
||||
shininess: 100,
|
||||
specular: 0xcccccc,
|
||||
envMap: state.scene.background, // Reflect the room
|
||||
reflectivity: 0.9 // Increased reflectivity
|
||||
});
|
||||
const mirrorBack = new THREE.Mesh(mirrorGeo, mirrorBackMaterial);
|
||||
mirrorBack.position.y = 1.4; // Center height
|
||||
mirrorBack.position.z = 0.1; // Slightly forward in the frame
|
||||
mirrorBack.scale.set(1, 1.5, 1); // Scale Y to make it a tall ellipse
|
||||
mirrorGroup.add(mirrorBack);
|
||||
|
||||
// --- 3b. The video surface that appears when playing ---
|
||||
// This is what state.tvScreen will now refer to
|
||||
state.tvScreen = new THREE.Mesh(mirrorGeo, new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 }));
|
||||
state.tvScreen.position.copy(mirrorBack.position);
|
||||
state.tvScreen.position.z += 0.01; // Place it just in front of the reflective surface
|
||||
state.tvScreen.scale.copy(mirrorBack.scale);
|
||||
state.tvScreen.visible = false; // Start invisible
|
||||
mirrorGroup.add(state.tvScreen);
|
||||
|
||||
// --- 4. Ornate Elliptical Mirror Frame (Torus) ---
|
||||
const frameRadius = mirrorRadius;
|
||||
const frameTubeRadius = 0.04; // Made the rim thinner
|
||||
const frameRingGeo = new THREE.TorusGeometry(frameRadius, frameTubeRadius, 16, 100);
|
||||
const frameRing = new THREE.Mesh(frameRingGeo, metalMaterial);
|
||||
frameRing.position.copy(state.tvScreen.position);
|
||||
frameRing.scale.copy(state.tvScreen.scale); // Apply the same scale to the frame
|
||||
frameRing.castShadow = true;
|
||||
mirrorGroup.add(frameRing);
|
||||
|
||||
// --- 5. Light from the Mirror ---
|
||||
state.screenLight = new THREE.PointLight(0xffffff, 0, 10);
|
||||
state.screenLight.position.copy(state.tvScreen.position);
|
||||
state.screenLight.position.z += 0.3; // Position light in front of the mirror
|
||||
state.screenLight.castShadow = true;
|
||||
state.screenLight.shadow.mapSize.width = 1024;
|
||||
state.screenLight.shadow.mapSize.height = 1024;
|
||||
state.screenLight.shadow.camera.near = 0.2;
|
||||
state.screenLight.shadow.camera.far = 5;
|
||||
//mirrorGroup.add(state.screenLight);
|
||||
|
||||
// Position and rotate the entire group
|
||||
mirrorGroup.position.set(x, 0, z);
|
||||
mirrorGroup.rotation.y = rotY;
|
||||
|
||||
state.scene.add(mirrorGroup);
|
||||
}
|
||||
|
||||
export function turnTvScreenOff() {
|
||||
if (state.tvScreenPowered) {
|
||||
state.tvScreenPowered = false;
|
||||
setScreenEffect(2, () => {
|
||||
state.tvScreen.visible = false; // Hide the video surface on completion
|
||||
state.screenLight.intensity = 0.0;
|
||||
}); // Trigger power down effect
|
||||
}
|
||||
}
|
||||
|
||||
export function turnTvScreenOn() {
|
||||
if (state.tvScreen.material) {
|
||||
state.tvScreen.material.dispose();
|
||||
}
|
||||
|
||||
state.tvScreen.visible = true; // Make the video surface visible
|
||||
|
||||
// Use the shader material for video playback
|
||||
state.tvScreen.material = new THREE.ShaderMaterial({
|
||||
uniforms: {
|
||||
videoTexture: { value: state.videoTexture },
|
||||
u_effect_type: { value: 0.0 },
|
||||
u_effect_strength: { value: 0.0 },
|
||||
u_time: { value: 0.0 },
|
||||
},
|
||||
vertexShader: screenVertexShader,
|
||||
fragmentShader: screenFragmentShader,
|
||||
transparent: true,
|
||||
});
|
||||
|
||||
state.tvScreen.material.needsUpdate = true;
|
||||
|
||||
if (!state.tvScreenPowered) {
|
||||
state.tvScreenPowered = true;
|
||||
setScreenEffect(1); // Trigger power on effect
|
||||
}
|
||||
}
|
||||
|
||||
export function setScreenEffect(effectType, onComplete) {
|
||||
const material = state.tvScreen.material;
|
||||
if (!material.uniforms) return;
|
||||
|
||||
state.screenEffect.active = true;
|
||||
state.screenEffect.type = effectType;
|
||||
state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
|
||||
state.screenEffect.onComplete = onComplete;
|
||||
}
|
||||
|
||||
export function updateScreenEffect() {
|
||||
if (!state.screenEffect.active) return;
|
||||
const material = state.tvScreen.material;
|
||||
if (!material.uniforms) return;
|
||||
|
||||
const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
|
||||
const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
|
||||
const easedProgress = state.screenEffect.easing(progress);
|
||||
|
||||
material.uniforms.u_effect_type.value = state.screenEffect.type;
|
||||
material.uniforms.u_effect_strength.value = easedProgress;
|
||||
|
||||
if (progress >= 1.0) {
|
||||
state.screenEffect.active = false;
|
||||
material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0;
|
||||
if (state.screenEffect.onComplete) {
|
||||
state.screenEffect.onComplete();
|
||||
}
|
||||
material.uniforms.u_effect_type.value = 0.0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
// This file will contain the Three.js code for creating and animating the medieval musicians on the stage.
|
||||
@@ -0,0 +1 @@
|
||||
// This file will contain the Three.js code for creating rows of pews (seats) on the sides of the cathedral.
|
||||
@@ -0,0 +1,142 @@
|
||||
import * as THREE from 'three';
|
||||
import { state } from '../state.js';
|
||||
import wallTextureUrl from '/textures/stone_wall.png';
|
||||
|
||||
export function createRoomWalls() {
|
||||
// --- Cathedral Dimensions ---
|
||||
const length = 40;
|
||||
const naveWidth = 12;
|
||||
const aisleWidth = 6;
|
||||
const totalWidth = naveWidth + 2 * aisleWidth;
|
||||
|
||||
const aisleHeight = 8;
|
||||
const naveHeight = 15;
|
||||
const roofPeakHeight = 6; // Additional height for the nave's vaulted roof peak
|
||||
|
||||
// --- Pillar and Arch Dimensions ---
|
||||
const pillarSize = 1.0;
|
||||
const pillarHeight = aisleHeight;
|
||||
const numPillars = 5; // Number of pillars along each side
|
||||
const pillarSpacing = length / (numPillars + 1);
|
||||
|
||||
// --- Materials and Textures ---
|
||||
const wallTexture = state.loader.load(wallTextureUrl);
|
||||
wallTexture.wrapS = THREE.RepeatWrapping;
|
||||
wallTexture.wrapT = THREE.RepeatWrapping;
|
||||
|
||||
const wallMaterial = new THREE.MeshPhongMaterial({
|
||||
map: wallTexture,
|
||||
side: THREE.DoubleSide,
|
||||
shininess: 5,
|
||||
specular: 0x111111
|
||||
});
|
||||
|
||||
// --- Geometry Definitions ---
|
||||
const pillarGeo = new THREE.BoxGeometry(pillarSize, pillarHeight, pillarSize);
|
||||
|
||||
// --- Object Creation Functions ---
|
||||
const createMesh = (geometry, material, position, rotation = new THREE.Euler()) => {
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.copy(position);
|
||||
mesh.rotation.copy(rotation);
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
state.scene.add(mesh);
|
||||
return mesh;
|
||||
};
|
||||
|
||||
// --- Build the Cathedral ---
|
||||
|
||||
// 1. Back Wall
|
||||
const backWallGeo = new THREE.PlaneGeometry(totalWidth, aisleHeight);
|
||||
const backWallMat = wallMaterial.clone();
|
||||
backWallMat.map = wallTexture.clone();
|
||||
backWallMat.map.repeat.set(totalWidth / 4, aisleHeight / 4);
|
||||
createMesh(backWallGeo, backWallMat, new THREE.Vector3(0, aisleHeight / 2, -length / 2));
|
||||
|
||||
// 2. Outer Aisle Walls
|
||||
const outerWallGeo = new THREE.PlaneGeometry(length, aisleHeight);
|
||||
const outerWallMat = wallMaterial.clone();
|
||||
outerWallMat.map = wallTexture.clone();
|
||||
outerWallMat.map.repeat.set(length / 4, aisleHeight / 4);
|
||||
createMesh(outerWallGeo, outerWallMat, new THREE.Vector3(-totalWidth / 2, aisleHeight / 2, 0), new THREE.Euler(0, Math.PI / 2, 0));
|
||||
createMesh(outerWallGeo, outerWallMat, new THREE.Vector3(totalWidth / 2, aisleHeight / 2, 0), new THREE.Euler(0, -Math.PI / 2, 0));
|
||||
|
||||
// 3. Aisle Roofs (Flat)
|
||||
const aisleRoofGeo = new THREE.PlaneGeometry(aisleWidth, length);
|
||||
const aisleRoofMat = wallMaterial.clone();
|
||||
aisleRoofMat.map = wallTexture.clone();
|
||||
aisleRoofMat.map.repeat.set(aisleWidth / 4, length / 4);
|
||||
createMesh(aisleRoofGeo, aisleRoofMat, new THREE.Vector3(-naveWidth / 2 - aisleWidth / 2, aisleHeight, 0), new THREE.Euler(-Math.PI / 2, 0, 0));
|
||||
createMesh(aisleRoofGeo, aisleRoofMat, new THREE.Vector3(naveWidth / 2 + aisleWidth / 2, aisleHeight, 0), new THREE.Euler(-Math.PI / 2, 0, 0));
|
||||
|
||||
// 4. Pillars and Arcades
|
||||
const arcadeWallHeight = aisleHeight - pillarHeight;
|
||||
const arcadeWallGeo = new THREE.PlaneGeometry(pillarSpacing - pillarSize, arcadeWallHeight);
|
||||
const arcadeWallMat = wallMaterial.clone();
|
||||
arcadeWallMat.map = wallTexture.clone();
|
||||
arcadeWallMat.map.repeat.set((pillarSpacing - pillarSize) / 4, arcadeWallHeight / 4);
|
||||
|
||||
for (let i = 0; i <= numPillars; i++) {
|
||||
const z = -length / 2 + pillarSpacing * (i + 0.5);
|
||||
// Add wall sections between pillars
|
||||
if (i < numPillars) {
|
||||
createMesh(arcadeWallGeo, arcadeWallMat, new THREE.Vector3(-naveWidth / 2, pillarHeight + arcadeWallHeight / 2, z));
|
||||
createMesh(arcadeWallGeo, arcadeWallMat, new THREE.Vector3(naveWidth / 2, pillarHeight + arcadeWallHeight / 2, z));
|
||||
}
|
||||
|
||||
const pillarZ = -length / 2 + pillarSpacing * (i + 1) - pillarSize / 2;
|
||||
// Left side pillars
|
||||
createMesh(pillarGeo, wallMaterial, new THREE.Vector3(-naveWidth / 2 - pillarSize, pillarHeight / 2, pillarZ));
|
||||
// Right side pillars
|
||||
createMesh(pillarGeo, wallMaterial, new THREE.Vector3(naveWidth / 2 + pillarSize, pillarHeight / 2, pillarZ));
|
||||
}
|
||||
|
||||
// 5. Clerestory (Upper Nave Walls)
|
||||
const clerestoryHeight = naveHeight - aisleHeight;
|
||||
const clerestoryGeo = new THREE.PlaneGeometry(length, clerestoryHeight);
|
||||
const clerestoryMat = wallMaterial.clone();
|
||||
clerestoryMat.map = wallTexture.clone();
|
||||
clerestoryMat.map.repeat.set(length / 4, clerestoryHeight / 4);
|
||||
// Left and Right Clerestory walls
|
||||
createMesh(clerestoryGeo, clerestoryMat, new THREE.Vector3(-naveWidth / 2, aisleHeight + clerestoryHeight / 2, 0), new THREE.Euler(0, -Math.PI/2, 0));
|
||||
createMesh(clerestoryGeo, clerestoryMat, new THREE.Vector3(naveWidth / 2, aisleHeight + clerestoryHeight / 2, 0), new THREE.Euler(0, Math.PI/2, 0));
|
||||
|
||||
// Upper part of the back wall (for the nave)
|
||||
const backClerestoryGeo = new THREE.PlaneGeometry(naveWidth, clerestoryHeight);
|
||||
const backClerestoryMat = wallMaterial.clone();
|
||||
backClerestoryMat.map = wallTexture.clone();
|
||||
backClerestoryMat.map.repeat.set(naveWidth / 4, clerestoryHeight / 4);
|
||||
createMesh(backClerestoryGeo, backClerestoryMat, new THREE.Vector3(0, aisleHeight + clerestoryHeight / 2, -length / 2));
|
||||
|
||||
// 6. Nave's Vaulted Roof
|
||||
const roofPanelWidth = Math.sqrt(Math.pow(naveWidth / 2, 2) + Math.pow(roofPeakHeight, 2));
|
||||
const roofAngle = Math.atan2(roofPeakHeight, naveWidth / 2);
|
||||
const roofGeo = new THREE.PlaneGeometry(roofPanelWidth, length); // Swapped width and length
|
||||
const roofMat = wallMaterial.clone();
|
||||
roofMat.map = wallTexture.clone();
|
||||
roofMat.map.repeat.set(roofPanelWidth / 4, length / 4);
|
||||
|
||||
// Left and Right roof panels
|
||||
createMesh(roofGeo, roofMat,
|
||||
new THREE.Vector3(-naveWidth / 4, naveHeight + roofPeakHeight / 2, 0),
|
||||
new THREE.Euler(Math.PI / 2, roofAngle, 0) // Flipped the roof right side up
|
||||
);
|
||||
createMesh(roofGeo, roofMat,
|
||||
new THREE.Vector3(naveWidth / 4, naveHeight + roofPeakHeight / 2, 0),
|
||||
new THREE.Euler(Math.PI / 2, -roofAngle, 0) // Flipped the roof right side up
|
||||
);
|
||||
|
||||
// 7. Back gable wall (triangle part)
|
||||
const gableShape = new THREE.Shape();
|
||||
gableShape.moveTo(-naveWidth / 2, naveHeight);
|
||||
gableShape.lineTo(naveWidth / 2, naveHeight);
|
||||
gableShape.lineTo(0, naveHeight + roofPeakHeight);
|
||||
const gableGeo = new THREE.ShapeGeometry(gableShape);
|
||||
const gableMat = wallMaterial.clone();
|
||||
gableMat.map = wallTexture.clone();
|
||||
gableMat.map.repeat.set(naveWidth / 8, roofPeakHeight / 8);
|
||||
createMesh(gableGeo, gableMat, new THREE.Vector3(0, 0, -length / 2));
|
||||
|
||||
// Note: crawlSurfaces and landingSurfaces might need to be updated if spiders/rats are used.
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import * as THREE from 'three';
|
||||
import { state } from '../state.js';
|
||||
import { createRoomWalls } from './room-walls.js';
|
||||
import floorTextureUrl from '/textures/stone_floor.png';
|
||||
|
||||
// --- Scene Modeling Function ---
|
||||
export function createSceneObjects() {
|
||||
// --- Materials (MeshPhongMaterial) ---
|
||||
|
||||
// --- 1. Floor --- (Resized to match the new cathedral dimensions)
|
||||
const floorWidth = 24;
|
||||
const floorLength = 40;
|
||||
const floorGeometry = new THREE.PlaneGeometry(floorWidth, floorLength);
|
||||
const floorTexture = state.loader.load(floorTextureUrl);
|
||||
floorTexture.wrapS = THREE.RepeatWrapping;
|
||||
floorTexture.wrapT = THREE.RepeatWrapping;
|
||||
floorTexture.repeat.set(floorWidth / 2, floorLength / 2); // Adjust texture repeat for new size
|
||||
const floorMaterial = new THREE.MeshPhongMaterial({ map: floorTexture, color: 0xaaaaaa, shininess: 5 });
|
||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floor.rotation.x = -Math.PI / 2;
|
||||
floor.position.y = 0;
|
||||
floor.receiveShadow = true;
|
||||
state.scene.add(floor);
|
||||
|
||||
createRoomWalls(); // This will need to be updated to create cathedral walls.
|
||||
|
||||
// 3. Lighting (Minimal and focused)
|
||||
const ambientLight = new THREE.AmbientLight(0x606060, 1.5); // Increased ambient light for a larger space
|
||||
state.scene.add(ambientLight);
|
||||
|
||||
// Add a HemisphereLight for more natural, general illumination in a large space.
|
||||
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.7);
|
||||
state.scene.add(hemisphereLight);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
// This file will contain the Three.js code for creating the stage at the front of the cathedral.
|
||||
@@ -0,0 +1 @@
|
||||
// This file will contain the Three.js code for creating colorful stained glass windows with light effects.
|
||||
@@ -0,0 +1,47 @@
|
||||
import * as THREE from 'three';
|
||||
import { state } from '../state.js';
|
||||
import tableTextureUrl from '/textures/wood.png';
|
||||
|
||||
export function createTable(x, y, z, rotY) {
|
||||
const woodMaterial = new THREE.MeshPhongMaterial({
|
||||
map: state.loader.load(tableTextureUrl),
|
||||
shininess: 10,
|
||||
specular: 0x222222
|
||||
});
|
||||
|
||||
const tableTopGeo = new THREE.BoxGeometry(1.5, 0.1, 0.8);
|
||||
const tableTop = new THREE.Mesh(tableTopGeo, woodMaterial);
|
||||
tableTop.position.y = 0.5;
|
||||
tableTop.castShadow = true;
|
||||
tableTop.receiveShadow = true;
|
||||
|
||||
// Table Legs
|
||||
const legThickness = 0.1;
|
||||
const legHeight = 0.5; // Same height as tableTop.position.y
|
||||
const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
|
||||
|
||||
const legOffset = (1.5 / 2) - (legThickness * 1.5); // Half table width - some margin
|
||||
const depthOffset = (0.8 / 2) - (legThickness * 1.5); // Half table depth - some margin
|
||||
|
||||
const createLeg = (lx, lz) => {
|
||||
const leg = new THREE.Mesh(legGeometry, woodMaterial);
|
||||
leg.position.set(lx, legHeight / 2, lz);
|
||||
leg.castShadow = true;
|
||||
leg.receiveShadow = true;
|
||||
return leg;
|
||||
};
|
||||
|
||||
const table = new THREE.Group();
|
||||
table.add(tableTop);
|
||||
// Add the four legs
|
||||
table.add(createLeg(-legOffset, depthOffset));
|
||||
table.add(createLeg(legOffset, depthOffset));
|
||||
table.add(createLeg(-legOffset, -depthOffset));
|
||||
table.add(createLeg(legOffset, -depthOffset));
|
||||
|
||||
table.position.set(x, y, z);
|
||||
table.rotation.y = rotY;
|
||||
state.scene.add(table);
|
||||
|
||||
return table;
|
||||
}
|
||||
Reference in New Issue
Block a user