Preface
The editor has published about geometric shapes and materials before. I believe that after you have read and learned, we can use them to create objects. The most commonly used object is a mesh, which is an object composed of vertices, edges, faces, etc.; other objects include line segments, bones, particle systems, etc. To create an object, you need to specify the geometric shape and material. Among them, the geometric shape determines the position of the object's vertex and other information, and the material determines the color, texture and other information of the object.
1. Create a grid
In the previous articles, we learned how to create geometric shapes and materials, and creating a mesh is very simple, just pass the geometric shapes and materials into its constructor. The most commonly used object is a mesh, which represents a geometry containing points, lines, and surfaces. Its constructor is:
Mesh(geometry, material)
Here, let's learn how to create a grid with a specific example:
var material = new THREE.MeshLambertMaterial({ color: 0xffff00});var geometry = new THREE.CubeGeometry(1, 2, 3);var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);If material and geometry are not reused afterwards, they can also be written together as:
var mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshLambertMaterial({ color: 0xffff00 }));scene.add(mesh);After adding lighting, the result is:
If material is not specified, a material with true wireframe will be randomly assigned each time. The color after refreshing the page is different. One possible effect is:
Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js test 9.1</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x0000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100); camera.position.set(5, 5, 20); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });// var material = new THREE.MeshBasicMaterial({// color: 0xffff00,// wireframe: true// }); var geometry = new THREE.CubeGeometry(1, 2, 3); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); var light = new THREE.DirectionalLight(0xffffff); light.position.set(20, 10, 5); scene.add(light); // render renderer.render(scene, camera); } </script></html>2. Modify properties
2.1 Modify the material
In addition to specifying the material in the constructor, the material can also be modified after the mesh is created:
var material = new THREE.MeshLambertMaterial({ color: 0xffff00});var geometry = new THREE.CubeGeometry(1, 2, 3);var mesh = new THREE.Mesh(geometry, material); scene.add(mesh);mesh.material = new THREE.MeshLambertMaterial({ color: 0xff0000});The final color is red:
Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js test9.2</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x0000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100); camera.position.set(5, 5, 20); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); var material = new THREE.MeshLambertMaterial({ color: 0xffff00 }); var geometry = new THREE.CubeGeometry(1, 2, 3); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); mesh.material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); var light = new THREE.DirectionalLight(0xffffff); light.position.set(20, 10, 5); scene.add(light); // render renderer renderer.render(scene, camera); } </script></html>2.2 Position, zoom, rotation
Position, scaling, and rotation are three common properties of objects. Since THREE.Mesh is based on THREE.Object3D, it contains three attributes: scale, rotation, and position. They are all THREE.Vector3 instances, so the method of modifying their values is the same, here taking the position as an example.
THREE.Vector3 has three attributes: x, y, and z. If you only set one of the attributes, you can use the following method:
mesh.position.z = 1;
If you need to set multiple properties at the same time, you can use the following two methods:
mesh.position.set(1.5, -0.5, 0);
or:
mesh.position = new THREE.Vector3(1.5, -0.5, 0);
The corresponding attribute of scaling is scale, and the corresponding attribute of rotation is rotation. The specific method is the same as the above example, which indicates scaling or rotation along the three axes x, y, and z respectively.
Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js test9.3</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x0000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100); camera.position.set(5, 5, 20); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); var material = new THREE.MeshLambertMaterial({ color: 0xffff00 }); var geometry = new THREE.CubeGeometry(1, 2, 3); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); mesh.position.set(1.5, -0.5, 0); mesh.position = new THREE.Vector3(1.5, -0.5, 0); mesh.position.z = 1; var light = new THREE.DirectionalLight(0xffffff); light.position.set(20, 10, 5); scene.add(light); drawAxes(scene); // render renderer.render(scene, camera); } function drawAxes(scene) { // x-axis var xGeo = new THREE.Geometry(); xGeo.vertices.push(new THREE.Vector3(0, 0, 0)); xGeo.vertices.push(new THREE.Vector3(1, 0, 0)); var xMat = new THREE.LineBasicMaterial({ color: 0xff0000 }); var xAxis = new THREE.Line(xGeo, xMat); scene.add(xAxis); // y-axis var yGeo = new THREE.Geometry(); yGeo.vertices.push(new THREE.Vector3(0, 0, 0)); yGeo.vertices.push(new THREE.Vector3(0, 1, 0)); var yMat = new THREE.LineBasicMaterial({ color: 0x00ff00 }); var yAxis = new THREE.Line(yGeo, yMat); scene.add(yAxis); // z-axis var zGeo = new THREE.Geometry(); zGeo.vertices.push(new THREE.Vector3(0, 0, 0)); zGeo.vertices.push(new THREE.Vector3(0, 0, 1)); var zMat = new THREE.LineBasicMaterial({ color: 0x00ccff }); var zAxis = new THREE.Line(zGeo, zMat); scene.add(zAxis); } </script></html>The content of this article ends here. The article introduces the grid in Three.js through detailed examples and pictures. I hope this article will be helpful to everyone to learn Three.js.