使用Three.js + Blender构建在浏览器端显示的3D模型（3） | 查问题
汇聚最新编程技术，编程问题一网打尽
& 使用Three.js + Blender构建在浏览器端显示的3D模型（3）
使用Three.js + Blender构建在浏览器端显示的3D模型（3）
[ 分类： ]
第三章 使用three.js加载blender生成的马克杯模型
先看看效果图，这是在firefox里面加载的
代码如下：
1 var SCREEN_WIDTH = window.innerWidth, 2
SCREEN_HEIGHT = window.innerHeight, 3
windowHalfX = window.innerWidth / 2, 4
windowHalfY = window.innerHeight / 2, 5
container, camera, scene, loaded, 6
renderer, mouseX = 0, mouseY = 0; 7
8 //记录鼠标位置在动画中使用 9 document.addEventListener( ‘mousemove’, function (event) {10
mouseX = ( event.clientX – windowHalfX );11
mouseY = ( event.clientY – windowHalfY );12 }, false );13 14 init();15 16 function init() {17
container = document.createElement( ‘div’ );18
document.body.appendChild( container );19 20
//使用WebGL去渲染，如果用Canvas渲染，浏览器会不堪重负21
renderer = new THREE.WebGLRenderer();22
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );23
renderer.domElement.style.position = “relative”;24
container.appendChild( renderer.domElement );25 26
//使用场景加载，就能够利用blender建模时设置的相机和光源等，无需我们再定义27
var loader = new THREE.SceneLoader();28
loader.load( “./cup.js”, function( result ) {29
loaded =30 31
camera = loaded.currentC32
camera.aspect = window.innerWidth / window.innerH33
camera.updateProjectionMatrix();34
scene = loaded.35
renderer.setClearColor( loaded.bgColor, loaded.bgAlpha );36
animate();37
});38 }39 40 //通过实时改变相机的位置达到动画效果41 function animate() {42
requestAnimationFrame( animate );43
camera.position.x += ( mouseX – camera.position.x ) * 0.001;44
camera.position.y += ( – mouseY – camera.position.y ) * 0.002;45
camera.lookAt( scene.position );46
renderer.render( scene, camera );47 }
与之对应的html代码如下：
1 &!DOCTYPE html& 2 &html lang=”en”& 3
&title&three.js webgl – io – scene loader [blender]&/title& 5
&meta charset=”utf-8″& 6
&meta name=”viewport” content=”width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″& 7
&script src=”/three.js/build/three.min.js”&&/script& 8
&/head& 9 10
&script&12
……13
……14
&/script&15
&/body&16 &/html&
其中cup.js是按照第一节所述，从blender中导出的js文件。这里我们需要加以注意的是，我们这里导出的文件是scen文件，包括摄像机、光源等参数的，点击&Export/Three.js(.js)&后出现的面板上，需要注意这部分：
默认情况下&Scene&，&Lights&和&Cameras&是没有勾选的，我们把它们都勾选上。
另外，请选用FireFox浏览器加载我们的html文件。因为这里使用了WebGl的render，而webGL默认是不能跨域访问的，所以在Chrome里面如果没做任何配置是不能加载本地的模型文件加以显示的。当然来自服务器的文件是可以的。使用FireFox则不受这个限制。
至此教程完成了基本的3D模型的制作以及在浏览器端的加载。代码来自于Three.js的例程，但特地做了极度的简化，整个js代码不到50行。在后续的教程中，我们将以此为基础，针对不同的任务需求，结合Three.js的API来完成。用基于WebGL的BabylonJS来共享你的3D扫描模型 - 极客范 - GeekFan.net
用基于WebGL的BabylonJS来共享你的3D扫描模型
翻译自 。欢迎加入，同我们一道翻译与分享。转载请参见文章末尾处的要求。
在这里，我们将展示如何在支持WebGL的浏览器中用BabylonJS来现实和优化彩色的3D扫描模型。我们会用 来做3D扫描，当然你也可以用任何其它3D扫描仪。
点击下面的图片可以看到一些3D扫描的例子（请用支持WebGL的浏览器），一个猴子和一个果盘。
利用Kinect来做3D扫描已经有了一段时间，而且有一些商业软件，如和，都提供了非常简单的使用界面。当然，这些软件也都有它们自己的局限，并且需要付费。
作为一个免费的替代方案，我们会用Kincect Fusion和来创建并优化我们的3D扫描模型。然后，我们会用BabylonJS——一个JavaScript实现的、基于WebGL的3D显示和动画库，将我们的3D扫描共享到网络上。
第一步：准备工具
本文中，我们将会用到以下工具和软件库：
(和Developer Toolkit)
Kinect Fusion需要下载最新的SDK和Developer Toolkit。
我们用Blender，一个免费开源的3D设计工具，来优化我们的扫描模型以备网络共享使用。
这是一个用WebGL实现的、用来简化创建3D场景和游戏的JavaScript库。
这是一个用来将Blender的3D场景导出成Babylon格式的插件。下载并阅读连接中的安装指示操作，让它可以在Blender中使用。
第二步：用Kinect Fusion做3D扫描
首先打开安装Kinect Developer Toolkit时自带的Developer Toolkit Browser，找到Kinect Fusion Explorer – D2D那个例子。
Mesh Format一项选择PLY并且勾选Capture Color：
你还需要设置Reconstruction Volume和Voxel Resolution。对于我的扫描而言，我发现下面的参数是最合适的，但对于你而言可能需要试试其他参数。
扫描的时候你可以在Kinect的视图中旋转被扫描对象，或者绕着它走一圈。这次，我扫描了一个可爱的小猴子玩具。
当你扫描完所有的角度后，点击Create Mesh按钮，保存为PLY格式（颜色信息也会被保存）。
第三步：用Blender优化模型
此时，我们会得到一个很大的模型文件，为了能在浏览器中用BabylonJS来显示它，我们需要进一步优化模型（译者注：因为模型需要下载到浏览器才能通过WebGL来显示，所以更小的模型意味着更快的下载速度和显示速度）。我们还要清理模型并让它更平滑一点，因为3D扫描时总会有些意外的缺陷。所以我们需要Blender。如果你不熟悉Blender，可能第一次用的时候会有些困难，但必须坚持，它是一个有用且有趣的工具！当然，这里将不会包含所有使用Blender的基础技能和细节。
1）在 可以学到如何做顶点颜色烘焙，这个演示了这些步骤。
2）打开Blender并按”X“键删除默认的立方体。
3）选择File-&Import-&Stanford (PLY)
a）打开你在第二步得到的PLY文件
b）这可能会花一会儿时间，因为扫描文件很大！
4）档模型加载完时，可能朝向是不对的，需要自己旋转并放置到中间，就像下图一样：
5）选中模型，然后选择Object-&Duplicate Objects来复制一份。接下来，我们将减少顶点的数量，来优化复制的这个模型，并创建一个贴图来保存原始的颜色信息，也就是所谓的顶点烘焙。
重要提示：确保原始模型和复制的模型在完全一致的位置。这对顶点烘焙非常重要！两个模型需要完美的重合在一起。如果你需要调整，可以在Object Properties面板里手动设置位置X、Y、Z的值。
6）接下来，我们开始优化和清理模型，以得到一个更平滑、相对更小的模型文件。
a）隐藏原始的模型，这样你可以集中在复制的模型上。
b）选中复制的模型（Blender会给这个模型的名字后面加上“.001”）。
c）激活Modifies面板，选择Add Modifier。
d）选择Remesh并且设置Octree Depth为6，设置Mode为Smooth。观察模型的形状变化，你可能需要增加或者减少Octree Depth以取得合适的平滑度和精细度。当你满意时，点击Apply。这将减少顶点的数量并让模型更平滑一点。
7）至此，复制的那份模型应该看上去更加平滑了，而且一些小缺陷也没有了：
a）让原始的模型可见，一起显示出来。
8）给原始的扫描模型添加材质
a）选中原始的模型
b）添加一个新材质
c）在Shading栏下面，选择“Shadeless”
d）在Options下面，勾选“Vertex Color Paint”
9）回到Blender的主视图，在“Viewport Shading”（小的球形图标）中选择“Texture”（这将会显示顶点的颜色数据）
10）现在，我们可以在原始模型上看到扫描的颜色了。下一步，我们将从这些颜色数据中创建一个贴图（也就是所谓的顶点烘焙）。
11）我们现在来为优化过的（复制的那份）模型添加一个材质
a）选中复制的那份模型
b）添加一个新材质
c）在Shading中选择“Shadeless”
12）然后，我们需要展开模型，是创建贴图的准备工作。
a）将Blender的视图切换为两个视图
b）在左侧的视图中，选中“UV/Image Editor”
c）在右侧的视图中，将复制的模型切换到Edit模式
d）选中所有的顶点
e）点击“U”键展开模型并选择“Smart UV Project”
13）创建一个图片来保存贴图。
a）在左侧的Image Editor中，创建一个新图片
b）为图片起个名字，并取消勾选“Alpha”，点击OK。
14）为了做顶点颜色烘焙，我们需要改变Blender默认的颜色管理。
a）选择Blender的Scene面板
b）在Color Management下，将Display Device设置为None。
15）现在我们来讲顶点的颜色数据烘焙到贴图。
a）找到Render面板（那个相机的图标）
b）选中高解析度的（原始的那份）模型
c）按住Shift并点击复制的那份模型（优化过的那份）。在你场景的树状图中，你可以看到原始模型的字体是黑色，复制模型的字体是白色：
16）下拉找到Bake（烘焙）菜单
a）勾选“Selected to active”
b）取消勾选“Clear”
c）点击Bake按钮
17）在左边的视图中，你可以看到顶点颜色都被烘焙到贴图中了：
18）保存贴图到本地文件。
a）在Image Editot菜单中选择Image/Save As Image
19）现在我们将贴图应用到优化过的那个模型上。
a）选中优化过的模型
b）添加一个新贴图
c）设置type=image或者movie
d）打开贴图文件
e）在Mapping栏中将Coordinates设置为UV
f）将Map设置为UVMap
20）现在我们有了贴图和优化过的模型，我们可以从项目中删掉原始模型了。
a）选中原始模型，选择Object-&Delete来删除它。
21）将场景导出为Babylon的格式。
a）选择File-&Export-&Babylon JS（如果你没看到这个选项，那回到第一步，阅读关于插件的那节）
b）将会导出两个文件：一个*.babylon和一个*.png（贴图）文件。
第四步：用BabylonJS导入并显示模型
现在我们有了*.babylon的场景文件和*.png的贴图文件，用BabylonJS我们能很容易的将其导入并显示出来。
1）确定你的网页服务器开启了Babylon Mime Types。在IIS中，你需要在system.webserver中添加下面的一段（在configuration下面）：
&staticContent&
&!-- add mime types for babylon file types --&
&mimeMap fileExtension=".fx" mimeType="application/shader" /&
&mimeMap fileExtension=".babylon" mimeType="application/babylon" /&
&/staticContent&
&staticContent&&!-- add mime types for babylon file types --&&mimeMap fileExtension=".fx" mimeType="application/shader" /&&mimeMap fileExtension=".babylon" mimeType="application/babylon" /&&/staticContent&
2）我们要用到两个从Babylon下载的脚本（将它们放在scripts子目录下）：hand.js和Babylon.js
3）创建一个新HTML文件，加上下面的代码，用来从Blender导出的文件中创建Babylon的场景。
JavaScript
&title&Simple Babylon Demo&/title&
&link href="index.css" rel="stylesheet" /&
&script src="scripts/hand.js"&&/script&
&script src="scripts/babylon.js"&&/script&
window.onload = (function () {
var canvas = document.getElementById("canvas");
// Check that browser supports WebGL
if (!BABYLON.Engine.isSupported()) {
document.getElementById("notSupported").className = "";
document.getElementById("opacityMask").className = "";
// create Babylon Engine
var engine = new BABYLON.Engine(canvas, true);
// create the Scene
var scene = new BABYLON.Scene(engine);
// add a light
var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
// Add a camera that allows rotating view around a point
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
// load the scene (exported from blender)
BABYLON.SceneLoader.ImportMesh("", "images/models/", "monkey.babylon", scene, function (newMeshes, particleSystems) {
// optional - position and size the mesh
var monkey = newMeshes[0];
monkey.scaling.x = 70;
monkey.scaling.y = 70;
monkey.scaling.z = 70;
monkey.position.z = -48;
monkey.position.y = 20;
monkey.position.x = 0;
// optional - add in a material and platform
var platform = newMeshes[1];
platform.material = new BABYLON.StandardMaterial("texture1", scene);
scene.activeCamera.attachControl(canvas);
// register a render loop to render scene
engine.runRenderLoop(function () {
scene.render();
window.addEventListener("resize", function () {
engine.resize();
&div id="opacityMask" class="hidden"&&/div&
&canvas id="canvas"&&/canvas&
&div id="notSupported" class="hidden"&Your browser does not support WebGL&/div&
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
&html&&head&&title&Simple Babylon Demo&/title&&link href="index.css" rel="stylesheet" /&&&script src="scripts/hand.js"&&/script&&script src="scripts/babylon.js"&&/script&&script&window.onload = (function () {var canvas = document.getElementById("canvas");&// Check that browser supports WebGLif (!BABYLON.Engine.isSupported()) {document.getElementById("notSupported").className = "";document.getElementById("opacityMask").className = "";} else {&// create Babylon Enginevar engine = new BABYLON.Engine(canvas, true);&// create the Scenevar scene = new BABYLON.Scene(engine);&// add a lightvar light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);&// Add a camera that allows rotating view around a pointvar camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);&// load the scene (exported from blender)BABYLON.SceneLoader.ImportMesh("", "images/models/", "monkey.babylon", scene, function (newMeshes, particleSystems) {// optional - position and size the meshvar monkey = newMeshes[0];monkey.scaling.x = 70;monkey.scaling.y = 70;monkey.scaling.z = 70;monkey.position.z = -48;monkey.position.y = 20;monkey.position.x = 0;&// optional - add in a material and platformvar platform = newMeshes[1];platform.material = new BABYLON.StandardMaterial("texture1", scene);});&scene.activeCamera.attachControl(canvas);&// register a render loop to render sceneengine.runRenderLoop(function () {scene.render();});&// Resizewindow.addEventListener("resize", function () {engine.resize();});}});&/script&&&/head&&body&&div id="opacityMask" class="hidden"&&/div&&canvas id="canvas"&&/canvas&&div id="notSupported" class="hidden"&Your browser does not support WebGL&/div&&/body&&/html&
再提醒一下，你可以在和看到整个过程的两个例子。就像你所见，用WebGL来显示模型还需要一点额外的优化工作，但掌握这些我就可以最终控制模型的大小和细节。使用WebGL和BabylonJS，让我们有了无论在IE11、Firefox、Chrome、甚至一些移动平台的浏览器，都可以使用的跨平台的解决方案。
原文链接：
- 译文链接： [ 转载请保留原文出处、译者和译文链接。]
Practice doesn't make perfect, passion makes perfect. 新浪微博WebGL 入门 (Windows)
Windows 应用
您所需的主题如下所示。但此主题未包含在此库中。
WebGL 入门
使用 WebGL 创建极快的图形。
WebGL 基础知识
使用 WebGL API 后，可以通过直接编程并控制计算机的图形处理器 (GPU) 来创建高性能的 2D 和 3D 图形。WebGL 可在 Canvas 元素上以绘图上下文的方式呈现画面，与 2D 上下文非常类似，但提供对计算机 GPU 的底层访问。
WebGL 与传统的 Web 编程之间存在少量差异，因为你使用两种语言编写每个应用。要使用 WebGL，部分代码以 JavaScript 编写，而另一部分代码则使用一种类似 C 语言的低级语言，名为 GLSL（OpenGL 着色语言）编写。图像的加载、颜色的设置、对象的描述都在 JavaScript 代码部分中进行。GLSL 代码会将图像、颜色和矢量转换为通过着色器程序在 GPU 上运行。两者的结合使用，为 WebGL 提供极速图形。
我们使用的示例不包含任何 WebGL 库。实际上，大多数开发人员都使用库完成困难或重复的任务，例如矩阵数学或创建基本几何形状。例如，WebGL 不提供缩放或旋转等矩阵函数。使用 WebGL 的一个根本要点是创建 3D 图形， 库提供了标准矩阵转换。另外一个示例是，你可以将 3D 图形中的形状描述为一系列三角形。对于球，则需要为每个顶点创建坐标数组来描述这些三角形，同时使用三角函数计算每个点。使用 （大约一半 WebGL 网页使用）等通用库后，你只需指定半径和要使用的三角形的数量，就能创建一个球。
很多开发人员都使用库，这样他们只需编写这些库不提供的专用着色器代码即可。请参阅 部分以获取库、教程和其他信息的链接。
我们讨论的示例被称为 Warp。Warp 显示导入的照片，并根据你的鼠标或触控输入情况拉伸和缩小该图像。这个示例不仅非常有趣，而且代码还提供了使用 WebGL 的基本入门知识。
Warp 介绍了：
应用中的基本 WebGL 设置。
如何创建矢量点数组来表示三角形和线条以及将颜色或照片应用到表面。
如何在拉伸和缩小照片时使用鼠标事件和少量三角函数来实现出色的效果。
虽然 WebGL 可为 3D 对象建模，但为了简单起见，本例只使用 2D 对象。
WebGL 通过顶点数组或坐标描述形状，这些顶点数组或坐标代表分解为一组三角形的对象。
WebGL 图形既可以是简单的 2D 几何形状，也可以是复杂的呈现，例如汽车、摩天楼或解剖表面的真实图像。对象表面可使用几个或多个三角形呈现，三角形越多，细节越清楚。 这些只取决于三角形的大小和数量。Warp 示例使用 800 个三角形，或排列为 20 x 20 网格的 400 个正方形。该大小可提供良好的分辨率以供变形，但不会过于复杂。试用该网格大小后，通过结果就能看到其效果。
Warp 会将照片应用为纹理。在 WebGL 中，纹理被定义为图像、颜色或图案，用于覆盖你创建的矢量对象表面。
WebGL 应用编写入门
应用将形状作为矢量数组传递到 GPU，矢量数组通常表示一个三角形集合。三角形可通过以下方式描述给 GPU：
单个三角形的三个顶点
三角形带，在首个三角形之后只对每个三角形新增一个顶点
还可向 GPU 描述线条、线条带或点。 当你将矢量数组传递到 GPU 时，就指定了数组的读取方式，例如单个三角形、线条或带。
若要描述三角形和其他形状，请使用 x、y 和 z 坐标为每个点设置顶点。GPU 使用右侧的 3D 笛卡尔坐标系统，浮点数在 -1 至 1 之间，不受画布大小的影响。
零是原点，也是显示区域的中心，有三条轴：x 轴、y 轴和 z 轴。在右侧的坐标系统中，正 X 值表示向右，正 Y 值表示向上，正 Z 值表示面向查看者。之所以称为右侧坐标系，这是因为你可以伸出右手，如果右手拇指指向正 X 轴方向，食指指向正 Y 轴方向，则其他手指将指向正 Z 轴方向（面向查看人）。
下图显示了笛卡尔坐标系统：
WebGL 呈现管道
现代 GPU 使用可编程呈现管道。早期图形卡具有可旋转和缩放对象的内置函数，但不允许你进行更改。通过可编程呈现管道可编写自己的函数，进而能够使用顶点和片段着色器控制着色器和图像的呈现方式。顶点着色器控制形状上的点或顶点。要在空间中旋转对象，顶点着色器负责应用矩阵（由你提供）来旋转坐标。若要向形状添加图像，片段着色器或像素着色器将根据其从顶点着色器获取的信息来控制图像应用到该形状的方式。 GPU 提供将数据传入和传出着色器的管道，并在屏幕上进行最终呈现。基本的呈现管道如下所示：
呈现管道使用以下常规步骤：
应用和指向某个矢量缓冲区的矢量数组一同传递到坐标中。矢量坐标依次处理至顶点着色器。
顶点着色器处理与其他顶点相关的顶点，移动坐标，添加颜色参考以及执行其他操作。
三角形组合在一起并传递到光栅器，光栅器在三角形中的顶点之间插入像素。
深度测试操作可以验证像素是否可见。像素（和对象）可能在可视范围之外，过于靠前或靠后（根据它们的 Z 坐标），或者被其他对象阻挡。如果它们不可见，则会被忽略。
片段着色器为像素着色。颜色或图像参考可从顶点着色器传递到片段着色器，或者从片段着色器内部设置颜色。
最终，像素被发送至帧缓冲区，显示在屏幕上。
虽然只是简单介绍了一下 GPU 的工作原理，但为图形的整个创建过程提供了思路。
在 中，我们将演示如何从 Canvas 元素获取 ，以及呈现图形所需的基本设置。
此页面有帮助吗？
更多反馈？
1500 个剩余字符
我们非常感谢您的反馈。