Attempting to implement a panoramic viewer code using three.js version r68. To utilize the raycaster function, upgraded the three.js version to r121. However, encountered an issue while modifying the code:
var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
init();
animate();
});
Changed it to:
var loader = new THREE.TextureLoader();
loader.load(
'img/demo.jpg',
function(texture){
var material = new THREE.MeshBasicMaterial({map: texture});
},
function(){
init();
animate();
},
function ( err ) {
console.error( 'An error occurred.' );
}
);
No errors were displayed, but the render and animate functions (included in the init function) did not proceed as expected. Unclear whether the issue lies with the texture or the init function. Appreciate any suggestions.
References consulted:
Three.JS TextureLoader Documentation
Troubleshooting Three.TextureLoader
Full code snippet below:
<!DOCTYPE html>
<html>
<head>
<title>Panorama1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
...
[Truncated for brevity]
</body>
</html>
Original code:
<!DOCTYPE html>
<html>
...
[Omitted for conciseness]
</html>
Source Code Link: ThreeJS 360 Panorama on GitHub
Thank you for your attention!
Update: Following @prisoner849's suggestion, the init and animate functions now execute correctly. However, the scene remains black on both Chrome and Firefox. https://i.sstatic.net/ZImPc.png