Three.js ialah perpustakaan JavaScript yang popular untuk mencipta grafik 3D dalam penyemak imbas. Ia sering digunakan untuk mencipta visualisasi dan permainan interaktif. Salah satu cabaran dengan grafik 3D ialah memaparkan objek yang tidak legap, seperti awan atau asap. Objek ini membenarkan cahaya melaluinya, yang boleh menghasilkan rupa yang lebih lembut dan realistik.

Dalam kes ini, matlamatnya adalah untuk menambahkan kesan "atmosfera" pada perwakilan Bumi. Atmosfera akan menjadi lapisan separa lutsinar yang mengelilingi Bumi dan menyerakkan cahaya, memberikan penampilan yang lebih realistik.

Untuk mencapai kesan ini, kami akan mencipta peneduh serpihan yang akan mengira warna setiap piksel di atmosfera berdasarkan kedudukannya di atmosfera dan arah sumber cahaya. Pelorek serpihan akan menggunakan teknik yang dipanggil "penyebaran atmosfera" untuk mensimulasikan cara cahaya diserakkan oleh zarah di atmosfera.

Berikut ialah kod pelorek serpihan:

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec3 lightDirection;
uniform sampler2D earthTexture;

varying vec2 vUv;
varying vec3 vNormal;

void main() {
  // Compute the surface normal at this position
  vec3 normal = normalize(vNormal);
  // Compute the direction from this point to the light source
  vec3 lightDir = normalize(lightDirection);
  // Compute the amount of light that is scattered in this direction
  float scattering = dot(normal, lightDir);
  // Compute the color of the atmosphere at this position
  vec3 color = texture2D(earthTexture, vUv).rgb * scattering;
  // Output the color
  gl_FragColor = vec4(color, 1.0);
}

Serpihan ini shader mengambil beberapa input:

• lightDirection: Arah ke sumber cahaya.
• earthTekstur: Tekstur yang digunakan untuk mewakili Bumi.
• vUv: Koordinat tekstur untuk piksel semasa.
• vNormal: Vektor biasa untuk piksel semasa.

Pelorek serpihan mula-mula mengira permukaan normal pada piksel semasa. Ia kemudian mengira arah dari piksel semasa ke sumber cahaya. Kedua-dua nilai ini digunakan untuk mengira jumlah cahaya yang bertaburan ke arah piksel.

Pelorek serpihan kemudian mengira warna atmosfera pada piksel semasa dengan mendarabkan warna tekstur Bumi dengan jumlah taburan. Warna yang terhasil adalah output sebagai warna serpihan.

Untuk menggunakan shader serpihan ini, kita perlu mencipta bahan yang menggunakannya. Berikut ialah contoh bahan yang menggunakan peneduh serpihan serakan atmosfera:

const material = new THREE.ShaderMaterial({
  fragmentShader: `
    #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
    #else
    precision mediump float;
    #endif
    
    uniform vec3 lightDirection;
    uniform sampler2D earthTexture;
    
    varying vec2 vUv;
    varying vec3 vNormal;
    
    void main() {
      vec3 normal = normalize(vNormal);
      vec3 lightDir = normalize(lightDirection);
      float scattering = dot(normal, lightDir);
      vec3 color = texture2D(earthTexture, vUv).rgb * scattering;
      gl_FragColor = vec4(color, 1.0);
    }
  `,
  uniforms: {
    lightDirection: { value: new THREE.Vector3(0, 1, 0) },
    earthTexture: { value: new THREE.TextureLoader().load('earth.jpg') }
  }
});

Bahan ini mengambil dua seragam:

• cahayaArah: Arah ke sumber cahaya.
• earthTekstur: Tekstur yang digunakan untuk mewakili Bumi.

Bahan menggunakan seragam lightDirection untuk mengira jumlah cahaya yang tersebar di setiap arah. Ia menggunakan seragam earthTekstur untuk mewakili permukaan Bumi.

Untuk menggunakan bahan ini, kita perlu mencipta jaringan dan menetapkannya kepada bahan. Berikut ialah contoh cara membuat jejaring dan menetapkannya pada bahan:

const geometry = new THREE.SphereGeometry(10, 32, 32);
const material = new THREE.ShaderMaterial({
  fragmentShader: `
    #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
    #else
    precision mediump float;
    #endif
    
    uniform vec3 lightDirection;
    uniform sampler2D earthTexture;
    
    varying vec2 vUv;
    varying vec3 vNormal;
    
    void main() {
      vec3 normal = normalize(vNormal);
      vec3 lightDir = normalize(lightDirection);
      float scattering = dot(normal, lightDir);
      vec3 color = texture2D(earthTexture, vUv).rgb * scattering;
      gl_FragColor = vec4(color, 1.0);
    }
  `,
  uniforms: {
    lightDirection: { value: new THREE.Vector3(0, 1, 0) },
    earthTexture: { value: new THREE.TextureLoader().load('earth.jpg') }
  }
});
const mesh = new THREE.Mesh(geometry, material);

Kod ini mencipta geometri sfera dengan jejari 10, 32 segmen dan 32 gelang. Ia kemudian mencipta bahan yang menggunakan peneduh serpihan penyerakan atmosfera. Akhirnya, ia mencipta jaringan dan menetapkannya pada bahan.

Setelah mesh telah dibuat, ia boleh ditambah ke tempat kejadian. Berikut ialah contoh cara menambahkan jejaring pada pemandangan:

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec3 lightDirection;
uniform sampler2D earthTexture;

varying vec2 vUv;
varying vec3 vNormal;

void main() {
  // Compute the surface normal at this position
  vec3 normal = normalize(vNormal);
  // Compute the direction from this point to the light source
  vec3 lightDir = normalize(lightDirection);
  // Compute the amount of light that is scattered in this direction
  float scattering = dot(normal, lightDir);
  // Compute the color of the atmosphere at this position
  vec3 color = texture2D(earthTexture, vUv).rgb * scattering;
  // Output the color
  gl_FragColor = vec4(color, 1.0);
}

Kod ini menambahkan jejaring pada pemandangan. Jaring kini akan dipaparkan menggunakan peneduh serpihan serakan atmosfera. Hasilnya ialah suasana separa lutsinar yang mengelilingi Bumi.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mensimulasikan suasana realistik di sekeliling model Bumi 3D menggunakan Three.js dan peneduh serpihan tersuai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!