带有Three.js的WebGL –第4课
2020-08-06 08:47
288 查看
WebGL With Three.js – Lesson 4 Today we continue our lessons for those who study webgl, and today we will show you how to add 3D text on the scene, how to extrude two-dimensional shapes, we also will consider how to load ready 3D models into the scene using the OBJLoader. It seems to be a difficult process, but it is not – the code for loading 3D models is fairly simple.
WebGL with Three.js –第4课今天，我们继续为学习webgl的人们提供课程，今天，我们将向您展示如何在场景中添加3D文本，如何拉伸二维形状，我们还将考虑如何准备好加载使用OBJLoader将3D模型放到场景中。 这似乎是一个困难的过程，但并非如此-加载3D模型的代码非常简单。
现场演示
HTML (HTML)
Two new libraries were added into the html: font1.js and OBJLoader.js
html中添加了两个新库：font1.js和OBJLoader.js
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <meta name="author" content="Script Tutorials" /> <title>WebGL With Three.js - Lesson 4 | Script Tutorials</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="js/three.min.js"></script> <script src="js/THREEx.WindowResize.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/fonts/font1.js"></script> <script src="js/OBJLoader.js"></script> <script src="js/stats.min.js"></script> <script src="js/script.js"></script> </body> </html>
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <meta name="author" content="Script Tutorials" /> <title>WebGL With Three.js - Lesson 4 | Script Tutorials</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="js/three.min.js"></script> <script src="js/THREEx.WindowResize.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/fonts/font1.js"></script> <script src="js/OBJLoader.js"></script> <script src="js/stats.min.js"></script> <script src="js/script.js"></script> </body> </html>[/code]
Java脚本 (Javascript)
First, we create a simple (empty) scene (scene, camera, renderer, controls, light and ground):
首先，我们创建一个简单的(空)场景(场景，相机，渲染器，控件，灯光和地面)：
// load texture
var texture = THREE.ImageUtils.loadTexture('texture.png');
texture.repeat.set(0.03, 0.03);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = 16;
texture.needsUpdate = true;
var lesson4 = {
scene: null,
camera: null,
renderer: null,
container: null,
controls: null,
clock: null,
stats: null,
init: function() { // Initialization
// create main scene
this.scene = new THREE.Scene();
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight;
// prepare camera
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 10000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(0, 400, 800);
this.camera.lookAt(new THREE.Vector3(0,0,0));
// prepare renderer
this.renderer = new THREE.WebGLRenderer({antialias:true, alpha: false});
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(0xffffff);
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;
// prepare container
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.container.appendChild(this.renderer.domElement);
// events
THREEx.WindowResize(this.renderer, this.camera);
// prepare controls (OrbitControls)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);
// prepare clock
this.clock = new THREE.Clock();
// prepare stats
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.bottom = '0px';
this.stats.domElement.style.zIndex = 10;
this.container.appendChild( this.stats.domElement );
// add directional light
var dLight = new THREE.DirectionalLight(0xffffff);
dLight.position.set(0, 1000, 0);
dLight.castShadow = true;
// dLight.shadowCameraVisible = true;
this.scene.add(dLight);
// add simple ground
var groundGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
ground = new THREE.Mesh(groundGeometry, new THREE.MeshLambertMaterial({
color: 0x4489FE, side: THREE.DoubleSide
}));
ground.position.y = -20;
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
this.scene.add(ground);
},
};
// Animate the scene
function animate() {
requestAnimationFrame(animate);
render();
update();
}
// Update controls and stats
function update() {
lesson4.controls.update(lesson4.clock.getDelta());
lesson4.stats.update();
}
// Render the scene
function render() {
if (lesson4.renderer) {
lesson4.renderer.render(lesson4.scene, lesson4.camera);
}
}
// Initialize lesson on page load
function initializeLesson() {
lesson4.init();
animate();
}
if (window.addEventListener)
window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;// load texture
var texture = THREE.ImageUtils.loadTexture('texture.png');
texture.repeat.set(0.03, 0.03);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = 16;
texture.needsUpdate = true;
var lesson4 = {
scene: null,
camera: null,
renderer: null,
container: null,
controls: null,
clock: null,
stats: null,
init: function() { // Initialization
// create main scene
this.scene = new THREE.Scene();
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight;
// prepare camera
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 10000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(0, 400, 800);
this.camera.lookAt(new THREE.Vector3(0,0,0));
// prepare renderer
this.renderer = new THREE.WebGLRenderer({antialias:true, alpha: false});
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(0xffffff);
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;
// prepare container
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.container.appendChild(this.renderer.domElement);
// events
THREEx.WindowResize(this.renderer, this.camera);
// prepare controls (OrbitControls)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);
// prepare clock
this.clock = new THREE.Clock();
// prepare stats
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.bottom = '0px';
this.stats.domElement.style.zIndex = 10;
this.container.appendChild( this.stats.domElement );
// add directional light
var dLight = new THREE.DirectionalLight(0xffffff);
dLight.position.set(0, 1000, 0);
dLight.castShadow = true;
// dLight.shadowCameraVisible = true;
this.scene.add(dLight);
// add simple ground
var groundGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
ground = new THREE.Mesh(groundGeometry, new THREE.MeshLambertMaterial({
color: 0x4489FE, side: THREE.DoubleSide
}));
ground.position.y = -20;
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
this.scene.add(ground);
},
};
// Animate the scene
function animate() {
requestAnimationFrame(animate);
render();
update();
}
// Update controls and stats
function update() {
lesson4.controls.update(lesson4.clock.getDelta());
lesson4.stats.update();
}
// Render the scene
function render() {
if (lesson4.renderer) {
lesson4.renderer.render(lesson4.scene, lesson4.camera);
}
}
// Initialize lesson on page load
function initializeLesson() {
lesson4.init();
animate();
}
if (window.addEventListener)
window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;
[/code]3D文字 (3D text)
The best way to display text in 3D enviromnemt is to use a ready 3D font (for Three.js). In general, there are many websites where you can download fonts, however we need special javascript fonts (typefaced fonts). This website may help you to convert custom fonts into javascript fonts (upload your font, hit the ‘convert’, and then follow the steps until it let you download the result). However, at the time of writing this tutorial, this service was not available, so I had to use ready-made fonts to create our demonstration. To draw a three-dimensional text I prepared the following function:
在3D环境中显示文本的最佳方法是使用现成的3D字体(用于Three.js)。 通常，有很多网站可以下载字体，但是我们需要特殊的javascript字体(字体字体)。 该网站可以帮助您将自定义字体转换为javascript字体(上传字体，点击“转换”，然后按照步骤进行操作，直到可以下载结果为止)。 但是，在编写本教程时，此服务尚不可用，因此我不得不使用现成的字体来创建我们的演示。 为了绘制三维文字，我准备了以下功能：
draw3dText: function(x, y, z, text) {
// prepare text geometry
var textGeometry = new THREE.TextGeometry(text, {
size: 60, // Font size
height: 20, // Font height (depth)
font: 'droid serif', // Font family
weight: 'bold', // Font weight
style: 'normal', // Font style
curveSegments: 1, // Amount of curve segments
bevelThickness: 5, // Bevel thickness
bevelSize: 5, // Bevel size
bevelEnabled: true, // Enable/Disable the bevel
material: 0, // Main material
extrudeMaterial: 1 // Side (extrude) material
});
// prepare two materials
var materialFront = new THREE.MeshPhongMaterial({ map: texture, color: 0xffff00, emissive: 0x888888 });
var materialSide = new THREE.MeshPhongMaterial({ map: texture, color: 0xff00ff, emissive: 0x444444 });
// create mesh object
var textMaterial = new THREE.MeshFaceMaterial([ materialFront, materialSide ]);
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.castShadow = true;
// place the mesh in the certain position, rotate it and add to the scene
textMesh.position.set(x, y, z);
textMesh.rotation.x = -0.3;
this.scene.add(textMesh);
}draw3dText: function(x, y, z, text) {
// prepare text geometry
var textGeometry = new THREE.TextGeometry(text, {
size: 60, // Font size
height: 20, // Font height (depth)
font: 'droid serif', // Font family
weight: 'bold', // Font weight
style: 'normal', // Font style
curveSegments: 1, // Amount of curve segments
bevelThickness: 5, // Bevel thickness
bevelSize: 5, // Bevel size
bevelEnabled: true, // Enable/Disable the bevel
material: 0, // Main material
extrudeMaterial: 1 // Side (extrude) material
});
// prepare two materials
var materialFront = new THREE.MeshPhongMaterial({ map: texture, color: 0xffff00, emissive: 0x888888 });
var materialSide = new THREE.MeshPhongMaterial({ map: texture, color: 0xff00ff, emissive: 0x444444 });
// create mesh object
var textMaterial = new THREE.MeshFaceMaterial([ materialFront, materialSide ]);
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.castShadow = true;
// place the mesh in the certain position, rotate it and add to the scene
textMesh.position.set(x, y, z);
textMesh.rotation.x = -0.3;
this.scene.add(textMesh);
}
[/code]Two different materials are used to different sides of the text (for the front and side).
文本的不同侧面使用了两种不同的材料(正面和侧面)。
挤压几何 (ExtrudeGeometry)
This class allows us to create three-dimensional extruded geometry from two-dimensional path shape. I drew the boat for our today’s demonstration:
此类允许我们从二维路径形状创建三维挤压几何体。 我拉船去进行今天的示范：
drawCustomObject: function(x, y, z) {
// prepare points for custom shape (ship)
var objectPoints = [
new THREE.Vector2 (275, 265),
new THREE.Vector2 (205, 240),
new THREE.Vector2 (125, 220),
new THREE.Vector2 (274, 115),
new THREE.Vector2 (275, 85),
new THREE.Vector2 (330, 85),
new THREE.Vector2 (310, 100),
new THREE.Vector2 (330, 115),
new THREE.Vector2 (275, 115),
new THREE.Vector2 (274, 266),
new THREE.Vector2 (305, 266),
new THREE.Vector2 (305, 240),
new THREE.Vector2 (360, 240),
new THREE.Vector2 (360, 285),
new THREE.Vector2 (340, 335),
new THREE.Vector2 (215, 335),
new THREE.Vector2 (175, 320),
new THREE.Vector2 (150, 290),
new THREE.Vector2 (75, 230),
new THREE.Vector2 (200, 264),
new THREE.Vector2 (274, 264),
];
// prepare shape
var objectShape = new THREE.Shape(objectPoints);
var extrusionSettings = {
amount: 20,
curveSegments: 1, // Amount of curve segments
bevelThickness: 5, // Bevel thickness
bevelSize: 5, // Bevel size
bevelEnabled: true, // Enable/Disable the bevel
material: 0, // Main material
extrudeMaterial: 1 // Side (extrude) material
};
// prepare ship geometry
var objectGeometry = new THREE.ExtrudeGeometry( objectShape, extrusionSettings );
// prepare two materials
var materialFront = new THREE.MeshPhongMaterial({ map: texture, color: 0xffff00, emissive: 0x888888 });
var materialSide = new THREE.MeshPhongMaterial({ map: texture, color: 0xff00ff, emissive: 0x444444 });
// create mesh object of the ship
var objectMaterial = new THREE.MeshFaceMaterial([ materialFront, materialSide ]);
var objectMesh = new THREE.Mesh( objectGeometry, objectMaterial );
objectMesh.castShadow = true;
// place the object in the certain position, rotate it and add to the scene
objectMesh.position.set(x, y, z);
objectMesh.rotation.x = Math.PI;
this.scene.add(objectMesh);
}drawCustomObject: function(x, y, z) {
// prepare points for custom shape (ship)
var objectPoints = [
new THREE.Vector2 (275, 265),
new THREE.Vector2 (205, 240),
new THREE.Vector2 (125, 220),
new THREE.Vector2 (274, 115),
new THREE.Vector2 (275, 85),
new THREE.Vector2 (330, 85),
new THREE.Vector2 (310, 100),
new THREE.Vector2 (330, 115),
new THREE.Vector2 (275, 115),
new THREE.Vector2 (274, 266),
new THREE.Vector2 (305, 266),
new THREE.Vector2 (305, 240),
new THREE.Vector2 (360, 240),
new THREE.Vector2 (360, 285),
new THREE.Vector2 (340, 335),
new THREE.Vector2 (215, 335),
new THREE.Vector2 (175, 320),
new THREE.Vector2 (150, 290),
new THREE.Vector2 (75, 230),
new THREE.Vector2 (200, 264),
new THREE.Vector2 (274, 264),
];
// prepare shape
var objectShape = new THREE.Shape(objectPoints);
var extrusionSettings = {
amount: 20,
curveSegments: 1, // Amount of curve segments
bevelThickness: 5, // Bevel thickness
bevelSize: 5, // Bevel size
bevelEnabled: true, // Enable/Disable the bevel
material: 0, // Main material
extrudeMaterial: 1 // Side (extrude) material
};
// prepare ship geometry
var objectGeometry = new THREE.ExtrudeGeometry( objectShape, extrusionSettings );
// prepare two materials
var materialFront = new THREE.MeshPhongMaterial({ map: texture, color: 0xffff00, emissive: 0x888888 });
var materialSide = new THREE.MeshPhongMaterial({ map: texture, color: 0xff00ff, emissive: 0x444444 });
// create mesh object of the ship
var objectMaterial = new THREE.MeshFaceMaterial([ materialFront, materialSide ]);
var objectMesh = new THREE.Mesh( objectGeometry, objectMaterial );
objectMesh.castShadow = true;
// place the object in the certain position, rotate it and add to the scene
objectMesh.position.set(x, y, z);
objectMesh.rotation.x = Math.PI;
this.scene.add(objectMesh);
}
[/code]OBJ加载器 (OBJLoader)
I left the most interesting for the end – loading ready OBJ models. The fact that there are a huge number of ready three-dimensional objects (at various websites) that you can add into your scene, and three.js gives us this opportunity through the use of the OBJLoader class:
最后，我留下了最有趣的部分-加载现成的OBJ模型。 您可以在场景中添加很多现成的三维对象(在各个网站上)，并且three.js通过使用OBJLoader类为我们提供了这一机会：
loadObjFile: function(x, y, z) {
// prepare new OBJLoader and load the 'legoBrick.obj' model
var loader = new THREE.OBJLoader();
loader.load('legoBrick.obj', function(object) {
// apply custom material for all children
var legoMat = new THREE.MeshLambertMaterial({ color: 0x008800 });
object.traverse( function (child) {
if (child instanceof THREE.Mesh) {
child.material = legoMat;
child.material.needsUpdate = true;
}
});
// place the object in the certain position, rotate, scale and add to the scene
object.position.x = x;
object.position.y = y;
object.position.z = z;
object.rotation.y = Math.PI/2;
object.scale.set(40, 40, 40);
lesson4.scene.add(object);
});
}loadObjFile: function(x, y, z) {
// prepare new OBJLoader and load the 'legoBrick.obj' model
var loader = new THREE.OBJLoader();
loader.load('legoBrick.obj', function(object) {
// apply custom material for all children
var legoMat = new THREE.MeshLambertMaterial({ color: 0x008800 });
object.traverse( function (child) {
if (child instanceof THREE.Mesh) {
child.material = legoMat;
child.material.needsUpdate = true;
}
});
// place the object in the certain position, rotate, scale and add to the scene
object.position.x = x;
object.position.y = y;
object.position.z = z;
object.rotation.y = Math.PI/2;
object.scale.set(40, 40, 40);
lesson4.scene.add(object);
});
}
[/code]To import the model we just specify the address to this model, as well as the callback function. In this function we applied the custom material for it’s children.
要导入模型，我们只需指定该模型的地址以及回调函数即可。 在此功能中，我们为其子级应用了自定义材料。
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
结论 (Conclusion)
Stay tuned for new lessons and you are sure to find something new and interesting for yourself.
请继续关注新课程，您一定会发现适合自己的新事物。
翻译自: https://www.script-tutorials.com/webgl-with-three-js-lesson-4/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 带有Three.js的WebGL –第6课
- 带有Three.js的WebGL –第8课
- 带有Three.js的WebGL –第7课
- 带有Three.js的WebGL –第2课
- 带有Three.js的WebGL –第1课
- 带有Three.js的WebGL –第8课
- 视频教程-WebGL 可视化3D绘图框架：Three.js 零基础上手实战-其他
- 浅谈Three.js源码-render之WebGLGeometries.js
- 如何用webgl(three.js)搭建一个3D库房
- 学习 WebGL 的开源库 Three.js
- 小八——WebGL心路历程（2），一个基于Three.js的webGL程序解析
- Webgl之three.js
- [webGL学习]基于three.js构建WebGL实例第一讲
- webGL之three.js入门2
- [webGL学习]基于three.js构建WebGL实例讲解大纲
- 如何用webgl(three.js)搭建一个3D库房
- Calculate superficial area and volume of mesh with Three.js(WebGL)
- WebGL框架比较之Three.js和Babylon.js的比较
- Three.js和WebGL
- （转）WebGL框架比较之Three.js和Babylon.js的比较