@Peter_Devine Thanks, your suggested approach worked correctly. I have implemented those changes and trying to apply texture on walls as well. I am not to set proper coordinates. please guide how can we set the texture on walls. 3D model or glb file is not available. I am trying to replicate this.
current JS code
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { informazione, data } from "./data.js";
let camera, controls;
let renderer;
let scene;
let raycaster;
init();
animate();
function init() {
const container = document.getElementById("container");
renderer = new THREE.WebGLRenderer();
raycaster = new THREE.Raycaster();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
90,
window.innerWidth / window.innerHeight,
0.1,
100
);
camera.position.z = 0.01;
controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;
controls.enableDamping = true;
controls.rotateSpeed = -0.25;
const textures = [];
const transparentImageUrls = [
"https://res.cloudinary.com/ecommerceapi/image/upload/v1711982339/LivingRoom/Transparent/cutt_left.webp",
"https://res.cloudinary.com/ecommerceapi/image/upload/v1711982324/LivingRoom/Transparent/cutt_right.webp",
"https://res.cloudinary.com/ecommerceapi/image/upload/v1711982343/LivingRoom/Transparent/cutt_top.webp",
"https://res.cloudinary.com/ecommerceapi/image/upload/v1711982354/LivingRoom/Transparent/cutt_bottom.webp",
"https://res.cloudinary.com/ecommerceapi/image/upload/v1711982360/LivingRoom/Transparent/cutt_back.webp",
"https://res.cloudinary.com/ecommerceapi/image/upload/v1711982363/LivingRoom/Transparent/cutt_front.webp",
];
const textureLoader = new THREE.TextureLoader();
for (let i = 0; i < 6; i++) {
const texture = textureLoader.load(transparentImageUrls[i]);
texture.colorSpace = THREE.SRGBColorSpace;
textures.push(texture);
}
const materials = [];
for (let i = 0; i < 6; i++) {
materials.push(
new THREE.MeshBasicMaterial({ map: textures[i], transparent: true })
);
}
const skyBox = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materials);
skyBox.geometry.scale(1, 1, -1);
scene.add(skyBox);
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update(); // required when damping is enabled
renderer.render(scene, camera);
}
const floorGeometry = new THREE.PlaneGeometry(
informazione.floor_tile_width,
informazione.floor_tile_height
);
const floorMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
opacity: 0, // Initially invisible
});
const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
floorMesh.name = "Floor"; // Assigning a name to the floor mesh
floorMesh.position.y = -1; // Set the floor below the camera
floorMesh.rotation.x = -Math.PI / 2; // Rotate the floor to be horizontal
scene.add(floorMesh);
const wall1Geometry = new THREE.PlaneGeometry(
informazione.wall_tile_width,
informazione.wall_tile_height
);
const wall1Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
opacity: 0, // Initially invisible
});
const wall1Mesh = new THREE.Mesh(wall1Geometry, wall1Material);
wall1Mesh.name = "Wall1"; // Assigning a name to the mesh
wall1Mesh.position.set(1, -1, 1);
wall1Mesh.rotation.x = -(Math.PI / 180) * 180; // Rotate the wall
scene.add(wall1Mesh);
const wall2Geometry = new THREE.PlaneGeometry(
informazione.wall_tile_width,
informazione.wall_tile_height
);
const wall2Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
opacity: 0, // Initially invisible
});
const wall2Mesh = new THREE.Mesh(wall2Geometry, wall2Material);
wall2Mesh.name = "Wall2"; // Assigning a name to the mesh
wall2Mesh.position.set(75, 0, 75);
// wall2Mesh.rotation.y = -Math.PI; // Rotate the wall
scene.add(wall2Mesh);
const wall3Geometry = new THREE.PlaneGeometry(
informazione.wall_tile_width,
informazione.wall_tile_height
);
const wall3Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
opacity: 0, // Initially invisible
});
const wall3Mesh = new THREE.Mesh(wall3Geometry, wall3Material);
wall3Mesh.name = "Wall3"; // Assigning a name to the mesh
wall3Mesh.position.set(2, 5, 10);
wall3Mesh.rotation.y = -Math.PI; // Rotate the wall
scene.add(wall3Mesh);
function onMouseClick(event) {
// Calculate mouse position in normalized device coordinates
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
const textureLoader = new THREE.TextureLoader();
// Set the raycaster to cast from the camera to the mouse position
raycaster.setFromCamera(mouse, camera);
// Find intersecting objects
const intersects = raycaster.intersectObjects(scene.children, true);
// If there are intersections, handle them
if (intersects.length > 0) {
// Check if the intersection is with the floor
const floorIntersect = intersects.find(
(intersection) => intersection.object.name === "Floor"
);
if (floorIntersect) {
// Set the floor tile image
const floorTexture = textureLoader.load(
"https://res.cloudinary.com/ecommerceapi/image/upload/v1712137072/LivingRoom/FloorTiles/1678707660-Twilight-Grey.jpg"
);
floorTexture.colorSpace = THREE.SRGBColorSpace;
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
// Adjust the repeat value according to your tile size
floorTexture.repeat.set(4, 4);
// Apply the texture to the floor
floorIntersect.object.material.map = floorTexture;
floorIntersect.object.material.opacity = 1; // Adjust opacity as needed
floorIntersect.object.material.transparent = true; // Set material to transparent
floorIntersect.object.material.needsUpdate = true;
console.log("Floor tile set");
}
const wallIntersect = intersects.find(
(intersection) => intersection.object.name === "Wall1"
);
if (wallIntersect) {
// Set the wall tile image
const wallTexture = textureLoader.load(
"https://res.cloudinary.com/ecommerceapi/image/upload/v1713678490/LivingRoom/FloorTiles/2.webp"
);
wallTexture.colorSpace = THREE.SRGBColorSpace;
wallTexture.wrapS = THREE.RepeatWrapping;
wallTexture.wrapT = THREE.RepeatWrapping;
// Adjust the repeat value according to your tile size
wallTexture.repeat.set(8, 8);
// Apply the texture to the floor
wallIntersect.object.material.map = wallTexture;
wallIntersect.object.material.opacity = 1; // Adjust opacity as needed
wallIntersect.object.material.transparent = true; // Set material to transparent
wallIntersect.object.material.needsUpdate = true;
console.log("Wall 1 tile set");
}
const wall2Intersect = intersects.find(
(intersection) => intersection.object.name === "Wall2"
);
if (wall2Intersect) {
// Set the wall tile image
const wallTexture = textureLoader.load(
"https://res.cloudinary.com/ecommerceapi/image/upload/v1713678490/LivingRoom/FloorTiles/1.webp"
);
wallTexture.colorSpace = THREE.SRGBColorSpace;
wallTexture.wrapS = THREE.RepeatWrapping;
wallTexture.wrapT = THREE.RepeatWrapping;
// Adjust the repeat value according to your tile size
wallTexture.repeat.set(8, 8);
// Apply the texture to the floor
wall2Intersect.object.material.map = wallTexture;
wall2Intersect.object.material.opacity = 1; // Adjust opacity as needed
wall2Intersect.object.material.transparent = true; // Set material to transparent
wall2Intersect.object.material.needsUpdate = true;
console.log("Wall 2 tile set");
}
const wall3Intersect = intersects.find(
(intersection) => intersection.object.name === "Wall3"
);
if (wall3Intersect) {
// Set the wall tile image
const wallTexture = textureLoader.load(
"https://res.cloudinary.com/ecommerceapi/image/upload/v1713678490/LivingRoom/FloorTiles/3.webp"
);
wallTexture.colorSpace = THREE.SRGBColorSpace;
wallTexture.wrapS = THREE.RepeatWrapping;
wallTexture.wrapT = THREE.RepeatWrapping;
// Adjust the repeat value according to your tile size
wallTexture.repeat.set(8, 8);
// Apply the texture to the floor
wall3Intersect.object.material.map = wallTexture;
wall3Intersect.object.material.opacity = 1; // Adjust opacity as needed
wall3Intersect.object.material.transparent = true; // Set material to transparent
wall3Intersect.object.material.needsUpdate = true;
console.log("Wall 3 tile set");
}
}
}
document.addEventListener("click", onMouseClick, false);
data,js file :
var informazione = {
floor_tile_w: 6,
floor_tile_h: 12,
wall_tile_w: 12,
wall_tile_h: 6,
camera_fov: 75,
camera_position_x: 0,
camera_position_y: 0,
camera_position_z: 3,
intensity: 0.98,
R_intensity: 0.01,
// wall_tile_width: 2400,
// wall_tile_height: 1200,
wall_tile_width:6,
wall_tile_height:6,
// floor_tile_width: 2400, //actual data
// floor_tile_height: 1200, //actual data
floor_tile_width: 8,
floor_tile_height: 12,
};
var data = [
{
name: "Wall 1",
face: "wall",
width: 285,
height: 285,
"position-x": 2,
"position-y": 102,
"position-z": 120,
rotateX: (Math.PI / 180) * 180,
color: 0xff0000,
"rotation-y": Math.PI,
},
{
name: "Wall 2",
face: "wall",
width: 285,
height: 285,
"position-x": 107,
"position-y": 102,
"position-z": 170,
rotateX: (Math.PI / 180) * 180,
color: 0x00ff00,
"rotation-y": -Math.PI / 2,
},
{
name: "Wall 3",
face: "wall",
width: 285,
height: 285,
"position-x": -79,
"position-y": 102,
"position-z": -101,
rotateX: (Math.PI / 180) * 180,
color: 0xfff000,
"rotation-y": 0,
},
{
name: "Floor",
face: "floor",
width: 1500,
height: 1500,
"position-x": 24,
"position-y": -101,
"position-z": 0,
"rotation-x": Math.PI / 2,
},
];
var angolo = [
{
name: "Corner 1",
type: "corner",
width: 0.3,
height: 106.5,
depth: 0.3,
"position-x": 102,
"position-y": 15,
"position-z": 114,
color: 0x333333,
"rotation-y": Math.PI / 4,
},
];
export {data, informazione, angolo};
when I tried to apply texture on left wall. it overlaps the floor texture.
here is the codepen link of current code : https://codepen.io/Vatsal-Pandya-the-solid/pen/dyLQayZ
@PavelBoytchev @Peter_Devine @mjurczyk can you please guide how can we set the texture on the walls as the reference link. I’m new to ThreeJS and trying to understand the coordinates. Sorry for asking so many questions.
