threeJS basic learning --- Creating a scene

Before starting

Start using three JS, you need a place to display it. Save the following HTML code as an HTML file on your computer, and three.js Copy it to the lib / directory in the directory where the HTML file is located, and then open the HTML file in your browser. Create creatingaScene.js directory js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="lib/three.js"></script>
    <script src='js/creatingaScene.js'></script>
</body>

</html>

Create a scene

//creatingaScene.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
 45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

We have now established the scene, camera and renderer.
Understanding of camera in threejs:
The role of the camera is similar to that of the projector when we watch movies. The camera constantly takes pictures of the scenes we create, and then renders them to the screen through the renderer. Finally, the 3d scenes we create are displayed on the screen. Generally, the camera is forbidden, but if we want to see more fields of vision in the scene, we can do it by constantly moving the camera. If we have to use something as an analogy, our eyes are perfect. three.js provides two basic cameras: orthographic camera and perspective camera. The size of the object projected by the perspective projection camera decreases with the distance, while the size of the object projected by the orthographic projection camera is not affected by the distance. The difference between the two can be briefly explained by the following figure:

const camera = new THREE.PerspectiveCamera(
 45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

In the above code, new three The perspectivecamera constructor is used to create a perspective projection camera. The constructor has a total of four parameters: fov, aspect, near and far. fov refers to the vertical visual field angle of the visual cone of the camera. The minimum value is 0, the maximum value is 180, and the default value is 50. 45 is generally defined in the actual project, because 45 is the closest to the normal eye opening angle of people; Aspect refers to the aspect ratio of the visual cone of the camera. The default aspect ratio is 1, which means that you see a square. In the actual project, the aspect ratio of the screen is used; Near indicates the near end face of the viewing cone of the camera. This value is 0.1 by default and will be set to 1 in actual projects; Far refers to the far end face of the visual cone of the camera. The default value is 2000. This value can be unlimited. The simple point is the farthest distance we can see.

In addition to the above four basic attributes, the perspective projection camera has six attributes: filmGauge, filmOffset, focus, isPerspectiveCamera, view, zoom. These parameters are rarely used in practical applications and are basically kept at default values. If you want to understand the meaning and functions of each attribute, you can understand it through official documents.

Add cube

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

To create a cube, we need a BoxGeometry object This object contains all the vertices and faces in a cube. In the future, we will explore more in this area.

Next, for this cube, we need to give it a material to make it have color. Three.js comes with several materials. Here we use meshbasic material. All materials have objects that apply to their properties. Here, for simplicity, we only set a color attribute with a value of 0x00ff00, that is, green. What is done here is the same as using hex colors color format to set colors in CSS or Photoshop.

Third, we need a Mesh. The Mesh contains a geometry and the material acting on it. We can directly put the Mesh object into our scene and let it move freely in the scene.

By default, when we call scene When you add (), the object will be added to the (0,0,0) coordinates. But it will keep the camera and cube together. To prevent this from happening, we just need to move the camera slightly outward.

Render Scene

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

Move the cube

Before you start, if you have written the above code into the file you created, you can see a green square. Let's do something more interesting - let it spin.
Add the following code to the animate() function renderer Above the render call:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

summary

In this section, we create the scene, camera and renderer, and create a cube through threeJ Rotation this function rotates the cube.
creatingaScene.js complete code is as follows

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
 45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

Tags: ThreeJS

Posted by pibebueno on Tue, 19 Apr 2022 06:07:44 +0300