threeJs

ThreeJs is WebGl’s JavaScript 3D library that encapsulates WebGl’s interface

The official document: threejs.org/ Chinese document: techbrood.com/threejs/doc…

The introduction of threeJs

CNPM install three // import * as THERR from 'three';Copy the code
  • useimport THERR from 'three'An error

Initialize a demo

  1. Create a scene (scene is a container for all objects, only one)
const scene = new THERR.Scene()
Copy the code
  1. Camera (defines projection from 3d space to 2D screen: orthogonal projection and perspective projection)

(a) perspective projection; (b) : Orthogonal projection

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
Copy the code

  • Fov is the vertical Angle of the view
  • Aspect is equal to width/height, which is the ratio of the horizontal and vertical lengths of the camera, usually set as the horizontal and vertical ratio of the canvas
  • Near The nearest distance from the camera to the field of view.
  • Far The farthest distance from the camera to the view object, which is positive.
  1. Renderer (render images taken by the camera in the browser)

(The renderer determines what elements of the page should be rendered on and how they should be rendered.)

  • webGLRenderer
  • canvasRenderer
  • SVGRenderer

Usually webGl rendering is used. After creating the renderer, you need to call the Render method to combine the scene with the camera and render it

Const renderer = new therr. WebGLRenderer({alpha: true, // default black scene, transparent antialias: true // antialiasing}); renderer.render(scene, camera); Renderer. setSize(window.innerWidth, window.innerheight);Copy the code

At this point, the preliminary work of the drawing is ok, and now the drawing begins

The 3D world is actually made up of countless points. Two points form a line, and three points that are not in a straight line form surfaces. Many surfaces form various objects

Content in a 3D world

  • Geometric figure (Geometries)
    • Three offers a number of fixed shapes, BoxGeometry, Heregeometry, and so on
      • SphereGeometry(radius (sphere radius), widthSegments (number of horizontal split segments, minimum 3), heightSegments (number of vertical split segments, Minimum value is 2), phiStart (horizontal start Angle), phiLength (horizontal scan Angle), thetaStart (vertical start Angle), thetaLength (vertical scan Angle))
    • You can import models (.dae,.obj,.mtl,.fbx,.sea,.vmd,.vpd,.js,.json); In addition to.js and.json files, other files require external function support
  • Material (Materials)
    • MeshBasicMaterial (insensitive to light, gives geometry a simple color or shows wireframes)
    • MeshLambertMaterial (reacts to light, does not display without light source, used to create dim non-luminous objects)
    • MeshPhongMaterial (responds to light, does not show without light source, used to create metallic mianyang cool objects)

Use hexadecimal color before (0x) when creating materials

new THREE MeshBasicMaterial({color: 0xfca745})
Copy the code
  • Lights (Lights)
    • AmbientLight (AmbientLight, whose color is added to the current color of the entire scene and all objects)
    • PointLight (a PointLight source that emits light from the same point in all directions, as from a candle)
    • DirectionalLight (also known as infinite light, a light source that emits rays that can be thought of as parallel, such as sunlight)
    • SpotLight: the light from a light source is emitted from a vertebra to produce a SpotLight effect on the object being illuminated, such as the light from a flashlight
  • shadow
    • The only light sources that can create shadows are DirectionalLight and SpotLight.
    • There are only LambertMaterial and PhongMaterial that can represent shadows
    • Set the renderer’s shadowMapEnabled property to True (to tell the renderer that shadows can be rendered)
    • Set the castShadow property of objects and light sources to True (tells objects and light sources that they can transmit shadows)
    • Set the receiveShadow property of the object that receives this shadow to True (tells the object that it can receive shadows from other objects)
  • Mesh (mesh model)
    • Wrap the material around the shape
    • Receive two parameters (Geometry, material)
      • Geometry is a geometric model
      • Material is a material, which can be an array type. You can give as many materials to as many faces

Once we have created the graphics and created the textures (lights and shadows are not required), we can use the mesh to build the model and render it

Create a colorful cube

// Create a cube creatCube() {const geometry = new THREE.BoxGeometry(10, 10, 10); // Create material insensitive to light const materialArr = []; materialArr.push(new THREE.MeshBasicMaterial({color: 0xfca745})); materialArr.push(new THREE.MeshBasicMaterial({color: 0xfc4545})); materialArr.push(new THREE.MeshBasicMaterial({color: 0xffd500})); materialArr.push(new THREE.MeshBasicMaterial({color: 0x28ff00})); materialArr.push(new THREE.MeshBasicMaterial({color: 0x002bff})); materialArr.push(new THREE.MeshBasicMaterial({color: 0xbd00ff})); This. Cube = new THREE.Mesh(Geometry, materialArr); this.scene.add(this.cube); }Copy the code

Textures

  • Attached to a surface, usually a 2D image

Creating a sphere with a texture (image) requires light

// Create a sphere that needs light creatSphere() {const geometry = new THREE.SphereGeometry(5, 32, 32); Const load = new three.textureLoader (); const tureImg = load.load('static/js/2.jpg'); / / create a material, need sunlight const material = new THREE. MeshLambertMaterial ({map: tureImg}); // Wrap tureImg. WrapS = THREE. Repeatwraps; tureImg.wrapT = THREE.RepeatWrapping; tureImg.repeat.set(2, 2); this.sphere = new THREE.Mesh(geometry, material); this.sphere.position.x = 0; this.sphere.position.y = 10; this.sphere.position.z = 10; this.scene.add(this.sphere); }, // add light initLight() {// create an AmbientLight const ambiLight = new THREE.AmbientLight(0x333333); this.scene.add(ambiLight); // Create a light from a specific direction, not from a specific location. Const direLight = new THREE.DirectionalLight(0xffFFFF, 1.0); const direLight = new THREE. Direlight.position. set(100, 300, 100); // Set direlight.position. set(100, 300, 100); this.scene.add(direLight); }Copy the code

Controls (Controls)

  • You need to use the OrbitControls.js plug-in to enable the scene to interact with the mouse

(Continue to be updated at…..)