preface
This article will not explain the concepts of Three.js geometry, material, camera, model and light source in detail. It will first be divided into several modules to quickly demonstrate a box of small cases. You can quickly understand the infinite charm of Three.js according to these modules.
study
We will use Three.js to simply make a cube, so that we can have a better macro understanding of Three.js. I will break it down into code segments (modules) for development. The modules are as follows:
- Scene object
- Grid model
- light source
- camera
- Renderer object
- Render operation
1. Create html file
First, we have to create an html file so that there is room for development. After the creation, we can introduce the Three.js file. Today, it is the protagonist. I directly import the remote URL address for loading. You can also download it from the official website and import it locally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>three.js Small case</title>
<!--introduce three.js-->
<script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
</head>
<body>
</body>
</html>
2. Create scene objects
Create a virtual 3D scene with the help of Three.js engine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>three.js Small case</title>
<!--introduce three.js-->
<script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
</head>
<body>
<script>
/*
* Create Scene object Scene
*/
var scene = new THREE.Scene();
</script>
</body>
</html>
3. Create grid model
This line of code new THREE.BoxGeometry(200, 200, 200) means to create a cube object with a length of 200, a width of 200 and a height of 200. Then, the material is defined for the cube object through the code new THREE.MeshLambertMaterial. Here, it can be understood as the attributes of the cube (including color, transparency and other attributes). Here, the color attributes are listed temporarily. Then we need to associate the cube with the attribute, use the grid model, pass them in as two parameters of the constructor Mesh, and finally add them to the scene.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>three.js Small case</title>
<!--introduce three.js-->
<script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
</head>
<body>
<script>
/*
* Create scene objects
*/
var scene = new THREE.Scene();
/*
* Create mesh model
*/
var geometry = new THREE.BoxGeometry(200, 200, 200); //Create a cube Geometry object
var material = new THREE.MeshLambertMaterial({
color: '#f4f4f4',
}); //Material object material
var mesh = new THREE.Mesh(geometry, material); //Mesh model object mesh
scene.add(mesh); //Add mesh model to scene
</script>
</body>
</html>
4. Set the light source
The code new here. Pointlight ('#fff') creates a point light object. The parameter #fff defines the light intensity. You can try changing the parameter to #666, and you will see the surface color of the cube darken. This is very easy to understand. In real life, the light intensity becomes low, and the surrounding scenery will naturally dim. For example, the flare in the night sky is an example of a point light source. The code here. Ambientlight ('#333') creates an ambient light object. The color of the ambient light will affect the whole scene. The ambient light has no specific light source and is a light source simulating diffuse reflection. Therefore, it does not need to specify a position. It can irradiate the light evenly on each object in the scene. Generally, it is used to weaken the shadow or add some colors to the environment, Therefore, you cannot use ambient light as the only light source in your scene.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>three.js Small case</title>
<!--introduce three.js-->
<script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
</head>
<body>
<script>
/*
* Create scene objects
*/
var scene = new THREE.Scene();
/*
* Create mesh model
*/
var geometry = new THREE.BoxGeometry(200, 200, 200); //Create a cube Geometry object
var material = new THREE.MeshLambertMaterial({
color: '#f4f4f4',
}); //Material object material
var mesh = new THREE.Mesh(geometry, material); //Mesh model object mesh
scene.add(mesh); //Add mesh model to scene
/*
* Set light source
*/
var point = new THREE.PointLight('#fff'); // Point source
point.position.set(300, 100, 200); //Point light location
scene.add(point); //Add a point light to the scene
var ambient = new THREE.AmbientLight('#333');// Ambient light
scene.add(ambient); //Add ambient light to the scene
</script>
</body>
</html>
5. Set the camera
The code new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000) creates an orthophoto projection camera object. What is "orthophoto projection" and "camera object". For example, if you change the parameter s used in the constructor parameter, that is, a coefficient defined in the code var s = 200, you can change 200 to 300, and you will find that the cube display effect becomes smaller, It's easy to understand. The first four parameters of the camera constructor define the size of the camera window. Just like taking pictures in normal times, the viewfinder range is large, and the person photographed naturally becomes smaller relative to the background. camera.position.set(200,300,200); And camera.lookAt(scene.position) define the camera position and photographing direction. You can change the camera position redefined by the camera.position.set (200300200) parameter. Change the first parameter, that is, the x coordinate, from 200 to 250, and you will find that the angle of the cube on the screen has changed, just like the same person in your life, But if you take pictures at different positions and angles, the display effect must be different. These specific parameter details can be ignored. At least you know that the camera can zoom and display the 3D scene and view the 3D scene from different angles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>three.js Small case</title>
<!--introduce three.js-->
<script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
</head>
<body>
<script>
/*
* Create scene objects
*/
var scene = new THREE.Scene();
/*
* Create mesh model
*/
var geometry = new THREE.BoxGeometry(200, 200, 200); //Create a cube Geometry object
var material = new THREE.MeshLambertMaterial({
color: '#f4f4f4',
}); //Material object material
var mesh = new THREE.Mesh(geometry, material); //Mesh model object mesh
scene.add(mesh); //Add mesh model to scene
/*
* Set light source
*/
var point = new THREE.PointLight('#fff'); // Point source
point.position.set(300, 100, 200); //Point light location
scene.add(point); //Add a point light to the scene
var ambient = new THREE.AmbientLight('#333');// Ambient light
scene.add(ambient); //Add ambient light to the scene
/*
* Set camera
*/
var width = window.innerWidth; //Window width
var height = window.innerHeight; //Window height
var k = width / height; //Window aspect ratio
var s = 200; //The control coefficient of 3D scene display range. The larger the coefficient, the larger the display range
//Create camera objects
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //Set camera position
camera.lookAt(scene.position); //Set the camera direction (pointing to the scene object)
</script>
</body>
</html>
6. Create a renderer object
Three.js is a 3D engine based on native WebGL encapsulation. Therefore, the browser will render a frame of image with the code new THREE.WebGLRenderer(). You can set the render area size and background color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>three.js Small case</title>
<!--introduce three.js-->
<script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
</head>
<body>
<script>
/*
* Create scene objects
*/
var scene = new THREE.Scene();
/*
* Create mesh model
*/
var geometry = new THREE.BoxGeometry(200, 200, 200); //Create a cube Geometry object
var material = new THREE.MeshLambertMaterial({
color: '#f4f4f4',
}); //Material object material
var mesh = new THREE.Mesh(geometry, material); //Mesh model object mesh
scene.add(mesh); //Add mesh model to scene
/*
* Set light source
*/
var point = new THREE.PointLight('#fff'); // Point source
point.position.set(300, 100, 200); //Point light location
scene.add(point); //Add a point light to the scene
var ambient = new THREE.AmbientLight('#333');// Ambient light
scene.add(ambient); //Add ambient light to the scene
/*
* Set camera
*/
var width = window.innerWidth; //Window width
var height = window.innerHeight; //Window height
var k = width / height; //Window aspect ratio
var s = 200; //The control coefficient of 3D scene display range. The larger the coefficient, the larger the display range
//Create camera objects
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //Set camera position
camera.lookAt(scene.position); //Set the camera direction (pointing to the scene object)
/*
* Create renderer objects
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //Set render area size
renderer.setClearColor(0xb9d3ff, 1); //Set background color
</script>
</body>
</html>
7. Perform rendering operations
Assign the rendered area to the scene and camera as parameters, and add the area to the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>three.js Small case</title>
<!--introduce three.js-->
<script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
</head>
<body>
<script>
/*
* Create scene objects
*/
var scene = new THREE.Scene();
/*
* Create mesh model
*/
var geometry = new THREE.BoxGeometry(200, 200, 200); //Create a cube Geometry object
var material = new THREE.MeshLambertMaterial({
color: '#f4f4f4',
}); //Material object material
var mesh = new THREE.Mesh(geometry, material); //Mesh model object mesh
scene.add(mesh); //Add mesh model to scene
/*
* Set light source
*/
var point = new THREE.PointLight('#fff'); // Point source
point.position.set(300, 100, 200); //Point light location
scene.add(point); //Add a point light to the scene
var ambient = new THREE.AmbientLight('#333');// Ambient light
scene.add(ambient); //Add ambient light to the scene
/*
* Set camera
*/
var width = window.innerWidth; //Window width
var height = window.innerHeight; //Window height
var k = width / height; //Window aspect ratio
var s = 200; //The control coefficient of 3D scene display range. The larger the coefficient, the larger the display range
//Create camera objects
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //Set camera position
camera.lookAt(scene.position); //Set the camera direction (pointing to the scene object)
/*
* Create renderer objects
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //Set render area size
renderer.setClearColor(0xb9d3ff, 1); //Set background color
/*
* Perform rendering operations
*/
renderer.render(scene, camera); //Specify the scene and camera as parameters
document.body.appendChild(renderer.domElement); //Insert canvas object into body element
</script>
</body>
</html>
Complete code
The code body {margin: 0;overflow: hidden;} is to hide the scroll bar in the body window area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>three.js Small case</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<!--introduce three.js-->
<script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
</head>
<body>
<script>
/*
* Create scene objects
*/
var scene = new THREE.Scene();
/*
* Create mesh model
*/
var geometry = new THREE.BoxGeometry(200, 200, 200); //Create a cube Geometry object
var material = new THREE.MeshLambertMaterial({
color: '#f4f4f4',
}); //Material object material
var mesh = new THREE.Mesh(geometry, material); //Mesh model object mesh
scene.add(mesh); //Add mesh model to scene
/*
* Set light source
*/
var point = new THREE.PointLight('#fff'); // Point source
point.position.set(300, 100, 200); //Point light location
scene.add(point); //Add a point light to the scene
var ambient = new THREE.AmbientLight('#333');// Ambient light
scene.add(ambient); //Add ambient light to the scene
/*
* Set camera
*/
var width = window.innerWidth; //Window width
var height = window.innerHeight; //Window height
var k = width / height; //Window aspect ratio
var s = 200; //The control coefficient of 3D scene display range. The larger the coefficient, the larger the display range
//Create camera objects
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //Set camera position
camera.lookAt(scene.position); //Set the camera direction (pointing to the scene object)
/*
* Create renderer objects
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //Set render area size
renderer.setClearColor(0xb9d3ff, 1); //Set background color
/*
* Perform rendering operations
*/
renderer.render(scene, camera); //Specify the scene and camera as parameters
document.body.appendChild(renderer.domElement); //Insert canvas object into body element
</script>
</body>
</html>
epilogue
The following figure vividly illustrates the relationship between scene camera renderer.
