Trying to apply a texture to a mesh in three.js:
Initializing variables:
var container, stats;
var camera, scene, projector, raycaster, renderer;
var mouse = new THREE.Vector2(), INTERSECTED;
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0,
target = new THREE.Vector3();
init();
animate();
Setting up the scene:
function init() {
// Code to initialize the scene
}
Now, attempting to change the texture on the mesh using a button:
function newTexture() {
sphere.material.map = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00004.jpg");
sphere.material.map.needsUpdate = true;
}
Alternatively:
texture2 = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00004.jpg");
function newTexture() {
background = new THREE.MeshBasicMaterial({map: texture2});
}
Encountering issues with texture change, seeking assistance to troubleshoot. Apologies for the novice question. Thank you!
UPDATE: FULL CODE PAGE
// Full code block omitted for brevity