<div style="margin-bottom: 200px">
<a href="#" onclick="cambio()"> sdsadasdas</a>
</div>
<div id="container"></div>
<div id="info"> </div>
When I click on a button, I want to change the image dynamically in an HTML element using three.js.
<!-- <script src="three.min.js"></script> -->
<script>
var camera, scene, renderer;
var texture_placeholder,
isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
var imagen='HabitacionPrincipal'
init(imagen);
function cambio(){
//Any code that needs to be inserted here to dynamically change the image?
}
function init(imagen) {
var container, mesh;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );
console.log(imagen)
var material = new THREE.MeshBasicMaterial( {
map: THREE.ImageUtils.loadTexture( imagen+'.jpg' )
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
</script>
To update the image with a different one, I need to select it beforehand.
I encountered some challenges while attempting this and received help from the following post:
Threejs Change image at runtime