Working on my latest project using Three.js to create a virtual model of a house. The main purpose is to showcase the design to an architect for further discussion. The interactive aspect allows users to walk through the home virtually on this website. To navigate, use arrow keys for horizontal movement relative to the grass, W/S keys for up/down, and A/D keys to change the viewing angle.
Check it out here
One issue I encountered was the inconsistency in texture appearance on walls depending on the viewing angle. This discrepancy became apparent when comparing the external view to the internal view as shown in the image below. It seems like there's a specific problem with how I set up the panels, causing this visual distortion. My goal now is to find a solution to ensure the textures display consistently across different viewpoints.
https://i.sstatic.net/DzgMy.png
I believe the key lies in modifying the material settings for the panels. Below is a snippet of the code where I define materials and apply them to create the panels within the scene:
var materialArray = new Object();
function makeMaterial2(filename, repeatX, repeatY)
{
var m = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( filename ), transparent: true, opacity: 0.9, color: 0xffffff });
return m;
}
materialArray["rDoor"] = makeMaterial2("doorRight.png",false,false);
materialArray["crDoor"] = makeMaterial2("doorRightClapboard.png",false,false);
function drawPanel2(x,y,z,x2,y2,z2,str)
{
var cubegeometry = new THREE.BoxGeometry(Math.abs(x-x2),Math.abs(y-y2),Math.abs(z-z2));
var cube = new THREE.Mesh(cubegeometry, materialArray[str]);
cube.position.set((x+x2)/2,(y+y2)/2,(z+z2)/2);
return cube;
}
scene.add(drawPanel2(-10,level,front,0,level+height,front,"rDoor"));
scene.add(drawPanel2(-10,level,front+margin,0,level+height,front+margin,"crDoor"));