three. Use of JS

Time:2022-5-6

Take creating a cube as an example
image

install

Install three: NPM I three
image

use

quote

Three and the camera control orbitcontrols included in three are introduced to control the camera:
image

Initialize scene

Scene: all three things in the scene.
Camera: when using the perspective camera, pay attention to adjusting the parameters, otherwise you will not see the object and scene. The parameters in turn are: FOV field of view, the angle range you can see, aspect aspect aspect ratio, usually window aspect ratio, near, the position where you start rendering the scene based on the camera position is generally small, the default is 0.1, far, and the position where you end rendering the scene based on the camera position, which will affect the rendering efficiency. The default is 1000.
Renderer: renderer, which is used to generate canvas and set its parameters. It needs to appendChild to the specified element in DOM.
image

Sky box

Create a sky box (a cube that wraps the scene object, and the angle can be changed with the mouse dragging). The corresponding sequence of the six cube maps is right, left, up, down, front and back. The picture needs to be a specially made panorama. Otherwise, there will be obvious splicing edges and corners in the scene world:
image
You can also directly use a map as the background of the scene, but using this method, the scene will not change the angle and scale with the mouse:
image

Camera controls

Create a camera control, in which you need to add the canvas elements of the camera and rendering to the control orbitcontrols. You can control drag, zoom, damping, deflection angle and rotation through the control (this rotation method is different from the model rotation, which is realized by controlling the rotation of the object mesh, and the model rotation is used in this article):
image

light source

Create light source, you can set ambient light and point light source, and the final displayed light and shadow effect is calculated and rendered through various light effects:
image

Cube

The created mesh (which can be understood as the created object) is added to the scene through add. In the mesh, there are geometry and material. The geometry of the cube can use the boxgeometry of three, while the material can use the meshlambertmaterial material material, which is responsive to light. It is used to create dim and non luminous objects. Its own color can be set, and its own color is not affected by the environment. You can also set texture map for materials (you need to import pictures as textures):
image

Continuous rendering

Continuously render the scene and camera, where requestanimationframe is the requested animation frame, which is refreshed at 60Hz (but it will be triggered frequently in the high refresh screen). When users switch labels, rendering will be suspended to save CPU overhead. The mouse control needs to call update() in rendering to update:
image

Complete code

Click to view the code
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // Mouse control
import cubeImg from "@/assets/img/cube.png";
import BgImg from "@/assets/img/bg.png";
import right from "@/assets/img/space/right.jpg";
import left from "@/assets/img/space/left.jpg";
import top from "@/assets/img/space/top.jpg";
import bottom from "@/assets/img/space/bottom.jpg";
import front from "@/assets/img/space/front.jpg";
import back from "@/assets/img/space/back.jpg";
export default {
  components: {},
  data() {
    return {
      Scene: '', // scene
      Camera: '', // camera
      Renderer: '', // renderer
      Mousecontrols: '', // track control
      Pointlight: '', // point light
      Ambientlight: '', // ambient light
      Cube: '', // cube
      Cubeimg: cubeimg, // cube map
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //Initialize scene
    init() {
      this. scene = new THREE. Scene(); // New scene
      let width = window. innerWidth; // Window width
      let height = window. innerHeight; // Window height
      let k = width / height; // Window aspect ratio
      this. camera = new THREE. PerspectiveCamera(60, k, 0.1, 10); // Perspective camera
      this. camera. position. set(0, 0, 2.5); // Set camera position
      //Create renderer
      this.renderer = new THREE.WebGLRenderer({
        Antialias: true, // anti aliasing
        alpha: true,
      });
      this. renderer. setSize(width, height); // Set render area size
      document
        .getElementById("container")
        .appendChild(this.renderer.domElement); // Add canvas to container
      let axes = new THREE. AxesHelper(1); // Coordinate system (aided development)
      axes.rotation.x = 0.1;
      // this.scene.add(axes);
      this.createSkyBox();
      // this.createUniverse();
      this.createOrbitControls();
      this.createLight();
      this.createCube();
      this.repeatRender();
    },

    //Create sky box
    createSkyBox() {
      //Load sky box texture
      let cubeTexture = new THREE.CubeTextureLoader().load(
        [right,left,top,bottom,front,back]
      );
      this. scene. background = cubeTexture; // Set scene background
    },

    //Create a cosmic background
    createUniverse(){
      let texture = new THREE. TextureLoader(). load(BgImg);// Load background map
      this. scene. background = texture;// Set scene background
    },

    //Create track control
    createOrbitControls() {
      //No scaling damping
      this.mouseControls = new OrbitControls(
        this.camera,
        this.renderer.domElement
      ); // Create control object
      this. mouseControls. enablePan = false; // Right click pan drag
      this. mouseControls. enableZoom = true; // Mouse zoom
      this. mouseControls. minDistance = 2; // The distance range of the camera from the origin
      this.mouseControls.maxDistance = 5;
      this. mouseControls. enableDamping = true; // Sliding damping
      this. mouseControls. dampingFactor = 0.1; // (default. 25)
      this. mouseControls. maxPolarAngle = (Math.PI / 4) * 3; // Y rotation angle range
      this.mouseControls.minPolarAngle = Math.PI / 4;
        // this. mouseControls. autoRotate = true; // Rotation (camera)
        // this. mouseControls. autoRotateSpeed = 5; // Rotation speed
    },

    //Create light source
    createLight() {
      this. ambientLight = new THREE. AmbientLight(0x666666); // Set ambient light
      this. scene. add(this.ambientLight); // Add ambient light to the scene
      this.pointLight = new THREE.PointLight(0xffffff, 1, 0);
      this. pointLight. position. set(200, 200, 200); // Set point light location
      this. scene. add(this.pointLight); // Add a point light to the scene
    },

    //Create cube
    createCube() {
      let geometry = new THREE. BoxGeometry(1, 1, 1); // Geometry
      //Material
      let material = new THREE.MeshLambertMaterial({
        map: new THREE. TextureLoader(). Load (this. Cubeimg), // import image texture
      });
      this. cube = new THREE. Mesh(geometry, material); // Add geometry and materials to the mesh
      this.cube.rotation.set(10, 10, 0);
      this. scene. add(this.cube); // Add a cube mesh to the scene
    },

    //Repeat rendering
    repeatRender() {
      //Request the animation frame, call it every time the screen is refreshed, and bind the screen refresh frequency
      requestAnimationFrame(this.repeatRender);
      this. mouseControls. update(); // Real time update track control
      this. cube. rotation. y += .01;// The rotation angle with y as the axis is increased by 0.01 per frame
      this. renderer. render(this.scene, this.camera); // Render the scene and camera
    },
  },
};

Picture material

Sky box map

back.jpg:
image
bottom.jpg:
image
front.jpg:
image
left.jpg:
image
right.jpg:
image
top.jpg:
image

Cube map

cube.png:
image