Three.js? ?????? 3D ???? ???? ? ?? ???? JavaScript ????????. ??? ??? ? ??? ??? ? ?? ?????. 3D ???? ?? ? ??? ???? ??? ?? ????? ?? ??? ????? ????. ??? ??? ?? ???? ?? ???? ???? ??? ??? ? ????.

? ?? ??? ?? ??? '??' ??? ???? ????. ??? ??? ???? ?? ????? ??? ???? ?? ?? ???? ??? ?????.

? ??? ?? ?? ? ??? ??? ???? ????? ???? ????. ????? ??? ??? ??? ?? ????. ????? ???? "?? ??"??? ??? ???? ?? ??? ??? ?? ???? ??? ????????.

????? ??? ??? ??? ????.

#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);
}

? ????? ???? ?? ??? ????:

• lightDirection: ?? ?? source.
• earthTexture: ??? ???? ? ???? ???.
• vUv: ?? ??? ??? ??.
• vNormal: ?? ??? ?? ??.

????? ???? ?? ?? ??? ?? ??? ?????. ?? ?? ?? ???? ????? ??? ?????. ? ? ?? ?? ???? ???? ?? ?? ???? ? ?????.

?? ?? ????? ???? ?? ???? ??? ??? ??? ?? ??? ?? ??? ?????. ??? ?. ?? ??? ????? ???? ?????.

? ????? ???? ????? ?? ???? ????? ???? ???. ??? ?? ?? ?? ???? ???? ??? ????.

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') }
  }
});

? ??? ? ?? ???? ?????.

• lightDirection: ?? ??.
• earthTexture: ??? ???? ? ???? ??????.

??? ? ???? ???? ?? ?? ???? ?? lightDirection ???. EarthTexture ???? ???? ??? ??? ?????.

? ????? ????? ??? ???? ????? ???? ???. ??? ??? ???? ?? ??? ???? ??? ?? ????.

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);

? ??? ?? 10, ???? 32?, ? 32?? ? ??? ?????. ?? ?? ?? ?? ?? ???? ???? ??? ????. ????? ??? ???? ????? ?????.

??? ???? ??? ??? ? ????. ??? ??? ??? ???? ??? ?? ????.

#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);
}

? ??? ??? ??? ?????. ?? ??? ?? ?? ?? ???? ???? ??????. ? ?? ??? ???? ??? ??? ???? ???.

? ??? Three.js? ??? ?? ????? ???? ???? 3D ?? ?? ??? ???? ???? ??? ?????? ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!