This is the 26th day of my participation in the August More Text Challenge

In real life scenarios, what we see with our naked eyes is based on conditions. If there is no light, everything around us is dark

In ThreeJS, there are a few things you need to put content on a page, and there are three basic elements: the scene, the renderer, and the camera, and nothing gets around those three basic elements

Follow this article to learn some concepts of scenarios

Scene (Scene)

Scenes are containers for content in each of our three.js projects. We can also have multiple scenes to switch between, where you can place your model, lights and camera. You can also adjust the position of the scene so that everything in the scene moves along with it.

THREE.Object3D

Object3D for easy operation, three. js inherits every object that can be directly added to the scene to a base class -three. Object3D. In the future, we will call the object inherited to this base class 3d object. To judge whether an object is inherited to Three. Object3D, we can judge as follows:

obj instanceof THREE.Object3D
// Inherit to return true otherwise return false
Copy the code

Add one to the scene3dObject:

scene.add(mesh); // Add the grid to the scene
Copy the code

This method can be used not only within a scene, but also to add a 3D object to another 3D object:

parent.add(child);
Copy the code

Gets a 3D object

object3D.name = "firstObj";
scene.add(object3D);

scene.getObjectByName("firstObj"); // Returns the first matching 3D object
Copy the code

Delete a 3D object

If we want to hide a 3D object without showing it, we can set its visible value:

mesh.visible = false; // Set to false, the model will not be rendered into the scene
Copy the code

If a model is no longer used and needs to be removed completely, we can use the remove method to remove it:

scene.remove(mesh); // Remove a model from the scene
Copy the code

Modify the location (3 ways)

A separate set

mesh.position.x = 3; // Adjust the position of the model so that x is 3 away from the origin.
mesh.position.y += 5; // Move the model's Y-axis position up 5 units from its current position.
mesh.position.z -= 6;
Copy the code

Set all at once

mesh.position.set(3.5, -6);  // Set the position of the model directly to 3 x, 5 y, and -6 Z
Copy the code

The position property of the three.js model is a three.vector3 object (which will be covered in later tutorials). We can simply reassign a new object:

mesh.position = new THREE.Vector3(3.5, -6); // The above Settings can also be set in this way.
Copy the code

Modify the size

A separate set

mesh.scale.x = 2; // Double the size of the model along the X-axis
mesh.scale.y = 0.5; // Double the size of the model along the y axis
mesh.scale.z = 1; // The model remains unchanged along the z-axis
Copy the code

The second is to use the set method:

mesh.scale.set(2.2.2); // Enlarge each direction by equal ratio
Copy the code

Third, since the scale property is also a three-dimensional vector, we can modify it by assigning:

mesh.scale = new THREE.Vector3(2.2.2); // Double in each direction
Copy the code

Modify model steering

The first way is to set the rotation of each axis separately:

mesh.rotation.x = Math.PI; // Rotate the model 180 degrees along x
mesh.rotation.y = Math.PI * 2; // The model is rotated 360 degrees along the y axis.
mesh.rotation.z = - Math.PI / 2; // the model rotates 90du counterclockwise along the z-axis
Copy the code

The second method is to reassign using the set method:

mesh.rotation.set(Math.PI, 0, - Math.PI / 2); // The rotation effect is the same as the first display
Copy the code

The third way, the model’s rotation property is actually an Euler Angle object. As we’ll see later, we can do this by reassigning an Euler Angle object:

mesh.rotation = new THREE.Euler(Math.PI, 0, - Math.PI / 2."YZX"); 
Copy the code