Using ThreeJS to assign various textures based on the position of the object

Question

Using ThreeJS to assign various textures based on the position of the object

Recently, I delved into the world of ThreeJS and embarked on creating a model of the Earth using a Sphere mesh. Alongside this, I crafted a model of the Sun and now desire to infuse two distinct textures onto the Earth model based on its orientation. Specifically, I envision applying a "night" texture on the side of the Earth sphere that is shielded from the Sun's rays, and a "day" texture on the side that directly faces the Sun. The "night" version showcases a darker Earth with glittering lights.

To enhance the realism further, I believe introducing some type of "feathering" effect would create a smoother transition between the two textures, rather than having a sharp separation. How could I achieve this?

https://i.sstatic.net/t4tRE.jpg

javascript three.js 3d mesh

Answer 1

Answer №1

There are two approaches that can be taken to achieve your desired outcome. The easier method involves utilizing "THREE.MeshPhongMaterial" and applying textures as detailed below.

const plight = new THREE.PointLight(0xffffff, 1);
plight.position.set(0, 0, 0)
scene.add(plight);

const geometry = new THREE.SphereGeometry(radius, 32, 32);

const night_texture_loader = new THREE.TextureLoader();
const night_texture = night_texture_loader.load('earth_nightmap.jpg');

const day_texture_loader = new THREE.TextureLoader();
const day_texture = day_texture_loader.load('earth_daymap.jpg');

const earth_specularmap_loader = new THREE.TextureLoader();
const earth_specularmap = earth_specularmap_loader.load('earth_specularmap.tif');

const material = new THREE.MeshPhongMaterial({
    map: day_texture,
    emissiveMap: night_texture,
    emissive: new THREE.Color(0x888888),
    emissiveIntensity: 1,
    specularMap: earth_specularmap,
    specular: 1,
    shininess: 30,
});

const earth = new THREE.Mesh(geometry, material);
earth.position.set(1, 0, 0)
scene.add(earth);

The alternative method involves using a custom Shader, "THREE.ShaderMaterial," which is more complex to set up and may require additional expertise.

Answer 2

There are two approaches that can be taken to achieve your desired outcome. The easier method involves utilizing "THREE.MeshPhongMaterial" and applying textures as detailed below.

const plight = new THREE.PointLight(0xffffff, 1);
plight.position.set(0, 0, 0)
scene.add(plight);

const geometry = new THREE.SphereGeometry(radius, 32, 32);

const night_texture_loader = new THREE.TextureLoader();
const night_texture = night_texture_loader.load('earth_nightmap.jpg');

const day_texture_loader = new THREE.TextureLoader();
const day_texture = day_texture_loader.load('earth_daymap.jpg');

const earth_specularmap_loader = new THREE.TextureLoader();
const earth_specularmap = earth_specularmap_loader.load('earth_specularmap.tif');

const material = new THREE.MeshPhongMaterial({
    map: day_texture,
    emissiveMap: night_texture,
    emissive: new THREE.Color(0x888888),
    emissiveIntensity: 1,
    specularMap: earth_specularmap,
    specular: 1,
    shininess: 30,
});

const earth = new THREE.Mesh(geometry, material);
earth.position.set(1, 0, 0)
scene.add(earth);

The alternative method involves using a custom Shader, "THREE.ShaderMaterial," which is more complex to set up and may require additional expertise.

Using ThreeJS to assign various textures based on the position of the object

Answer №1

Similar questions

Transforming the mui stepper connection into a progress bar is simple. Each step contains individualized content to guide you through the process

The use of anonymous arrow functions results in Fast Refresh not maintaining local component state

Solve problems with limitations on ng2-dnd drop zones

Exploring the world of jQuery animation and background colors with Animate()

javascript The unchecking of a checkbox is not functioning

Show a different image with a matching title each time the page loads

Can we combine two arrays of objects based on their unique identifiers?

I'm looking for a solution to pass a PHP object as a parameter in JavaScript within an HTML environment,

Navigate the orbit control camera in a circular motion around the target object

steps for signing up and keeping the parameters current

Error encountered: Unable to access the 'Lastname' property as it is undefined

Solution: The issue where the children's onChange event was not updating the parent in Ant Design was discovered to be due to the Select and Table components nested inside a Tab not changing according to the pageSize

width of the cells within the grid table

What could be causing my vis.js network's node hover popups to not function properly?

Time when the client request was initiated

What is the method for extracting JavaScript code as data from a script tag?

Visualizing Data with d3.js Radar Charts Featuring Image Labels

Broadcasting TypeScript Data Structures via Socket.IO

Reacts Router Link does not refresh page content

Is e.preventDefault() failing to work in Next.js?