The rendering of a 3D model consists of several main modules
  • Renderer: The WebGLRenderer, used to host the scene, needs to mount DOM nodes
  • This is the place where objects, lights and cameras are placed.
  • Camera: what does the browser display when the camera sees it
  • Light: Light, this is the light source, you can set all kinds of lights, if there is no light, then it may be dark, you can’t see the object.

Personally, I think 3d model rendering can be imagined as a real life scene.

The process of loading a model into rendering looks like this:

New renderer:

renderer = new THREE.WebGLRenderer()
Copy the code

New scene

const scene = new THREE.Scene()  // All the models and lights need to be added to the scene
Copy the code

Add the camera

const camera = new THREE.PerspectiveCamera(45.window.innerWidth / window.innerHeight, 0.1.100000)
Copy the code

Add track Controller

controls = new OrbitControls(camera, renderer.domElement)  //renderer.domElement is the mounted DOM
// It can be understood that the orbit controller is equipped with the camera and can control the rotation and movement of the camera, etc
Copy the code

The model is loaded

const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
      dracoLoader.setDecoderPath('GLTF - pipeline path')  // You can place a public folder locally or in the cloud
      loader.setDRACOLoader(dracoLoader)
      loader.load('Model address', (GLTF) => {modelData = gltf.scene scene.add(modelData)// Model data must be added to the scene before it can be displayed
      }, (val) = > {
        const loadProgress = (val.loaded / val.total) * 100
        // The model can be loaded by loading})},Copy the code

Add the light

const ambient = new THREE.AmbientLight('#FFFFFF')
scene.add(ambient) 
Copy the code

Write down any minor problems you encounter:

1. After loading the model into the browser, a blank page is displayed and no error is reported.

Generally, the camera is not aligned with the object, or the camera is too close to the object to wear the model, or too far away to see the object is too small, at this time, it is necessary to set the camera position to adjust the distance of the model object. Forgetting to add lights can also cause you to lose sight!

2. When the screen size changes. Center the model object and have the model initially displayed at a certain scale

To achieve the model center and initial render display size ratio by setting the camera position, the camera position can be determined by the length of the model, and then set the camera position on the X, Y, and Z axes respectively

const box3 = new THREE.Box3()
      box3.expandByObject(model)    // Create a new Box3 wrapper around the model
const center = box3.getCenter()     // Get the center of the model
const modelSize = box3.getSize().length()  // Calculate the length of the model and use it to set the camera position
camera.position.set(modelSize / 6, modelSize / 6, modelSize / 6) // Set the camera distance according to the situation
camera.lookAt(center)  // Keep the camera looking at the model
Copy the code
3. How to solve the problem that model enlargement may lead to penetration?

Set minDIstance(how much the camera is allowed to move forward) to keep the camera lens at an impenetrable distance from the model by taking the length of the model and setting this distance to a multiple of the length

controls.minDistance = modelSize / 10  // Set the closest and furthest distance the camera can be placed
controls.maxDistance = modelSize / 2   //modelSzie is the length value of the model calculated above, and the scale is set according to the situation
Copy the code
4. A minor problem with switching models (loading different models) for the same component (e.g. Vue).
  • The most initial parts such as renderer, lights, scene initialization can only be performed once, others need to be destroyed and reloaded, otherwise the cumulative loading will cause rendering anomalies (several models exist at the same time, multiple lights get cold, etc.) and waste memory.
  • The previous animation function is still being called and executed. If it is called again, the animation frequency will increase, resulting in fast animation. Therefore, it is necessary to unbind the function in time
watch: {
    modelUrl() {
      cancelAnimationFrame(reqAF)  ReqAF = requestAnimationFrame reqAF = requestAnimationFrame
      scene.remove(modelData, tipGroup, coneGroup) // The previous scene is add(), here use remove to remove the models, lights, etc. Otherwise the previous ones will add up, resulting in multiple models or duplicate lights.}},Copy the code

The above is personal note, if there is any wrong place welcome to correct!

For more information about three.js, please check the official documentation: threejs.org/docs/index….