I am currently working on creating a curved wall using a vertices array in three JS. The array contains some base vertices in 2D which represent the bottom vertices of the wall. These vertices include the center, lower, and upper points, making it a two-faced wall. By adding a wall height to these vertices, I convert the 2D array to a 3D wall.
Below you can find the code and a working fiddle for reference.
/**
* Created by Singh on 7/30/2018.
*/
var renderer, scene, camera;
init();
animate();
function init() {
// Walls Geometry Function
wallsGeometry = function(totalPoints){
// Implementation Details
};
// Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 400;
// Scene Setup
scene = new THREE.Scene();
// Renderer Setup
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Adding Event Listener for Mouse Move
renderer.domElement.addEventListener("mousemove", onMouseMove);
// Initializing Points
initPoints();
// Creating Walls Geometry
var mesh = new wallsGeometry(totalPoints);
// Creating Arrow
createArrow();
// Adding Walls to the Scene
scene.add(mesh[0]);
scene.add(mesh[1]);
// Orbit Controls
var Orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
Orbitcontrols.update();
}
// Render Function
function render() {
renderer.render(scene, camera);
}
// Animate Function
function animate() {
requestAnimationFrame(animate);
render();
}
https://jsfiddle.net/simar_aneja/fsmw8znq/6/
The fiddle demonstrates the successful building of the wall. I am now looking to add UVs to the bufferGeometry in order to attach different textures to different sides of the wall. I have attempted to convert it to geometry and calculate faceVertexUVs, but this approach seems ineffective. I am seeking suggestions on how to proceed further, specifically in attaching different textures to the front and top sides of the wall. Additionally, I aim for a solution where the UVs are calculated dynamically based on the length of the vertices, accommodating any number of vertices that may be added in the future.
Thank you for your help.