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

Right hand coordinate system

  • inthree.jsI’m using the right hand coordinate system here becausewebGLThe default is this coordinate system.
  • The simple way to think about it is that the X-axis is going to the right, the Y-axis is going to the up, and the Z-axis is going to the screen from the inside out.
  • The position of all objects in the scene in the container depends on this coordinate system.

scenario

  • As I said before, it’s like a big container for all the objects that we need to showscenario.
  • It is also called a scene graph because it is a tree structure of data.
  • Objects that can be put into a scene are inheritedObject3DObject, so each child node has its own local space. The simple idea is thatscenarioThere is a space to addGroup,Object3D, grid,Object type, child node is also a small container, can also be addedGroup,Object3D, grid,And other object types. The difference is that the coordinate position of the child node is changed relative to the local space coordinate of the parent node.

Commonly used attributes

  1. .backgroundSet the background of the scene.
  2. .fogControls the type of fog for each object in the scene.
  3. .environmentSets the default texture for objects that have no texture in the scene, and does not modify the texture if the object has a texture.
  4. .childrenReturns all child objects of the scene.

Commonly used method

  1. .add()Add objects.
  2. .remove()Delete an added object.
  3. .getObjectByName(name,recursive)You can specify a unique identity when you create an objectname, you can use this method to find an object with a specific name.recursiveBoolean object,false: search on the child element.true: on all descendant objects.

The instance

  • Based on the template
<! 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 'https://threejs.org/build/three.module.js'
      import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/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 = 1000 / / far plane
      // Perspective projection camera
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
      camera.position.set(0.10.20)
      camera.lookAt(0.0.0)

      // Control the camera
      const controls = new OrbitControls(camera, canvas)
      controls.update()

      / / the scene
      const scene = new THREE.Scene()
      scene.background = new THREE.Color('white')

      {
        / / light
        const color = 0xffffff
        const intensity = 1
        const light = new THREE.DirectionalLight(color, intensity)
        scene.add(light)
      }

      {
        / / geometry
      }

      / / rendering
      function render() {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
      }

      requestAnimationFrame(render)
    </script>
  </body>
</html>
Copy the code
  • To better distinguish local coordinates from global coordinates, the group type is used. Add two objects to the group type, each moving up and down.
      / / the ball
      const radius = 1
      const widthSegments = 36
      const heightSegments = 36
      const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)

      / / solid body
      const boxWidth = 6
      const boxHeight = 6
      const boxDepth = 6
      const boxGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)

      / / material
      const material = new THREE.MeshPhongMaterial({ color: 0x00ff00{})// Add the global coordinate position
        const axes1 = new THREE.AxesHelper()
        scene.add(axes1)

        / / grid 1
        const mesh1 = new THREE.Mesh(sphereGeometry, material)
        // The relative coordinate x moves by 5
        mesh1.position.x = 5
        // Global coordinates move
        scene.add(mesh1)

        / / create a group
        const group = new THREE.Group()
        group.position.x = -5
        / / rotation
        group.rotation.x = 1
        // Global coordinates move
        scene.add(group)

        // Add local coordinate position
        const axes2 = new THREE.AxesHelper()
        group.add(axes2)

        / / grid. 2
        const mesh2 = new THREE.Mesh(sphereGeometry, material)
        // The relative coordinate x moves by 5
        mesh2.position.y = 5

        / / 3 grid
        const mesh3 = new THREE.Mesh(boxGeometry, material)
        // The relative coordinate x moves by 5
        mesh3.position.y = -5
        // Group local coordinates move
        group.add(mesh2)
        group.add(mesh3)
      }
Copy the code

  • Here we use.AxesHelper()Add coordinate systems to both global and local coordinates. The position of the local coordinates and the direction of the coordinates aregroupObject after the change. Can see clearly,Grid 2, grid 3It’s all in thegroupThe change in coordinates.