In this section we talk about how to paint cabinets, in fact, as if the cabinet a bit more complex, realistic 3D modeling tool that can be used, but most of the projects would not have done so much trouble, then we can abstract the cabinet, first of all it is a cuboid having a length and breadth of the iron, and then we took out from the middle of the cube while a smaller size of the dig out a position like a door, as follows
initCabient () {
the let = _self the this;
// set with play Mesh has the advantage that our group in position do not control, we only need to control the position of the Group
this.initCabientObject = new new Group ();
var = Cabinet_material new new THREE. MeshPhongMaterial ({
Color: 0x42474c,
});
// can not be used before initializing Note clones same geometry here, because the length and breadth of the aggregate used to clone are both 1, we see are amplified, and in fact, the size of the body does not change, so do the subtraction by the geometry will be reduced when the no
var = _self.returnLambertObject Cabinet (60, 200 is, 60, 0, Cabinet_material, 0, 0, 0);
var Cabinet_inside _self.returnLambertObject = ( 54 is, 196, 56 is, 0, Cabinet_material,. 3, 0, 0);
this.initCabientObject.add (_self.returnResultBsp (Cabinet, Cabinet_inside, 2, 0)); // this step a hollowed box has occurred
/ / following three lines of code only for demonstration
this.initCabientObject.position.set (0, 100, 0) ;
this.initCabientObject.rotation.y = 1 * Math.PI;
this.scene.add(this.initCabientObject);
}
FIG codes results are as follows (note that the following call to init method):
In this way a hollowed-out box appeared, out of the box leaving a shortfall of what? Sharp-eyed friend had seen, missing a door, right, a shortage we draw a door, door material on the articles painted wall time has come to introduce, then I take it directly with material like,
var doorgeometry = new THREE.BoxGeometry (55, 190, 2); var = new by THREE.Mesh (doorgeometry, _self.DoorRenderingList); door.position.set (30, 0, 0); door.rotation.y = 0.5 * Math.PI; // -逆时针旋转, +顺时针 door.nature = "Cabinet__door"; door.isClose = 1; this.initCabientObject.add (by);
After completion of the initialization and then stuffed into the door initCabientObject to the effect is as follows (see small is not clear)
Such a cabinet would take shape, it is not very simple! Of course, our initCabient method we can see that he's just not the initialization painted cabinets from the name, so in this function in the following three sentences that would have deleted
this.initCabientObject.position.set(0, 100, 0); this.initCabientObject.rotation.y = 1 * Math.PI; this.scene.add(this.initCabientObject);
A cabinet group (without the device) is completed here, although Group raycaster laser device can not be selected, but which is very superior in this projection, and we do not need to how tubes of different directions to open the cabinet door, in different directions direction and position of the different positions inside the enclosure of the device is not have to change, we just need to control the position and angle of the entire group just fine, just as there would have been a lot of people on the square, we need to control everyone's position and face the direction of a lot of trouble, but if we let the people on the square on a car (hypothesis great car, can accommodate anyone on the lower square), then to control the position and orientation of the passengers inside the car is very simple, we do not control the position of the passengers inside, just need to know the location and direction of the car on OK.
Since initCabient This method is not used to draw cabinet, then it is used to doing it? Of course, the model is done, just like the factory to produce a number of cabinet, he does not need the production of each product individually, just first production of a template, then others would follow this template clone just fine, this template is not generally It will be handed over to the buyer, but as a template, then no matter what time you want to, I just need to continue just fine in accordance with the template clone, which is why I add my template from above into the scene that a few codes deleted s reason.
Next we define a set of position data of the cabinet
cabient: [
{ x: 130, z: 120, codeID: "XZ100001", angle: 0 },
{ x: 230, z: 120, codeID: "XZ100002", angle: 0.5 },
{ x: 330, z: 120, codeID: "XZ100003", angle: 1 },
{ x: 430, z: 120, codeID: "XZ100004", angle: 1.5 },
]
Then we started data encapsulation method by drawing cabinet:
/ **
Method * added to the room inside the cabinet
{data cabinet * @param Result}
* /
createCabient (Result) {
the let = _self the this;
result.map ((Item) => {
the let cabientMod = _self.initCabientObject. clone ();
cabientMod.position.set (item.x - _self.houseWidth / 2, 100, item.z - _self.houseHeight / 2);
cabientMod.rotation.y * = item.angle Math.PI;
// this at the cabinet is provided for each name to identify cabient _ plus plus enclosure ID, will be used later
cabientMod.name = "cabient_" + item.codeID;
_self.scene.add (cabientMod);
})
};
So we have to add the data information of the cabinet to the scene, see the figure
At this point the cabinet has been painted well, under an article I will describe in detail how the simplest of simple dynamic efficiency painting equipment and devices, well, this article to end here, if you spectators feel this articles okay, trouble spots a "recommended", thank you!
By the way, before the articles published hundreds of page views in one day, explain things to many people in this study, to welcome you all pointed out the shortcomings and deficiencies Three.js series of articles in the comments area, before writing the mess article If there be unsuitable please let me know, would rather not write technical articles can not be written because there are wrong and misleading others