I am creating a room like structure for which I create some vertices and then faces and apply a MeshBasicMaterial to the Geometry.
In the material I am applying a texture for wall.
Now, the texture applies correctly on the sides but, it doesn’t get applied on back and front.
The code is
var scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xBBE0FB, 500, 10000 );
// create a camera, which defines where we’re looking at.
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
renderer.setClearColor( scene.fog.color );
document.querySelector(container).prepend(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
var sceneGeometry = new THREE.Geometry();
sceneGeometry.verticesNeedUpdate = true;
sceneGeometry.vertices.push(new THREE.Vector3(-18, -7.19, 0)); //0
sceneGeometry.vertices.push(new THREE.Vector3(18, 2.25, 0)); //1
sceneGeometry.vertices.push(new THREE.Vector3(-18, 2.25, 0)); //2
sceneGeometry.vertices.push(new THREE.Vector3(18, -7.19, 0)); //3
sceneGeometry.vertices.push(new THREE.Vector3(18, 0, -18)); //4
sceneGeometry.vertices.push(new THREE.Vector3(18, -7.19, -18)); //5
sceneGeometry.vertices.push(new THREE.Vector3(-18, 0, -18)); //6
sceneGeometry.vertices.push(new THREE.Vector3(-18, -7.19, -18)); //7
// right
sceneGeometry.faces.push(new THREE.Face3(0, 1, 2)); //face 1 outer
sceneGeometry.faces.push(new THREE.Face3(0, 3, 1)); //face 2 outer
sceneGeometry.faces.push(new THREE.Face3(0, 2, 1)); //face 1 inner
sceneGeometry.faces.push(new THREE.Face3(0, 1, 3)); //face 2 inner
// back
sceneGeometry.faces.push(new THREE.Face3(5,1,4)); //face 3 outer
sceneGeometry.faces.push(new THREE.Face3(5,3,1)); //face 4 outer
sceneGeometry.faces.push(new THREE.Face3(5,4,1)); //face 3 inner
sceneGeometry.faces.push(new THREE.Face3(5,1,3)); //face 4 inner
// left
sceneGeometry.faces.push(new THREE.Face3(5, 6, 4)); //face 5 outer
sceneGeometry.faces.push(new THREE.Face3(5, 7, 6)); //face 6 outer
sceneGeometry.faces.push(new THREE.Face3(5, 4, 6)); //face 5 inner
sceneGeometry.faces.push(new THREE.Face3(5, 6, 7)); //face 6 inner
// front
sceneGeometry.faces.push(new THREE.Face3(7, 2, 6)); //face 7 outer
sceneGeometry.faces.push(new THREE.Face3(7, 0, 2)); //face 8 outer
sceneGeometry.faces.push(new THREE.Face3(7, 6, 2)); //face 7 inner
sceneGeometry.faces.push(new THREE.Face3(7, 2, 0)); //face 8 inner
// floor
sceneGeometry.faces.push(new THREE.Face3(7, 3, 5)); //face 7 outer
sceneGeometry.faces.push(new THREE.Face3(7, 0, 3)); //face 8 outer
// calculate the normals for shading
sceneGeometry.computeFaceNormals();
var Texture = new THREE.TextureLoader().load(‘img/wall.jpg’);
createUV(); // code same as the answer in https://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate
var CubeMaterial = new THREE.MeshBasicMaterial({ map: Texture });
CubeMaterial.map.wrapS = THREE.MirroredRepeatWrapping ;
CubeMaterial.map.wrapT = THREE.MirroredRepeatWrapping ;
CubeMaterial.map.offset.set(0,0);
CubeMaterial.map.repeat.set(3,3);
CubeMaterial.side = THREE.DoubleSide;
Building_mesh = new THREE.Mesh(sceneGeometry, CubeMaterial);
Building_mesh.name = ‘cube’;
Building_mesh.vertexColors = true;
scene.add(Building_mesh);
camera.position.x = -96.55364463477041;
camera.position.y = 8.689551145919605;
camera.position.z = -1.253198506983857;
camera.lookAt(scene.position);
// add the output of the renderer to the html element
document.querySelector(’#canvas’).prepend(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
// call the render function
render();