Location>code7788 >text

ThreeJs-07 Manipulate Objects to Implement Furniture Editor

Popularity:375 ℃/2024-12-19 05:46:15

This chapter realizes the effect, through the gui quickly add scenes, furniture, and can quickly set the furniture to achieve an editor effect

GIF

I. Basic setup and object addition list

Change it with a case you've done before

image-20241203222614342

First don't have the model, then change the background color and add a mesh helper

image-20241203223414939

image-20241203223420894

1.1 Adding scenarios

First add a function to the event object, then click will call this function, and this function is to add this variable to the scene, then the variable will be assigned to the scene model to be loaded.

image-20241203224245672

image-20241203224323711

Same loading model, except instead of loading it directly, the basicscene is put in after clicking on it

image-20241203224803185

GIF

1.2 Adding objects

Next make two buttons to add a potted plant and a sofa

Because there may be a lot of objects here, a loop is used, if the data is such that such data can be given by the backend to the

image-20241203230013934

Create a folder for the gui, use a loop to add buttons to the folder, and note where the clicked buttons go to look for this function to add the object in

image-20241203230520929

GIF

II. Manipulating objects with transform controllers

image-20241204220049916

Creating a controller after import

First you need to pass in two parameters camera and canvas element

Then when the controller changes, it also constantly refreshes the scene changes

image-20241204221922625

Also listen to the event of dragging the controller on the object, while dragging the track controller does not move, i.e. the scene does not move.

image-20241204222127419

And then when adding an object in to make that object have a controller.Just bind the object via his attach method.

image-20241204222319850

I made a stupid mistake. I've been doing this for a while. I'm not going to talk about it.

Anyway, that's the end result.

GIF

2.1 Furniture list and control object switching

Start by creating a furniture list folder

Then the logic is to drop a gui into the folder after clicking on a new object and to add a change controller to the object to select it.

image-20241210224223274

GIF

2.2 Displacement rotation scaling mode

Patterns are required

image-20241210224841923

image-20241210225233311

GIF

Of course it can also be set up quickly by setting up keyboard events

image-20241210225448461

2.3 Switching coordinates and deselecting objects

There are two coordinates local and world, you can make the object rotate and shift around whatever coordinates, etc., deselect the direct call method

image-20241210225810776

image-20241210225838733

2.4 Fixed ratio for scaling displacement rotation

Now the zoom displacement and so on are more arbitrary, if you want to fix each displacement and so on the distance can be set so, first of all in the gui can define a variable is no longer a function of the

image-20241210230423077

Then create a folder thatNote that if gui is a variable, it can be followed by an object to set the optional range of values for the variableThen the eventobj gets the value of each change and assigns it to tcontrols.

image-20241210230544072

GIF

Rotation and scaling are the same, but the settings are different.

take note ofThe gui can set a range and change the size each time it is dragged

image-20241210230817102

2.5 Adsorption floor and interior light switch

It is now possible to drag randomly to the bottom of the scene, if you want to keep the object on the ground all the time

Also set a gui variable

image-20241210231334554

Add a button

Just change this variable, and then you can use the controller's change event to keep getting the value of the variable so that the y-axis stays at 0 and doesn't fall to the ground.

image-20241210231602572

image-20241210231711354

GIF

The lights in the room are turned on by first defining a gui

Need to tone map the renderer

At the same time, adjust the exposure to 1

image-20241210232107928

Change exposure by judging the value of the light

image-20241210232225690

GIF