1. Text shape
Speaking of 3D text, I remember some artistic words in word in my early years:
Then TextGeometry can be used to create three-dimensional text shapes.
Using text shapes requires downloading and citing additional font libraries. Here, let's take the helvetiker font as an example.
Quote:
<script type="text/javascript" src="Your path/helvetiker_regular.typeface.json"></script>
The constructor of TextGeometry is:
THREE.TextGeometry(text, parameters)
text is a literal string;
parameters are objects composed of the following parameters:
・ size: font size, generally the height of capital letters
・ height: the thickness of the text
・curveSegments: The number of arc segments makes the curve of the text smoother
・font: Font, default is 'helvetiker', and the font file that needs to be referenced
・ Weight: The value is 'normal' or 'bold', indicating whether it is thicker
・ style: The value is 'normal' or 'italics', indicating whether italics is italics
・ bevelEnabled: Boolean value, whether to use chamfer, meaning to cut obliquely at the edge
・ bevelThickness: chamfer thickness
・ bevelSize: chamfer width
Create a three-dimensional text: new THREE.TextGeometry('Hello', {size: 1, height: 1})， its effect is:
Materials and lighting can be adjusted appropriately to achieve the desired effect:
//Metal shining object var material = new THREE.MeshPhongMaterial({ color: 0xffff00, specular:0xffff00, //Specify the brightness of the material and the color of the highlight part. If set to the same color as the color property, another material that is more similar to metal will be obtained. If set to grey gray, it will look like plastic shininess:0 //Specify the brightness of the highlight part, the default value is 30}); //Directional light var light = new THREE.DirectionalLight(0xffffff);light.position.set(-5, 10, 5);scene.add(light);Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js Test Six</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <!-- Find more information at https://github.com/mrdoob/three.js/tree/master/examples/fonts --> <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(1, 0, 0)); scene.add(camera); // var material = new THREE.MeshBasicMaterial({// color: 0xffff00,// wireframe: true// }); // Metal shining object var material = new THREE.MeshPhongMaterial({ color: 0xffff00, specular:0xffff00, // Specify the brightness of the material and the color of the highlight part. If set to the same color as the color property, another more metal-like material will be obtained. If set to grey gray, it will look like plastic shininess:0 // Specify the brightness of the highlight part, the default value is 30 }); // Direction light var light = new THREE.DirectionalLight(0xffffff); light.position.set(-5, 10, 5); scene.add(light); // load font var loader = new THREE.FontLoader(); loader.load('./helvetiker_regular.typeface.json', function(font) { var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', { font: font, size: 1, height: 1 }), material); scene.add(mesh); // render renderer.render(scene, camera); }); } </script></html>2. Custom shapes
For shapes not provided by Three.js, custom shapes can be provided to create.
Since custom shapes require manual specification of each vertex position and vertex connection, if the shape is very complex, the programmer's calculations will be relatively large. In this case, it is recommended to create a model in a modeling software such as 3ds Max and then import it into the scene using Three.js, which will be more efficient and convenient.
Custom shapes use the Geometry class, which is the parent class of other geometric shapes such as CubeGeometry , SphereGeometry , etc., and its constructor is:
THREE.Geometry()
Initialize a geometry, then set the vertex position and vertex connection status:
Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js Test Six-Two</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.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(-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set(25, 25, 25); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); // Initialize geometry var geometry = new THREE.Geometry(); // Set vertex position// Top 4 vertices geometry.vertices.push(new THREE.Vector3(-1, 2, -1)); geometry.vertices.push(new THREE.Vector3(1, 2, -1)); geometry.vertices.push(new THREE.Vector3(1, 2, 1)); geometry.vertices.push(new THREE.Vector3(-1, 2, 1)); geometry.vertices.push(new THREE.Vector3(-1, 2, 1)); geometry.vertices.push(new THREE.Vector3(-1, 2, 1)); geometry.vertices.push(new THREE.Vector3(-1, 2, 1)); geometry.vertices.push(new THREE.Vector3(-1, 2, 1)); // The bottom 4 vertices geometry.vertices.push(new THREE.Vector3(-2, 0, -2)); geometry.vertices.push(new THREE.Vector3(2, 0, -2)); geometry.vertices.push(new THREE.Vector3(2, 0, 2)); geometry.vertices.push(new THREE.Vector3(2, 0, 2)); geometry.vertices.push(new THREE.Vector3(-2, 0, 2)); // Set vertex connection status// Top geometry.faces.push(new THREE.Face3(0, 1, 3)); geometry.faces.push(new THREE.Face3(1, 2, 3));// geometry.faces.push(new THREE.Face4(0, 1, 2, 3)); // bottom geometry.faces.push(new THREE.Face3(4, 5, 6)); geometry.faces.push(new THREE.Face3(5, 6, 7)); // geometry.faces.push(new THREE.Face4(4, 5, 6, 7)); // side geometry.faces.push(new THREE.Face3(1, 5, 6)); geometry.faces.push(new THREE.Face3(6, 2, 1)); geometry.faces.push(new THREE.Face3(2, 6, 7)); geometry.faces.push(new THREE.Face3(7, 3, 2)); geometry.faces.push(new THREE.Face3(3, 7, 0)); geometry.faces.push(new THREE.Face3(7, 4, 0)); geometry.faces.push(new THREE.Face3(0, 4, 5)); geometry.faces.push(new THREE.Face3(0, 4, 5)); geometry.faces.push(new THREE.Face3(0, 4, 5)); geometry.faces.push(new THREE.Face3(0, 5, 1));// // face composed of four vertices// geometry.faces.push(new THREE.Face4(0, 1, 5, 4)); // geometry.faces.push(new THREE.Face4(1, 2, 6, 5)); // geometry.faces.push(new THREE.Face4(2, 3, 7, 6)); // geometry.faces.push(new THREE.Face4(3, 0, 4, 7)); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // render renderer.render(scene, camera); } </script></html> It should be noted that new THREE.Vector3(-1, 2, -1) creates a vector that is appended to geometry.vertices array as vertex positions.
And a face composed of three vertices is created by new THREE.Face3(0, 1, 2) and append it to geometry.faces array. The three parameters are the sequence numbers of the three vertices in geometry.vertices . If you need to set a patch consisting of four vertices, you can similarly use THREE.Face4 .
//Top geometry.faces.push(new THREE.Face4(0, 1, 2, 3));//Bottom geometry.faces.push(new THREE.Face4(4, 5, 6, 7));//Four sides geometry.faces.push(new THREE.Face4(0, 1, 5, 4));geometry.faces.push(new THREE.Face4(1, 2, 6, 5));geometry.faces.push(new THREE.Face4(2, 3, 7, 6));geometry.faces.push(new THREE.Face4(2, 3, 7, 6));geometry.faces.push(new THREE.Face4(3, 0, 4, 7));
The above is the entire content of the Three.js learning text shapes and custom shapes compiled by the editor. The editor has also compiled several related articles about Three.js. If you need it, you can view it through the links of the relevant articles below. I hope it can help everyone who learns Three.js.