“This is the 18th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The sky box

  • In 3D scenes, skyboxes are often added to enhance the performance of the scene. You draw pictures of the sky above the whole scene.
  • The easiest way to do this is to make a big cube and texture the 6 faces, but note that we are rendering the inside. Textures are specially processed and can be combined into a whole. Of course, there are other ways to create domes like spheres or semicircles.

create

  • Based on the code
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>learning</title>
  </head>
  <body>
    <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
    <script type="module">
      import * as THREE from './file/three.js-dev/build/three.module.js'
      import { OrbitControls } from './file/three.js-dev/examples/jsm/controls/OrbitControls.js'

      const canvas = document.querySelector('#c2d')
      / / the renderer
      const renderer = new THREE.WebGLRenderer({ canvas })

      const fov = 40 // Scope of view
      const aspect = 2 // The camera defaults to the width ratio of the canvas
      const near = 0.1 / / nearly flat
      const far = 10000 / / far plane
      // Perspective projection camera
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
      camera.position.set(10.3.0)
      camera.lookAt(0.0.0)
      // Control the camera
      const controls = new OrbitControls(camera, canvas)
      controls.update()

      / / the scene
      const scene = new THREE.Scene()

      / / rendering
      function render() {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
      }
      requestAnimationFrame(render)
    </script>
  </body>
</html>
Copy the code
  • Add geometry and texture to each face.
  • Note that the material must be setTHREE.BackSideInside the render, the far plane of the camera must be greater than the length of the box.directions[]The images in the array are also ordered.
      {
        var directions = [
          './file/18/pos-x.jpg'.'./file/18/neg-x.jpg'.'./file/18/pos-y.jpg'.'./file/18/neg-y.jpg'.'./file/18/pos-z.jpg'.'./file/18/neg-z.jpg'
        ] // Get the object

        const loader = new THREE.TextureLoader()
        // Create the box and set the box size to (5000, 5000, 5000)
        const skyGeometry = new THREE.BoxGeometry(5000.5000.5000)
        // Set the box material
        const materialArray = []
        for (let i = 0; i < 6; i++)
          materialArray.push(
            new THREE.MeshBasicMaterial({
              map: loader.load(directions[i]), // Paste the image texture
              side: THREE.BackSide // Mirror flip}))// Create a complete skybox, fill in the geometry model and material parameters
        const skyBox = new THREE.Mesh(skyGeometry, materialArray) 
        scene.add(skyBox) // Add skyboxes to the scene
      }
Copy the code

  • three.jsProvides a special textureCubeTextureLoaderCan simulate the six sides of a square. Very little code is required to achieve the above effect.
      {
        const loader = new THREE.CubeTextureLoader()
        const texture = loader.load([
          './file/18/pos-x.jpg'.'./file/18//neg-x.jpg'.'./file/18//pos-y.jpg'.'./file/18//neg-y.jpg'.'./file/18//pos-z.jpg'.'./file/18//neg-z.jpg'
        ])
        scene.background = texture
      }
Copy the code

  • three.jsIn addition to the combination of several images, you can also use a 360-degree panorama to set the sky.
  • useWebGLCubeRenderTargetThe renderer.fromEquirectangularTextureConvert the panorama to cube map format.
 {
    const loader = new THREE.TextureLoader()
    const texture = loader.load('./file/18/2.webp'.() = > {
      const rt = new THREE.WebGLCubeRenderTarget(texture.image.height)
      rt.fromEquirectangularTexture(renderer, texture)
      scene.background = rt.texture
    })
  }
Copy the code

  • Sky boxes are one of the most common ways to enhance 3D scenes. To implement that way, you need to determine what is easiest based on your requirements.