I have customized an official example for the Loader object to showcase a specific issue. My goal is to generate a mesh with a texture map that loads before creating the geometry. Currently, I am facing a problem where local files load properly, but remote ones do not. You can observe this behavior in action:
- working demo (local):
- not working demo (remote): nylkiway.net/loadertest_remote.html
When using the loader to load a locally saved .jpg, the texture appears correctly on the final mesh, as demonstrated in the working demo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - image loader test
</div>
<script src="libs/three.min.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
// texture
var manager = new THREE.LoadingManager();
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
loader.load( 'avatar.jpg', function ( image ) {
// uncomment next line and comment above to see the issue!
//loader.load( 'http://nylkiway.net/avatar.jpg', function (image) {
texture.image = image;
console.log("debug. image size: " + image.width + " X " + image.height);
texture.needsUpdate = true;
});
// model
var object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), new THREE.MeshBasicMaterial({map: texture}));
object.position.y = -80;
scene.add(object);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) / 2;
mouseY = (event.clientY - windowHalfY) / 2;
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
However, when attempting to load the same image from a remote server, the texture appears to load, or at least it seems to because I can access the image's width and height in the onLoad() callback. Despite this, I encounter errors and the mesh does not render. Uncommenting the following line:
loader.load( 'http://nylkiway.net/avatar.jpg', function (image) {
Results in multiple errors:
"THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. (undefined)"
Even though the image is identical, my debug output reflects the dimensions of the image:
console.log("debug. image size: " + image.width + " X " + image.height);
"debug. image size: 460 X 460"
I do not believe this to be a CORS issue since the completed image loading callback is triggered. The properties of the images are also readable. I sense that this could be a common query, but my search did not yield a suitable answer. I don't think the issue lies in the dimensions of the images not being powers of 2, given that the locally loaded image displays correctly as a texture.
Any assistance would be greatly appreciated!