“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Since I built my 3D scene for testing, I used HTML + three. Later, the following problems occurred in the process of migrating the code to the VUE project:

  • Downloading three dependencies through NPM does not work properly
  • There was a problem with the import path, causing the model to not render properly
  • The 3D scene was not destroyed after rendering

Three dependencies downloaded via NPM are not working properly

The JS file related to Three was used in the original project. When the project was migrated, WE planned to download the relevant dependencies directly through NPM for operation. However, we found that there would be an error if we imported the relevant controls in a conventional form after downloading the dependencies.

Import * as three from 'three' import * as three from 'three' But I'm using the following forms of import from three package import documents still complains import "three/examples/js/controls/OrbitControls"Copy the code

This problem was solved by importing the downloaded JS files directly, placing them in the public directory and referencing them directly in index.html.

There was a problem with the import model path

At first, I put the model file that I need to import under SRC /assets, but the import method could not find the model file, the code is as follows:

let mtlLoader = new THREE.MTLLoader(); let objLoader = new THREE.OBJLoader(); mtlLoader.setPath(`@/assets/objs/`); mtlLoader.load("server2.mtl", function(materials) { materials.preload(); objLoader.setMaterials(materials); objLoader.setPath(`@/assets/objs/`); objLoader.load("server2.obj", function(object) { }); }); // The page displays an error and cannot render properlyCopy the code

Select * from public/static directory; select * from public/static directory;

let mtlLoader = new THREE.MTLLoader();
let objLoader = new THREE.OBJLoader();
mtlLoader.setPath(`/static/objs/all/`);
mtlLoader.load("server2.mtl", function(materials) {
  materials.preload();
  objLoader.setMaterials(materials);
  objLoader.setPath(`/static/objs/all/`);
  objLoader.load("server2.obj", function(object) {

  });
});
Copy the code

However, after package deployment, the path of 3D model is wrong again. The reason is that the path of the packaged file changes, but the set path does not change with package, resulting in the need for different paths between package and local runtime.

Since our project is accessed through IP after deployment, my approach is to judge the current URL and distinguish whether it is run locally or online. You can also use different paths for different commands through the Webpack configuration;

let resourcesUrl = ''; // let mtlLoader = new three.mtlloader (); let objLoader = new THREE.OBJLoader(); mtlLoader.setPath(`${resourcesUrl}/static/objs/all/`); mtlLoader.load("server2.mtl", function(materials) { materials.preload(); objLoader.setMaterials(materials); objLoader.setPath(`${resourcesUrl}/static/objs/all/`); objLoader.load("server2.obj", function(object) { }); });Copy the code

The 3D scene was not destroyed after rendering

In the project, it was found that frequent switching between 3D scenes and other pages would lead to page lag, because the relevant model was not cleared during route switching, which occupied a lot of memory.

So you need to destroy the model when you leave the 3D scene and release related variables such as renderer, Scene, Camera, controls

scene.remove(mesh); Scene = null; camera = null; controls = null; renderer.dispose();Copy the code