Note: The company needs to do this project, I have never contacted with it before, so I collected all the materials I can find to make a demo project, I hope it will be helpful to everyone who needs it.

1. Import 3D model: OBJ + MTL file

Note:

(1) Before importing the model, you need to manually modify the path in the MTL file, because if you do not change the path, it will lead to the failure of material loading

(2) It is better not to define all variables in data, because a larger model will lag and so on. So far I’m defining it externally.

The model needs to be in the root directory, otherwise it will not be read.

2. Using three.js is made up of scene (mesh model (concrete object + material) + lighting (point light (shadow) + ambient light) + camera + rendering (mouse zoom drag etc.).

So let’s initialize

init() { let container = document.getElementById("container"); /* scene */ scene = new three.scene (); /* camera */ / scene. Background = new THREE.Color(0xa0A0A0); camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 1, 1000 ); camera.position.set(292, 109, 268); camera.position.set(0, 0, 50); }Copy the code

Import BG from ‘.. /.. /public/xxxx.png’new THREE.TextureLoader().load(BG);

The next step is to add a light source, which would otherwise result in total darkness.

Let ambientLight = new THREE.AmbientLight(0x999999); 0.6 let pointLight = new three. pointLight (0xffFFFF, 0.8); // Add light to the scene scene.add(ambientLight); Camera.add (pointLight); camera.add(pointLight); camera.add(pointLight); // We added the camera to the scene scene.add(camera);Copy the code

New OrbitControls(Camera, Renderer.domElement); AutoRotate is set to true if you want the model to rotate automatically. It defaults to 2.0, and you can use the autoRotateSpeed property if you feel too fast. Maximum and minimum zoom effects are maxDistance/minDistance, and their values are number.

3. Load the model

LoadObj () {let _this = this; let manager = new THREE.LoadingManager(); manager.addHandler(/\.dds$/i, new DDSLoader()); mtlloader.load("/model/6/1.mtl", (materials) => { objloader.setMaterials(materials); materials.preload(); objloader.load( "/model/6/1.obj", function (obj) { // oldChildren = _this.dealMeshMaterial(obj.children); obj.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.transparent = true; Child. The material. The reflectivity = 0.9; }}); Obj. Scale. The set (0.02, 0.02, 0.02); obj.position.set(0, -7, 0); scene.add(obj); },fn(), fn2()); }); }, fn() // fn function is called on success fn2 // fn2 failureCopy the code

Get the progress value from fn if you need to load progress

4. Click Highlight

When we need position in initialization register an event (I think single-player experience is bad, with the double click) the renderer. The domElement accordingly. The addEventListener (” dblclick “, enclosing mouseClick, false);

I kept the material of each module when loading it

/** * Keep the original material of each model */ dealMeshMaterial(arrs) {let result = []; for (let i = 0; i < arrs.length; i++) { let obj = { // name: arrs[i].name, material: arrs[i].material, uuid: arrs[i].uuid, }; result.push(obj); } return result; }Copy the code

Click on the event

MouseClick (event) {// Restore the previous click state this.showDetailBox = false; this.restore(scene.children[2].children, oldChildren); Let intersecting Array = this.getIntersecting array (event, event.clientx, event.clienty); // console.log(intersects); If (intersects. Length! = 0 && intersects[0].object instanceof THREE.Mesh ) { selectObject = intersects[0].object; if (this.isClick) { this.showObject(selectObject, event); } else { console.log(1111); } } else { // console.log(selectObject); this.colseData(); }}Copy the code

The project address

Note: this demo is implemented using VUe3.0, if you want to use VUe2.0, just copy the code. For example: Scene camera variables need to be defined outside export default, otherwise the viewer will crash or get stuck.

gitee : https://gitee.com/chen_post/vue_three#compiles-and-hot-reloads-for-development