I am currently exploring the world of 3D graphics by creating a building in WebGL using the THREE.js framework.
Having no prior experience with tools like DX or OpenGL, I dove right into the project with the following code snippet.
var windowTexture = THREE.ImageUtils.loadTexture('./images/windowside.png');
windowTexture.repeat.set(1,2);
var windowMaterial = new THREE.MeshBasicMaterial({ map: windowTexture});
var buildingMaterial = new THREE.MeshFaceMaterial([
windowMaterial,
windowMaterial,
windowMaterial,
windowMaterial,
topMaterial,
new THREE.MeshBasicMaterial({color: 0xffff00})
]);
Next, I created a BoxGeometry for my building.
var geometry = new THREE.BoxGeometry(0.3, 0.3, 1);
var building = new THREE.Mesh(geometry, buildingMaterial);
After adding it to the scene, I noticed that the texture on the box was not as expected. The orientation seemed off, resulting in an incorrect display:
https://i.sstatic.net/t9dN0.png
It appears that each face has a different orientation, prompting me to question if I am employing the correct technique for applying multiple textures to a Box.
Is there a more optimal approach for achieving this?
How can I rectify this issue and ensure the textures align correctly?
Any guidance would be greatly appreciated. Thank you!