Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to solve the problems encountered in the migration of the three project to the vue project, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

Three dependencies downloaded through npm do not work properly

Three-related js files were used in the original project, but when the project was migrated, it was intended to download related dependencies directly through npm, but found that importing related controls in the usual form after downloading dependencies would report an error.

/ / for example, in the following code, importing three can normally create scenes and models / / but using controls such as OrbitControls will report an error import * as THREE from 'three'// after querying data, some people say that it needs to be imported separately, but I will still report an error import "three/examples/js/controls/OrbitControls" if I import relevant files from the three package using the following import form

At that time, the problem was solved by directly importing the downloaded js file, putting the file in the public directory and referencing it directly in index.html.

There is a problem with the path of importing the model

At first, I put the model file that I need to import under src/assets, but the method of importing the model can't 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) {});}); / / error is reported directly and cannot be rendered properly

After querying the data, someone said to put the model file in the public/static directory and import it successfully after modification. The code is as follows:

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) {});})

However, after packaging and deployment, the path of the 3D model has an error again, because the path of the packaged file has changed, but the set path will not change with the packaging, resulting in different paths for packaging and local runtime.

Because our project is accessed through ip after deployment, my approach is to determine the current url and distinguish whether it is run locally or online; we can also use different paths according to different commands through webpack configuration

Let resourcesUrl =''; / / assign different paths by judgment 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) {}) }); 3D scene is not destroyed after rendering

In the project, it is found that frequent page switching in 3D scenes and other pages will lead to page stutters, which is due to the large amount of memory consumed due to the failure to clear the relevant models when switching routes.

So you need to destroy the model after leaving the 3D scene, and release related variables, such as renderer, scene, camera, controls.

Scene.remove (mesh); / / the model under scene scene = null;camera = null;controls = null;renderer.dispose (); Thank you for reading this article carefully. I hope the article "how to solve the problems encountered in migrating the three project to the vue project" shared by the editor will be helpful to you. At the same time, I hope you will support us, pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.