I have a function that takes orbital parameters and texture images from a dataset and creates a 3d object (a planet). However for some reason textures aren't being rendered. Using BasicMaterial it works normally, but not with StandardMaterial or PhongMaterial. (There is a point light in the scene), I already tested the textures outside the loop and the function, they work nice. I don´t know what else to do.
I let here the code.
for(var i=0;i < results.data.length; i++){
const EC = Number(results.data[i]["Eccentricity"]); //Eccentricity
const IN = Number(results.data[i]["Inclination [Rad]"]) ; //Inclination
const OM = Number(results.data[i]["Orbit Rotation_Y [Rad]"]) ; //Longitude of ascending node
const W = Number(results.data[i]["Orbit Rotation_X [Rad]"]); //Argument of periapsis
const A = Number(results.data[i]["Orbit semi-major axis [UA]"]); //Semi-major axis
const EcRadius = Number(results.data[i]["Relative Equatorial Radius"]); //Radius
const NAM = results.data[i]["Name"]; //Name
const textureUrl = results.data[i]["TextureFileUrl"]; //Texture image of the planet
const loader = new THREE.TextureLoader();
loader.load(textureUrl, function ( texture ) {
// Create the material when the texture is loaded
var tex = texture.clone();
const PlanetMaterial = new THREE.MeshBasicMaterial( {
map: tex
} );
scene.add(CreatePlanet( 0,0,0, EC,IN,OM,W,A,EcRadius, NAM, 0x4E4E4E, 0.5, PlanetMaterial ));
},
undefined,
function ( err ) {
console.error( 'An error happened.');
}
);
}
CreatePlanet function just creates a mesh with the material given. Like:
const geometryPlanet = new THREE.SphereBufferGeometry(EcRadius, 300, 300);
const Planet = new THREE.Mesh(geometryPlanet, PlanetMaterial);
return Planet;
Thanks beforehand for the help.
var tex = texture.clone();
When doing this, can you please add the following line?
tex.needsUpdate = true;
In this context, it is required otherwise the contents of the texture will never be uploaded to the GPU.
I have a cube that I'm trying to map an image onto. I'm loading the image with a loading Manager. I'm wondering why the material.map is returning as undefined, also wondering if maybe I have a scaling issue. The original image is 512x512. The boxes are 20x20x20.
I left out all the code about camera, renderer, etc., but I attempted to include it all in the code snippet/interactive part below.
var loadingManager = new THREE.LoadingManager();
loadingManager.onProgress = function (item, loaded, total) {
//Loading percentage
console.log(loaded / total * 100 + '%');
}
//Signify loading done
loadingManager.onLoad = function () {
//Start the animation when the models are done loading
animate();
}
function init() {
//create a loader
var loader2 = new THREE.TextureLoader(loadingManager);
//load the texture, and when it's done, push it into a material
loader2.load("../img/leo.jpg", function (texture) {
//do I need to do this?
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(boxSize, boxSize)
//why is this texture not coming through?
console.log(texture)
//does not work:
material1 = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
});
})
var geo = new THREE.BoxGeometry(30, 30, 30)
var mat = new THREE.MeshBasicMaterial({
color: 0xb7b7b7
})
mesh = new THREE.Mesh(geo, material1)
scene.add(mesh)
}
// This works, so I know the image path is correct
var img = document.createElement('img');
img.src = '../img/leo.jpg';
document.getElementById('container').appendChild(img);
The value of texture from the console log is this:
The error is related to the fact that you are associating the material outside the callback of the load function of your loader, you have to do that inside the callback.
From the documentation for TextureLoader:
onLoad - Will be called when load completes.
You have to do as follow:
loader2.load("../img/leo.jpg", function(texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
texture.repeat.set( boxSize,boxSize )
//why is this texture 1 not coming through?
console.log(texture)
//neither of these work:
var geo = new THREE.BoxGeometry(30,30,30);
material1 = new THREE.MeshBasicMaterial({ map: texture,side: THREE.DoubleSide });
var mesh = new THREE.Mesh(geo, material1);
// animation loop
function animate() {
requestAnimationFrame( animate );
render();
// update stats
stats.update();
}
...
});
To make this more readable and avoid a callback nightmare do something like this:
function myInit(texture) {
...
}
loader2.load("../img/leo.jpg", myInit);
Following I'm loading a image map on a custom geometry,
it represents the brown colored geometry on the picture above:
var aqua_ground_geo = new THREE.Geometry();
var top0 = new THREE.Vector3(aqua_ground_geo_x_NEG, user_data['aqua_soil_calc_b_y'], aqua_ground_geo_z_NEG);
var top1 = new THREE.Vector3(aqua_ground_geo_x_POS, user_data['aqua_soil_calc_b_y'], aqua_ground_geo_z_NEG);
var top2 = new THREE.Vector3(aqua_ground_geo_x_NEG, user_data['aqua_soil_calc_f_y'], aqua_ground_geo_z_POS);
aqua_ground_geo.vertices.push(top0);
aqua_ground_geo.vertices.push(top1);
aqua_ground_geo.vertices.push(top2);
aqua_ground_geo.faces.push( new THREE.Face3(0,1,2) );
aqua_ground_geo.computeFaceNormals();
aqua_ground_geo.computeVertexNormals();
var textureUrl = "http://www.lifeguider.de/wp-content/uploads/aquag/bodengrund/dennerle_kies_naturweiss_1-2mm.jpg";
var aqua_bodengrund_tex = new THREE.TextureLoader().load( textureUrl );
var aqua_bodengrund_mat = new THREE.MeshLambertMaterial( {
map: aqua_bodengrund_tex,
color: 0xffffff,
} );
aqua_bodengrund_mat.shading = THREE.FlatShading;
aqua_bodengrund_mat.side = THREE.DoubleSide;
var aqua_bodengrund = new THREE.Mesh( aqua_ground_geo,aqua_bodengrund_mat);
On a simple THREE.BoxGeometry all works as expected with the same material (it represents the cube in the picture above):
var lala = new THREE.BoxGeometry( 100, 100, 100 );
var lala2 = new THREE.Mesh( lala,aqua_bodengrund_mat);
I'm not an expert in 3D, what is missing in my code that the image texture will be shown correctly?
You need to apply the texture in the callback of the THREE.TextureLoader. Check also the documentation here; the second argument (onLoad) is the callback.
var textureUrl = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif";
var aqua_bodengrund_mat = new THREE.MeshLambertMaterial( {
color: 0xffffff
});
var onLoad = function( texture ){
aqua_bodengrund_mat.map = texture;
aqua_bodengrund_mat.needsUpdate = true;
}
var loader = new THREE.TextureLoader();
loader.load( textureUrl, onLoad );
See this fiddle for a demo.
UPDATE
In case you have a custom geometry you also need to calculate the UVs for showing the texture correctly. I used this answer here to calculate them in another fiddle here
Note. The UVs in my fiddle are calculated for faces in the XY plane, if your faces are in another plane you will have to update accordingly...
Am using texture loader in Three.js, the onLoad function in it is not working gives an error in the console
var TextureLoader = new THREE.TextureLoader();
boxtexture.onChange(function (value) {
TextureLoader.load('textures/' + value,
// onLoad callback
function(texture){
Box1.material.map = texture
Box1.material.map.wrapT = THREE.RepeatWrapping;
Box1.material.map.wrapS = THREE.RepeatWrapping;
Box1.material.map.repeat.set(38, 38);
Box2.material.map = texture
Box2.material.map.wrapT = THREE.RepeatWrapping;
Box2.material.map.wrapS = THREE.RepeatWrapping;
Box2.material.map.repeat.set(38, 38);
},
// onProgress callback
function(loaded)
{
load = 1;
console.log(loaded);
window.open(Renderer.domElement.toDataURL());
}
);
});
But it doesn't call the onLoad function and gives an error message in console
The textures are loaded properly. But I need to call a function when it is loaded.
I just solve it using Loading manager in three.js
var manager = new THREE.LoadingManager();
manager.onLoad = function () {
// call back function when the texture gets loaded
}
var TextureLoader = new THREE.TextureLoader(manager);
TextureLoader.load('textures/', function (texture) {
material.map = texture;
});
I am starting with THREE.js, and I am trying to draw a rectangle with a texture on it, lit by a single source of light. I think this is as simple as it gets (HTML omitted for brevity):
function loadScene() {
var world = document.getElementById('world'),
WIDTH = 1200,
HEIGHT = 500,
VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000,
renderer = new THREE.WebGLRenderer(),
camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR),
scene = new THREE.Scene(),
texture = THREE.ImageUtils.loadTexture('crate.gif'),
material = new THREE.MeshBasicMaterial({map: texture}),
// material = new THREE.MeshPhongMaterial({color: 0xCC0000});
geometry = new THREE.PlaneGeometry(100, 100),
mesh = new THREE.Mesh(geometry, material),
pointLight = new THREE.PointLight(0xFFFFFF);
camera.position.z = 200;
renderer.setSize(WIDTH, HEIGHT);
scene.addChild(mesh);
world.appendChild(renderer.domElement);
pointLight.position.x = 50;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.addLight(pointLight);
renderer.render(scene, camera);
}
The problem is, I cannot see anything. If I change the material and use the commented one, a square appears as I would expect. Note that
The texture is 256x256, so its sides are power of two
The function is actually called when the body is loaded; indeed it works with a different material.
It does not work even if I serve the file from a webserver, so it is not an issue of cross-domain policy not allowing to load the image.
What I am I doing wrong?
By the time the image is loaded, the renderer has already drawn the scene, hence it is too late. The solution is to change
texture = THREE.ImageUtils.loadTexture('crate.gif'),
into
texture = THREE.ImageUtils.loadTexture('crate.gif', {}, function() {
renderer.render(scene);
}),
Andrea solution is absolutely right, I will just write another implementation based on the same idea.
If you took a look at the THREE.ImageUtils.loadTexture() source you will find it uses the javascript Image object. The $(window).load event is fired after all Images are loaded ! so at that event we can render our scene with the textures already loaded...
CoffeeScript
$(document).ready ->
material = new THREE.MeshLambertMaterial(map: THREE.ImageUtils.loadTexture("crate.gif"))
sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material)
$(window).load ->
renderer.render scene, camera
JavaScript
$(document).ready(function() {
material = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture("crate.gif") });
sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material);
$(window).load(function() {
renderer.render(scene, camera);
});
});
Thanks...
In version r75 of three.js, you should use:
var loader = new THREE.TextureLoader();
loader.load('texture.png', function ( texture ) {
var geometry = new THREE.SphereGeometry(1000, 20, 20);
var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
In version r82 of Three.js TextureLoader is the object to use for loading a texture.
Loading one texture (source code, demo)
Extract (test.js):
var scene = new THREE.Scene();
var ratio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,
0.1, 50);
var renderer = ...
[...]
/**
* Will be called when load completes.
* The argument will be the loaded texture.
*/
var onLoad = function (texture) {
var objGeometry = new THREE.BoxGeometry(20, 20, 20);
var objMaterial = new THREE.MeshPhongMaterial({
map: texture,
shading: THREE.FlatShading
});
var mesh = new THREE.Mesh(objGeometry, objMaterial);
scene.add(mesh);
var render = function () {
requestAnimationFrame(render);
mesh.rotation.x += 0.010;
mesh.rotation.y += 0.010;
renderer.render(scene, camera);
};
render();
}
// Function called when download progresses
var onProgress = function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
};
// Function called when download errors
var onError = function (xhr) {
console.log('An error happened');
};
var loader = new THREE.TextureLoader();
loader.load('texture.jpg', onLoad, onProgress, onError);
Loading multiple textures (source code, demo)
In this example the textures are loaded inside the constructor of the mesh, multiple texture are loaded using Promises.
Extract (Globe.js):
Create a new container using Object3D for having two meshes in the same container:
var Globe = function (radius, segments) {
THREE.Object3D.call(this);
this.name = "Globe";
var that = this;
// instantiate a loader
var loader = new THREE.TextureLoader();
A map called textures where every object contains the url of a texture file and val for storing the value of a Three.js texture object.
// earth textures
var textures = {
'map': {
url: 'relief.jpg',
val: undefined
},
'bumpMap': {
url: 'elev_bump_4k.jpg',
val: undefined
},
'specularMap': {
url: 'wateretopo.png',
val: undefined
}
};
The array of promises, for each object in the map called textures push a new Promise in the array texturePromises, every Promise will call loader.load. If the value of entry.val is a valid THREE.Texture object, then resolve the promise.
var texturePromises = [], path = './';
for (var key in textures) {
texturePromises.push(new Promise((resolve, reject) => {
var entry = textures[key]
var url = path + entry.url
loader.load(url,
texture => {
entry.val = texture;
if (entry.val instanceof THREE.Texture) resolve(entry);
},
xhr => {
console.log(url + ' ' + (xhr.loaded / xhr.total * 100) +
'% loaded');
},
xhr => {
reject(new Error(xhr +
'An error occurred loading while loading: ' +
entry.url));
}
);
}));
}
Promise.all takes the promise array texturePromises as argument. Doing so makes the browser wait for all the promises to resolve, when they do we can load the geometry and the material.
// load the geometry and the textures
Promise.all(texturePromises).then(loadedTextures => {
var geometry = new THREE.SphereGeometry(radius, segments, segments);
var material = new THREE.MeshPhongMaterial({
map: textures.map.val,
bumpMap: textures.bumpMap.val,
bumpScale: 0.005,
specularMap: textures.specularMap.val,
specular: new THREE.Color('grey')
});
var earth = that.earth = new THREE.Mesh(geometry, material);
that.add(earth);
});
For the cloud sphere only one texture is necessary:
// clouds
loader.load('n_amer_clouds.png', map => {
var geometry = new THREE.SphereGeometry(radius + .05, segments, segments);
var material = new THREE.MeshPhongMaterial({
map: map,
transparent: true
});
var clouds = that.clouds = new THREE.Mesh(geometry, material);
that.add(clouds);
});
}
Globe.prototype = Object.create(THREE.Object3D.prototype);
Globe.prototype.constructor = Globe;
Without Error Handeling
//Load background texture
new THREE.TextureLoader();
loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
{
scene.background = texture;
});
With Error Handling
// Function called when download progresses
var onProgress = function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
};
// Function called when download errors
var onError = function (error) {
console.log('An error happened'+error);
};
//Function called when load completes.
var onLoad = function (texture) {
var objGeometry = new THREE.BoxGeometry(30, 30, 30);
var objMaterial = new THREE.MeshPhongMaterial({
map: texture,
shading: THREE.FlatShading
});
var boxMesh = new THREE.Mesh(objGeometry, objMaterial);
scene.add(boxMesh);
var render = function () {
requestAnimationFrame(render);
boxMesh.rotation.x += 0.010;
boxMesh.rotation.y += 0.010;
sphereMesh.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
}
//LOAD TEXTURE and on completion apply it on box
var loader = new THREE.TextureLoader();
loader.load('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/1920px-The_Earth_seen_from_Apollo_17.jpg',
onLoad,
onProgress,
onError);
Result:
https://codepen.io/hiteshsahu/pen/jpGLpq/
Use TextureLoader to load a image as texture and then simply apply that texture to scene background.
new THREE.TextureLoader();
loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
{
scene.background = texture;
});
Result:
https://codepen.io/hiteshsahu/pen/jpGLpq?editors=0011
See the Pen Flat Earth Three.JS by Hitesh Sahu (#hiteshsahu) on CodePen.