1. What is Webgl? What are the front-end usage scenarios?

  • Webgl (Web Graphics Library) is a set of javascript apis implemented according to OpenGL ES 2.0, which can render interactive 3D and 2D graphics in the browser. The API is available in theHTML5 canvas Element, which can take advantage of the USER device’s GPU acceleration.
  • The front end can be developed using the Threejs library, a 3D engine running on a native WebGL package that encapsulates important tooling methods and rendering cycles in 3D rendering to simplify details. The front end can create 3D scenes and models on the client. Specific business scenes include 3D visualization, 720 degree preview of products (car and room), massive data visualization, H5 / wechat games and webVR.
  • Detector.js: Determine canvas compatibility and WebGL compatibility.

Compatibility:

Mobile terminal: Android 5 or above, iOS 8 or above.

2. Threejs basics

2.1 Basic Concepts
  • Scene: the container that holds everything
  • Camera: Eyes in webGL world.
  • Viewport: A two-dimensional rendering of a 3D scene, viewed from the browser’s Canvas element.
  • Field of View: The Angle between the left and right edges of the camera’s visual range.
  • View frustum: The space in which objects can be rendered into the viewport (only objects that are inside the viewport space can be seen)
  • Near clipping plane: The side of the cone close to the camera, which is actually the viewport.
  • Far clipping plane: The plane on which the visual cone is furthest away from the camera.
2.2 Formula Part

L = n * Math.PI * r / 180 (n central Angle)

Angle conversion formula: 30 * math.pi /180 // 30 degrees

2.3 methods

  • Vector1. angleTo(vector2) // The arc length between two vectors

  • Camera.getworlddirection () // Camera Angle

  • Set the position vector perpendicular to itself:

    // Rotate around its vector
var fundVec = new THREE.Vector3(0.0.1);
var selfVec = new THREE.Vector3(x, y, z).normalize();
var newVec = new THREE.Quaternion().setFromUnitVectors(fundVec, selfVec);
hotArea.quaternion.multiply(newVec);
Copy the code

  • Coordinate conversion:

    // Convert 3d coordinates to 2d
var qiutweenPos = qiu163.getWorldPosition();
var vec = new THREE.Vector3();
var widthHalf = window.innerWidth / 2;
var heightHalf = window.innerHeight / 2;
qiu163.updateMatrixWorld();
vec.setFromMatrixPosition(qiu163.matrixWorld);
vec.project(camera);
vec.x = ( vec.x * widthHalf ) + widthHalf;
vec.y = - ( vec.y * heightHalf ) + heightHalf;
console.log(vec)

Copy the code

  • Horizontal and vertical screen event monitoring methods:

// horizontal event listener method
var innerWidthTmp = window.innerWidth;
function screenOrientationListener() {
  try {
    var iw = window.innerWidth;
    var orientation;
    // Screen orientation change processing
    if(iw ! = innerWidthTmp) {if (iw > window.innerHeight) orientation = 90;
      else orientation = 0;
      // Call the screen spin eventonWindowResize(); innerWidthTmp = iw; }}catch (e) {
    console.log(e);
  };
  // Check whether the screen turns at fixed intervals. Default: 300 ms
  setTimeout(screenOrientationListener, 300);
}
// Enable horizontal and vertical event listening
screenOrientationListener();
Copy the code

3. Threejs + Tweenjs

  • Can achieve 3d scene animation effect

4. Tip

  • For models with DPR > 2, such as iphone6Plus, if the model is too large, it will cause flash back. Set the following parameters:

    renderer.setPixelRatio(window.devicePixelRatio<3 ? window.devicePixelRatio : 1)
Copy the code

  • Multi Polygon maps can be swapped for Spotlight coloring

  • 1 Geometry corresponds to 1 texture in C4D

  • Position 3js in C4D uses getWorldPosition()

  • The default is sphere projection map,

  • The default is a UVW projection map, and the polyhedron mesh needs to be noted

  • When selecting the model loader, it should be noted that dae format files are recommended to be used directly if the scene is complex, and camera light can be exported to play animations, etc. The shortcoming is that material needs to be added by ourselves.

  • If using a single model, obJ format is available, and materials can also be exported to MTL format.