# Use three in Vue JS create a 3D conference room model

Chapter II

This chapter mainly creates 3D models, which are divided into three JS built-in basic model and external import model

# Basic model

The basic solid model is probably the solid shape of the foundation such as cube, cuboid and ball. First, the floor and wall of our conference room are actually the basic cuboid. For this basic solid model, we mainly use three Boxbuffergeometry object:

## metope

As for the wall, this time it is a solid wall, so it is relatively simple. I have roughly divided it into two steps

### Create a box

```export const addCubewall = function (
width,
height,
depth,
angle,
material,
x,
y,
z,
name
) {
let cubeGeometry = new THREE.BoxGeometry(width, height, depth);
let cube = new THREE.Mesh(cubeGeometry, material);
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.rotation.y += angle * Math.PI; //-Counterclockwise rotation, + clockwise
cube.name = name;
return cube;
};
```

I took out this code as a public method. From this code, we can see that the basic conditions for creating a box are width, height, thickness, material, orientation and angle. The specific attributes can go to three JS official website.
Mesh is composed of geometry and material.

### Creating wall faces

When you create a box, it's actually very simple to create a wall. You just need to change the attribute value and go directly to the code

```	data() {
// Foundation size
baseX: 600, // Foundation length
baseY: 1, // High foundation
baseZ: 240, // Foundation width
}
createWell(long, width, height, x, y, z, name) {
long,
height,
width,
0,
new THREE.MeshPhongMaterial({
color: 0xaaaaaa,
opacity: 0.5,
transparent: true,
}),
x,
y,
z,
name
);
},
// initialization
init() {
this.createWell(
this.baseY,
this.baseZ,
100,
this.baseX / 2,
-10,
0,
"East wall"
);
this.createWell(
this.baseX,
this.baseY,
100,
0,
-10,
-this.baseZ / 2,
"South wall"
);
this.createWell(
this.baseY,
this.baseZ,
100,
-this.baseX / 2,
-10,
0,
"West wall"
);
this.createWell(
this.baseX,
this.baseY,
100,
0,
-10,
this.baseZ / 2,
"North wall"
);
```

The above function is to create the wall, then call it in the initialization function, adjust the different attributes according to the different positions of the four walls, this is relatively simple, so we can directly look at the code.
Then I'll talk about the process of creating a geometry:
1. First, you need to create a geometry type, three JS provides many objects for this. Creating geometric types generally requires elements such as length, width, thickness, angle and orientation. Of course, columns or irregular geometry are made of other attributes. Here is just an example of a box.
2. Next, create materials, and there are many types of materials. The MeshPhongMaterial used in this article is a material that can be highlighted. You can see other types on the official website.
3. With the geometric type and material, you can create the network model mesh. After creation, you need to add the network model to our 3D Scene scene. add(Mesh)

## floor

The creation of the floor is the same as that of the wall. It is still the basic solid model - cuboid. Without much talking, you can directly write the code

```   createFloor() {
let that = this;
let geometry = new THREE.BoxBufferGeometry(
this.baseX,
this.baseY,
this.baseZ
);
// Request picture resources
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = 10;
texture.repeat.y = 5;
let material = new THREE.MeshPhongMaterial({
map: texture,
});
that.ground = new THREE.Mesh(geometry, material);
that.ground.position.y = -60;
});
},
```

The process is the same as creating the wall, but we pasted a picture for the floor on this basis, and here we need to use thread One thing to note about the textureloader object is that if it is a vue project, the load method can be used normally. If it is a native project, remember a service to support requesting image resources.
With picture resources, the key is to assign this value to the map attribute in the floor material, that is, color map. So we created the floor and wall

When we do 3D development, sometimes some complex models, if we use the basic model to splice, it will consume a lot of time. At this time, we can load some formed 3D models externally to meet our needs. Three.js loading external file formats include stl,obj,gltf,fbx, etc. next, I mainly give examples of obj and gltf I use

When using obj files, we mainly need mtl and obj file, where obj file is the core, basically as long as it is loaded obj file can display the model, and mtl contains the material information of the model, such as the color of the model, mapping path, reflection mode and so on.

```addObjItem() {
let that = this;
"/table/file.obj",
function (object) {
object.position.set(0, 60, 0);
object.scale.set(0.05, 0.05, 0.05);
}
// function (xhr) {
// },
// function (error) {
//   console.log(error);
// }
);
});
},
```

Roughly explain the loading process, first request mtl file resource, replace the obtained material information with the material information of the currently created object, and then request obj file resource, add the acquired model to the 3D scene. Here is one thing to note: the size of the external model we load may be too large or too small compared with our scene, so we must use it according to this scale. The set () method is used to scale or enlarge the model
The first one is the callback function of loading progress, and the second one is the callback function of loading failure. It is suggested that when you use OBJ file for the first time, print the loading result and see its object structure. Loading a gltf file is relatively simpler than an obj file because we only need to load one gltf file, and the process and loading obj file only load obj files are consistent, so you can directly enter the code

```addGltfItem() {
let that = this;
gltf.scene.position.set(0, 0, 95);
gltf.scene.scale.set(16, 12, 12);
});
},
```

It should be noted here that although the process of loading GLTF file and loading OBJ file is very similar, the structure of the loaded object is different. For details, you can print and compare the loading results when using

# summary

This chapter mainly explains the creation of the model, the basic geometric model and the import of external model files.
There are some specific attribute adjustments in the code in this article, which can be ignored when you look at it. Adjust these attributes according to your own needs

Keywords: Javascript Three.js Vue Vue.js 3d

Added by baffled_in_UK on Sat, 12 Feb 2022 06:54:42 +0200