Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
290 views
in Technique[技术] by (71.8m points)

javascript - Three.js is not rendering my textures from my planet constructor function

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...