WebGL With Three.js – Lesson 7 Our lessons on webgl are continuing. Today we extend the practice of loading ready three-dimensional models. In constant conditions of lack of time, it is always more convenient to simply download and implement a ready-made model than to implement it programmatically. At the moment, many loaders for three.js are already developed. In this article we will review the following loaders: AWDLoader, BabylonLoader, PDBLoader, PLYLoader, STLLoader, VRMLLoader and VTKLoader. Yes, it’s a lot more at once, but we have to finish with the loaders to start on the next topic in the next lesson.
带有Three.js的WebGL –第7课我们在继续学习webgl。 今天，我们扩展了加载就绪的三维模型的实践。 在缺乏时间的恒定条件下，简单地下载并实现现成的模型总是比以编程方式实现更为方便。 目前，已经开发了许多用于three.js的加载程序。 在本文中，我们将介绍以下加载器：AWDLoader，BabylonLoader，PDBLoader，PLYLoader，STLLoader，VRMLLoader和VTKLoader。 是的，它一次完成了很多，但是我们必须完成加载程序才能在下一课中开始下一个主题。
现场演示
制备 (Preparation)
Before all, we need to prepare a skeleton (main scene) for all our uploaders. In this step, we need to create a new text file, and, let’s name it as ‘index.html’. Here is the source of it:
毕竟，我们需要为所有上传者准备一个骨架(主场景)。 在此步骤中，我们需要创建一个新的文本文件，并将其命名为“ index.html”。 这是它的来源：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>WebGL With Three.js - Lesson 7 - loading three-dimensional models | 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/AWDLoader.js"></script>
<script src="js/BabylonLoader.js"></script>
<script src="js/PDBLoader.js"></script>
<script src="js/PLYLoader.js"></script>
<script src="js/STLLoader.js"></script>
<script src="js/VRMLLoader.js"></script>
<script src="js/VTKLoader.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<script src="js/OrbitControls.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 7 - loading three-dimensional models | 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/AWDLoader.js"></script>
<script src="js/BabylonLoader.js"></script>
<script src="js/PDBLoader.js"></script>
<script src="js/PLYLoader.js"></script>
<script src="js/STLLoader.js"></script>
<script src="js/VRMLLoader.js"></script>
<script src="js/VTKLoader.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
As you noticed, we attached all the standard libraries (three.js, WindowResize, OrbitControls and stats) and all the loaders at once. In today’s example we will load all 9 different types of models at once.
如您所见，我们一次附加了所有标准库(three.js，WindowResize，OrbitControls和stats)和所有加载器。 在今天的示例中，我们将一次加载所有9种不同类型的模型。
Webgl主要场景的准备 (Preparation of the main webgl scene)
script.js (script.js)
var lesson7 = {
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();
this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight;
// prepare camera
var VIEW_ANGLE = 60, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(-27, 15, -25);
this.camera.lookAt(new THREE.Vector3(0,0,0));
// prepare renderer
this.renderer = new THREE.WebGLRenderer({ antialias:true });
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(this.scene.fog.color);
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);
this.controls.maxDistance = 3000;
// prepare clock
this.clock = new THREE.Clock();
// prepare stats
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.left = '50px';
this.stats.domElement.style.bottom = '50px';
this.stats.domElement.style.zIndex = 1;
this.container.appendChild( this.stats.domElement );
this.scene.add( new THREE.AmbientLight(0x606060) );
// light
var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(200, 200, 1000).normalize();
this.camera.add(dirLight);
this.camera.add(dirLight.target);
// load models
this.loadModels();
},
loadModels: function() {
// here we will load all the models ...
}
};
// Animate the scene
function animate() {
requestAnimationFrame(animate);
render();
update();
}
// Update controls and stats
function update() {
lesson7.controls.update(lesson7.clock.getDelta());
lesson7.stats.update();
}
// Render the scene
function render() {
if (lesson7.renderer) {
lesson7.renderer.render(lesson7.scene, lesson7.camera);
}
}
// Initialize lesson on page load
function initializeLesson() {
lesson7.init();
animate();
}
if (window.addEventListener)
window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;
var lesson7 = {
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();
this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight;
// prepare camera
var VIEW_ANGLE = 60, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(-27, 15, -25);
this.camera.lookAt(new THREE.Vector3(0,0,0));
// prepare renderer
this.renderer = new THREE.WebGLRenderer({ antialias:true });
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(this.scene.fog.color);
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);
this.controls.maxDistance = 3000;
// prepare clock
this.clock = new THREE.Clock();
// prepare stats
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.left = '50px';
this.stats.domElement.style.bottom = '50px';
this.stats.domElement.style.zIndex = 1;
this.container.appendChild( this.stats.domElement );
this.scene.add( new THREE.AmbientLight(0x606060) );
// light
var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(200, 200, 1000).normalize();
this.camera.add(dirLight);
this.camera.add(dirLight.target);
// load models
this.loadModels();
},
loadModels: function() {
// here we will load all the models ...
}
};
// Animate the scene
function animate() {
requestAnimationFrame(animate);
render();
update();
}
// Update controls and stats
function update() {
lesson7.controls.update(lesson7.clock.getDelta());
lesson7.stats.update();
}
// Render the scene
function render() {
if (lesson7.renderer) {
lesson7.renderer.render(lesson7.scene, lesson7.camera);
}
}
// Initialize lesson on page load
function initializeLesson() {
lesson7.init();
animate();
}
if (window.addEventListener)
window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;
With this code we created an empty scene (with light fog), camera, renderer, controler, stats, light and ground. We also prepared another function ‘loadModels’, where we will put all our loaders.
使用此代码，我们创建了一个空场景(有轻雾)，摄影机，渲染器，控制器，统计数据，光照和地面。 我们还准备了另一个函数“ loadModels”，将所有装入程序放入其中。
AWDLoader (AWDLoader)
About AWD – AWD is a binary file format for 3D scenes, objects and related data. It’s main use is with the Away3D engine, but any encoder/decoder that conforms with the open specification can work with AWD files. The file format specification and a set of tools for working with AWD files are maintained by the Away3D development team. AWD is designed to be light-weight, fast and easy to parse, and to be extensible both by user applications and future versions of the file format, while remaining both forwards and backwards compatible.
关于AWD – AWD是用于3D场景，对象和相关数据的二进制文件格式。 它的主要用途是Away3D引擎，但任何符合开放规范的编码器/解码器都可以使用AWD文件。 Away3D开发团队维护文件格式规范和一组用于处理AWD文件的工具。 AWD的设计轻巧，快速且易于解析，并且可以通过用户应用程序和文件格式的将来版本进行扩展，同时保持向前和向后兼容。
To load AWD files into three.js you can use the following code:
要将AWD文件加载到three.js中，可以使用以下代码：
// prepare AWD loader and load the model
var oAwdLoader = new THREE.AWDLoader();
oAwdLoader.load('models/sample.awd', function(object) {
object.position.set(-10, 1, -15);
object.scale.set(0.1, 0.1, 0.1);
lesson7.scene.add(object);
});
// prepare AWD loader and load the model
var oAwdLoader = new THREE.AWDLoader();
oAwdLoader.load('models/sample.awd', function(object) {
object.position.set(-10, 1, -15);
object.scale.set(0.1, 0.1, 0.1);
lesson7.scene.add(object);
});
巴比伦装载机 (BabylonLoader)
About – Babylon.js uses a JSON file format for describing scenes.
关于 -Babylon.js使用JSON文件格式来描述场景。
To load babylon files into three.js you can use the following code:
要将巴比伦文件加载到three.js中，可以使用以下代码：
// prepare Babylon loader and load the model
var oBabylonLoader = new THREE.BabylonLoader();
oBabylonLoader.load('models/rabbit.babylon', function(object) {
// apply custom material
object.traverse( function(child) {
if (child instanceof THREE.Mesh) {
// apply custom material (texture)
var textureD = THREE.ImageUtils.loadTexture('models/0.jpg', undefined, function() {
child.material = new THREE.MeshLambertMaterial({ map: textureD });
child.position.set(-10, 0, -5);
child.scale.set(0.1, 0.1, 0.1);
lesson7.scene.add(child);
});
textureD.needsUpdate = true;
textureD.magFilter = THREE.NearestFilter;
textureD.repeat.set(1, 1);
textureD.wrapS = textureD.wrapT = THREE.RepeatWrapping;
textureD.anisotropy = 16;
}
});
});
// prepare Babylon loader and load the model
var oBabylonLoader = new THREE.BabylonLoader();
oBabylonLoader.load('models/rabbit.babylon', function(object) {
// apply custom material
object.traverse( function(child) {
if (child instanceof THREE.Mesh) {
// apply custom material (texture)
var textureD = THREE.ImageUtils.loadTexture('models/0.jpg', undefined, function() {
child.material = new THREE.MeshLambertMaterial({ map: textureD });
child.position.set(-10, 0, -5);
child.scale.set(0.1, 0.1, 0.1);
lesson7.scene.add(child);
});
textureD.needsUpdate = true;
textureD.magFilter = THREE.NearestFilter;
textureD.repeat.set(1, 1);
textureD.wrapS = textureD.wrapT = THREE.RepeatWrapping;
textureD.anisotropy = 16;
}
});
});
PDB加载器 (PDBLoader)
About – he Protein Data Bank (PDB) is a repository for the three-dimensional structural data of large biological molecules, such as proteins and nucleic acids.
关于 –蛋白质数据库(PDB)是大型生物分子(例如蛋白质和核酸)三维结构数据的存储库。
To load PDB files into three.js you can use the following code:
要将PDB文件加载到three.js中，可以使用以下代码：
// prepare PDB loader and load the model
var oPdbLoader = new THREE.PDBLoader();
oPdbLoader.load('models/caf2.pdb', function(geometry, geometryBonds) {
var group = new THREE.Object3D();
var i = 0;
geometry.vertices.forEach(function (position) {
var sphere = new THREE.SphereGeometry(0.3);
var material = new THREE.MeshPhongMaterial({color: geometry.colors[i++]});
var mesh = new THREE.Mesh(sphere, material);
mesh.position.copy(position);
group.add(mesh);
});
for (var j = 0; j < geometryBonds.vertices.length; j += 2) {
var path = new THREE.SplineCurve3([geometryBonds.vertices[j], geometryBonds.vertices[j + 1]]);
var tube = new THREE.TubeGeometry(path, 1, 0.05)
var material = new THREE.MeshPhongMaterial({color: 0xcccccc});
var mesh = new THREE.Mesh(tube, material);
group.add(mesh);
}
group.position.set(20, 5, -20);
group.scale.set(2, 2, 2);
lesson7.scene.add(group);
});
// prepare PDB loader and load the model
var oPdbLoader = new THREE.PDBLoader();
oPdbLoader.load('models/caf2.pdb', function(geometry, geometryBonds) {
var group = new THREE.Object3D();
var i = 0;
geometry.vertices.forEach(function (position) {
var sphere = new THREE.SphereGeometry(0.3);
var material = new THREE.MeshPhongMaterial({color: geometry.colors[i++]});
var mesh = new THREE.Mesh(sphere, material);
mesh.position.copy(position);
group.add(mesh);
});
for (var j = 0; j < geometryBonds.vertices.length; j += 2) {
var path = new THREE.SplineCurve3([geometryBonds.vertices[j], geometryBonds.vertices[j + 1]]);
var tube = new THREE.TubeGeometry(path, 1, 0.05)
var material = new THREE.MeshPhongMaterial({color: 0xcccccc});
var mesh = new THREE.Mesh(tube, material);
group.add(mesh);
}
group.position.set(20, 5, -20);
group.scale.set(2, 2, 2);
lesson7.scene.add(group);
});
PLYLoader (PLYLoader)
About – PLY is a computer file format known as the Polygon File Format or the Stanford Triangle Format. The format was principally designed to store three-dimensional data from 3D scanners. It supports a relatively simple description of a single object as a list of nominally flat polygons. A variety of properties can be stored including: color and transparency, surface normals, texture coordinates and data confidence values. The format permits one to have different properties for the front and back of a polygon.
关于 – PLY是一种计算机文件格式，称为多边形文件格式或斯坦福三角格式。 该格式主要用于存储来自3D扫描仪的三维数据。 它支持相对简单地将单个对象描述为名义上平坦的多边形的列表。 可以存储多种属性，包括：颜色和透明度，表面法线，纹理坐标和数据置信度值。 该格式允许多边形的正面和背面具有不同的属性。
To load PLY files into three.js you can use the following code:
要将PLY文件加载到three.js中，可以使用以下代码：
// prepare PLY loader and load the model
var oPlyLoader = new THREE.PLYLoader();
oPlyLoader.load('models/F117.ply', function(geometry) {
var material = new THREE.MeshBasicMaterial({color: 0xff4444});
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.set( - Math.PI / 2 - 0.2, 0, - Math.PI / 2 + 0.2);
mesh.position.set(-20, 15, 10);
mesh.scale.set(2, 2, 2);
lesson7.scene.add(mesh);
});
// prepare PLY loader and load the model
var oPlyLoader = new THREE.PLYLoader();
oPlyLoader.load('models/F117.ply', function(geometry) {
var material = new THREE.MeshBasicMaterial({color: 0xff4444});
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.set( - Math.PI / 2 - 0.2, 0, - Math.PI / 2 + 0.2);
mesh.position.set(-20, 15, 10);
mesh.scale.set(2, 2, 2);
lesson7.scene.add(mesh);
});
STLLoader (STLLoader)
About – STL (STereoLithography) is a file format native to the stereolithography CAD software created by 3D Systems. STL is also known as Standard Tessellation Language. This file format is supported by many other software packages; it is widely used for rapid prototyping and computer-aided manufacturing. STL files describe only the surface geometry of a three-dimensional object without any representation of color, texture or other common CAD model attributes. The STL format specifies both ASCII and binary representations. Binary files are more common, since they are more compact.
关于 – STL(STereoLithography)是3D Systems创建的立体光刻CAD软件固有的文件格式。 STL也称为标准镶嵌语言。 许多其他软件包也支持这种文件格式。 它被广泛用于快速成型和计算机辅助制造。 STL文件仅描述三维对象的表面几何形状，而没有颜色，纹理或其他常见CAD模型属性的任何表示形式。 STL格式同时指定ASCII和二进制表示形式。 二进制文件更常见，因为它们更紧凑。
To load STL files into three.js you can use the following code:
要将STL文件加载到three.js中，可以使用以下代码：
// prepare STL loader and load the model
var oStlLoader = new THREE.STLLoader();
oStlLoader.load('models/piano.stl', function(geometry) {
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.set( - Math.PI / 2, 0, Math.PI / 2);
mesh.position.set(-10, 0, 10);
mesh.scale.set(2, 2, 2);
lesson7.scene.add(mesh);
});
// prepare STL loader and load the model
var oStlLoader = new THREE.STLLoader();
oStlLoader.load('models/piano.stl', function(geometry) {
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.set( - Math.PI / 2, 0, Math.PI / 2);
mesh.position.set(-10, 0, 10);
mesh.scale.set(2, 2, 2);
lesson7.scene.add(mesh);
});
VRMLLoader (VRMLLoader)
About – VRML is a text file format where, e.g., vertices and edges for a 3D polygon can be specified along with the surface color, UV mapped textures, shininess, transparency, and so on. URLs can be associated with graphical components so that a web browser might fetch a webpage or a new VRML file from the Internet when the user clicks on the specific graphical component. Animations, sounds, lighting, and other aspects of the virtual world can interact with the user or may be triggered by external events such as timers. A special Script Node allows the addition of program code (e.g., written in Java or ECMAScript) to a VRML file.
关于 – VRML是一种文本文件格式，例如，可以为3D多边形指定顶点和边以及表面颜色，UV贴图纹理，光泽度，透明度等。 URL可以与图形组件相关联，以便当用户单击特定的图形组件时，Web浏览器可以从Internet上获取网页或新的VRML文件。 虚拟世界的动画，声音，灯光和其他方面可以与用户互动，也可以由外部事件(如计时器)触发。 特殊的脚本节点允许将程序代码(例如，用Java或ECMAScript编写)添加到VRML文件中。
To load WRL files into three.js you can use the following code:
要将WRL文件加载到three.js中，可以使用以下代码：
// prepare WRL loader and load the model
var oWrlLoader = new THREE.VRMLLoader();
oWrlLoader.load('models/house.wrl', function(geometry) {
lesson7.scene.add(geometry);
});
// prepare WRL loader and load the model
var oWrlLoader = new THREE.VRMLLoader();
oWrlLoader.load('models/house.wrl', function(geometry) {
lesson7.scene.add(geometry);
});
VTKLoader (VTKLoader)
About – The Visualization Toolkit (VTK) is an open-source, freely available software system for 3D computer graphics, image processing and visualization. VTK consists of a C++ class library and several interpreted interface layers including Tcl/Tk, Java, and Python. Kitware, whose team created and continues to extend the toolkit, offers professional support and consulting services for VTK. VTK supports a wide variety of visualization algorithms including: scalar, vector, tensor, texture, and volumetric methods; and advanced modeling techniques such as: implicit modeling, polygon reduction, mesh smoothing, cutting, contouring, and Delaunay triangulation. VTK has an extensive information visualization framework, has a suite of 3D interaction widgets, supports parallel processing, and integrates with various databases on GUI toolkits such as Qt and Tk. VTK is cross-platform and runs on Linux, Windows, Mac and Unix platforms. VTK also includes ancillary support for 3D interaction widgets, two and three-dimensional annotation, and parallel computing. At its core VTK is implemented as a C++ toolkit, requiring users to build applications by combining various objects into an application. The system also supports automated wrapping of the C++ core into Python, Java and Tcl, so that VTK applications may also be written using these interpreted programming languages.
关于 – Visualization Toolkit(VTK)是可免费使用的开源软件系统，用于3D计算机图形，图像处理和可视化。 VTK由C ++类库和几个解释的接口层组成，包括Tcl / Tk，Java和Python。 Kitware的团队创建并继续扩展该工具包，它为VTK提供专业的支持和咨询服务。 VTK支持多种可视化算法，包括：标量，矢量，张量，纹理和体积方法； 以及高级建模技术，例如：隐式建模，多边形缩小，网格平滑，切割，轮廓绘制和Delaunay三角剖分。 VTK具有广泛的信息可视化框架，具有3D交互小部件套件，支持并行处理，并与GUI工具包(例如Qt和Tk)上的各种数据库集成。 VTK是跨平台的，可在Linux，Windows，Mac和Unix平台上运行。 VTK还包括对3D交互小部件，二维和三维注释以及并行计算的辅助支持。 VTK的核心是C ++工具箱，要求用户通过将各种对象组合到应用程序中来构建应用程序。 该系统还支持将C ++核心自动包装到Python，Java和Tcl中，因此也可以使用这些解释的编程语言编写VTK应用程序。
To load VTK files into three.js you can use the following code:
要将VTK文件加载到three.js中，可以使用以下代码：
// prepare VTK loader and load the model
var oVtkLoader = new THREE.VTKLoader();
oVtkLoader.load('models/bunny.vtk', function(geometry) {
geometry.computeVertexNormals();
var material = new THREE.MeshLambertMaterial( { color:0xff4444, side: THREE.DoubleSide } );
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -15);
mesh.scale.set(20, 20, 20);
lesson7.scene.add(mesh);
});
// prepare VTK loader and load the model
var oVtkLoader = new THREE.VTKLoader();
oVtkLoader.load('models/bunny.vtk', function(geometry) {
geometry.computeVertexNormals();
var material = new THREE.MeshLambertMaterial( { color:0xff4444, side: THREE.DoubleSide } );
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -15);
mesh.scale.set(20, 20, 20);
lesson7.scene.add(mesh);
});
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
翻译自: https://www.script-tutorials.com/webgl-with-three-js-lesson-7/
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
