目录
机房效果展示
可能出现的问题及解决方法
Three. js服务器运行环境搭建及文件配置
使用Node.js搭建本地服务器
文件配置
Blender材质处理
Blender导出GLTF模型出现材质丢失
Three.js玻璃材质制作
Blender导出glTF格式模型
Three. js模型显示场景的设置
总结
机房正面图:
机房背面图:
机房:
机柜内部(因为还处于测试阶段,都先使用相同材质):
桥架和风管:
操作中心:
UPS间外部:
UPS间内部:
blender中机房建模效果图
渲染模式下机房模型效果图(可以看到blender中一部分模型是不透明的,但在Three.js中是透明的,为了得到玻璃材质效果,需要在Three.js中单独进行处理,下文会提到如何解决Three.js中玻璃材质问题):
在作者的不懈努力下,终于在翻遍各大技术论坛以及Blender和Three.js的官方文档后,成功根据机房的cad图纸转化为上图所示的机房效果,可以说把所有能踩的坑都踩了一遍。
接下来,我将从 Three. js服务器运行环境搭建及文件配置, Blender模型材质处理,Blender导出glTF格式模型和 Three. js模型显示的场景设置,依次对可能出现的问题及解决办法进行说明。
在研究 Three. js的3D模型导入时,经常会出现报错问题,一般都是因为缺少一些关键的前提条件而直接导入模型。通常情况下,浏览器将显示类似于这样的错误:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of 'text/html'. Strict MIME type checking is enforced for module scripts per HTML spec.
我们可以在Three.js的官方文档中找到问题产生的原因:
所以,要想成功地从外面导入模型,我们就必须在本地运行服务器。但如果你继续往下看,你就会发现,官方对你能用哪些软件包来创建一个服务器进行了简略的描述,却没有给出具体的解决方案(你不知道服务器代码是如何编写的)。
本地服务器的建立方法多种多样,如果你对这方面有所了解,那你可以使用你熟悉的方法来建立本地服务器,可能你会问那我直接使用云服务器如何?我的答案是可以,但是考虑到个人购买的云服务器的上行带宽(你从服务器上下载文件的最大速度)是如此的低,加载一个80mb的模型大概在10分钟左右,所以为了方便和开发效率起见,在本地搭建一个服务器用于测试模型,再将测试完成后的模型放入云服务器中,才是你最好的解决方案。
我这里将介绍如何使用Node.js来搭建本地服务器,需要使用express包,具体的原理和下载流程我就不进行赘述了,感兴趣的话可以自行搜索。下图是我进行模型测试的文件目录结构:
其中express.js就是用来运行本地服务器的脚本文件,内容如下:
- var express = require('express');
- var app = express();
- app.use(express.static('./public'));
- app.listen(3000, '127.0.0.1');
在终端输入:
node express.js
这样你便成功运行服务器,在浏览器输入中输入http://localhost:3000/后,程序将public作为运行主目录,执行里面的index.html文件。
当然之所以仅仅需要4行就可以搭建出一个简单的本地服务器,是因为express将功能进行了封装,如果想了解其中运行的流程,可以阅读以下代码(仅有post功能),其中的MINEType字典可以解释前面浏览器报错的原因。
var http = require('http') var url = require('url') var fs = require('fs') var path = require('path') var queryString = require('querystring') var MINEType = { '.html': 'text/html', '.css': 'text/css', '.gif': 'image/gif', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png', '.js': 'application/x-javascript' } var server = http.createServer(function(request, response) { response.writeHead(200, { 'content-type': 'text/html;charset=UTF-8' }); var pathname = url.parse(request.url).pathname if (request.method.toLocaleLowerCase() === 'post' && pathname === '/postMethod') { let postdata = '' request.addListener('data', function(chunk) { postdata += chunk }) request.addListener('end', function() { postdata = queryString.parse(postdata) console.log(postdata) }) } if (pathname === '/') { pathname = '/index.html' } else if (pathname.indexOf('.') === -1) { pathname += '/index.html' } fs.readFile('./public' + pathname, function(err, data) { if (err) { response.end('404') return } response.writeHead(200, { 'content-type': MINEType[path.extname(pathname)] }); response.end(data) }) }) server.listen(3000, '127.0.0.1')
在你成功搭建本地服务器后,你迫不及待将模型进行加载,结果浏览器还是出现了报错:
Uncaught TypeError: Failed to resolve module specifier 'three'. Relative references must start with either '/', './', or '../'.
翻译过来就是:未捕获TypeError:未能解析模块说明符“three”。相对引用必须以'/'或'./',或者'../'开头。具体原因也同样自行搜索,我在这就不进行赘述。
解决方法其实已经出现在报错中了,只要相对引用以'/'或'./',或者'../'开头就好。仅模型加载为例,文件的开头一般是这样的:
- import * as THREE from 'three'
- //导入控制器
- import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
- //模型加载
- import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
- import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
很明显不满足以'/'或'./',或者'../'开头,这里还是以我的文件目录结构为例:
可以看到我将three单独从node-modules中提出来放到public文件夹中,同时将three/build/three.module.js也放到public文件夹中,这是因为搭建出来的服务器是比较简单的一种,只对服务器的当前目录支持比较好。这样,文件的开头可以修改为:
- import * as THREE from './three.module.js';
- import { GLTFLoader } from './three/examples/jsm/loaders/GLTFLoader.js'
- import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js'
- import { DRACOLoader } from './three/examples/jsm/loaders/DRACOLoader.js'
到这里还只是处理了main.js文件的相对引用问题,引用过的脚本文件也得进行相应的修改,以GLTFLoader.js文件为例,它的开头为:
import { AnimationClip, Bone, Box3, BufferAttribute, BufferGeometry, ClampToEdgeWrapping, Color, DirectionalLight, DoubleSide, FileLoader, FrontSide, Group, ImageBitmapLoader, InstancedMesh, InterleavedBuffer, InterleavedBufferAttribute, Interpolant, InterpolateDiscrete, InterpolateLinear, Line, LineBasicMaterial, LineLoop, LineSegments, LinearFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoaderUtils, Material, MathUtils, Matrix4, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, MeshStandardMaterial, MirroredRepeatWrapping, NearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, NumberKeyframeTrack, Object3D, OrthographicCamera, PerspectiveCamera, PointLight, Points, PointsMaterial, PropertyBinding, Quaternion, QuaternionKeyframeTrack, RepeatWrapping, Skeleton, SkinnedMesh, Sphere, SpotLight, Texture, TextureLoader, TriangleFanDrawMode, TriangleStripDrawMode, Vector2, Vector3, VectorKeyframeTrack, sRGBEncoding } from 'three'; import { toTrianglesDrawMode } from '../utils/BufferGeometryUtils.js';
需改成:
import { AnimationClip, Bone, Box3, BufferAttribute, BufferGeometry, ClampToEdgeWrapping, Color, DirectionalLight, DoubleSide, FileLoader, FrontSide, Group, ImageBitmapLoader, InstancedMesh, InterleavedBuffer, InterleavedBufferAttribute, Interpolant, InterpolateDiscrete, InterpolateLinear, Line, LineBasicMaterial, LineLoop, LineSegments, LinearFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoaderUtils, Material, MathUtils, Matrix4, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, MeshStandardMaterial, MirroredRepeatWrapping, NearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, NumberKeyframeTrack, Object3D, OrthographicCamera, PerspectiveCamera, PointLight, Points, PointsMaterial, PropertyBinding, Quaternion, QuaternionKeyframeTrack, RepeatWrapping, Skeleton, SkinnedMesh, Sphere, SpotLight, Texture, TextureLoader, TriangleFanDrawMode, TriangleStripDrawMode, Vector2, Vector3, VectorKeyframeTrack, sRGBEncoding } from '../../../../three.module.js'; import { toTrianglesDrawMode } from '../utils/BufferGeometryUtils.js';
同理,在GLTFLoader.js文件又增加了BufferGeometryUtils.js文件需要修改,上图的import { toTrianglesDrawMode } from '../utils/BufferGeometryUtils.js';为已经修改过的路径。在完成所有需要导入的脚本文件的修改后,包括修改引用文件的引用文件!!!就可以正常显示模型了。
在我完成前面的操作后,并且导入了一个从网络上找到的glb格式模型并且可以正常显示后,就开始Blender的建模,下图是我第一次机房建模在Blender中的效果图:
看着还不错吧,连玻璃都一并做好了,只需要将模型以GLTF格式导出就大功告成,模型导出也不过如此,就在我导出模型放入Three.js后在浏览器上进行显示后,却得到下图的效果:
虽然很黑,但很明显不是光线的问题,那只能是材质丢失的问题。经过一番查询,终于在Blender官方文档中得到答案
GLTF文件只支持原理性BSDF材质,其他的着色器和材质都不支持,因此得在Blender中手动更改着色器并重新链接图片才可以导出我们需要的模型。
玻璃材质为例,在上图可以看到,玻璃材质是实现是以透明BSDF实现的,并不是原理化BSDF。因此需要将所有不是以原理化BSDF为着色器的材质重新进行链接。下图为可以正常导出的材质:
关于如何获取材质图片,以及Blender材质的详细细节如何就不属于本文的讨论的范围,感兴趣的话,可以搜索Blender材质节点进行相关的了解。
既然只能通过原理化BDSF作为着色器,那么玻璃材质又该如何进行处理?以Blender中的猴头模型为例:
为猴头新建材质后,初始设置如下图:
进行如下设置,将糙度设置为0,透射设置为1,Alpha设置为0.1。
我们想要的玻璃材质就做好了,甚至不需要我们特地去寻找材质,不过你还记得前面机房展示中,玻璃部分在Blender中却是不透明的吗?如果将该模型导出,并放到浏览器中进行展示就会出现如下报错:
THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Program Info Log: Fragment shader is not compiled.
FRAGMENT
ERROR: 0:880: 'isinf' : no matching overloaded function found
ERROR: 0:880: '' : boolean expression expected
这是由于调整透射的值导致的,最后我发现在Three.js的论坛中也有人遇到了相同的问题,问题链接:https://discourse.threejs.org/t/meshphysicalmaterial-with-r145-and-later/47092
并且在下面的评论中也给出了问题的解决,回答链接:https://github.com/mrdoob/three.js/issues/25274
大概意思就是片段着色器无法在> r144版本中编译,而我们的浏览器是r144以上的版本。在一番阅读后,发现原文作者要我们进行一些代码的修改,不过在我打开代码文件时,发现正在使用的three代码已经是被官方修改过了的,并且将模型放入官方的编辑器中也是能够成功显示的。
总之,我在这里已经找到的问题产生的原因以及可能的解决方案,不断尝试的过程中,均以失败告终,于是我开始思考另一种解决方法, 既然不能使用Blender的着色器,那么就使用Three.js中的材质渲染。所以就先在Three.js中先编写玻璃材质如下:
- const glassMaterial = new THREE.MeshPhysicalMaterial({
- color: 0xffffff,
- side: THREE.DoubleSide,
- transparent: true,
- opacity: 0.1,
- depthWrith: false
- })
之后在Blender为需要添加玻璃材质的模型的命名中包含“玻璃”两字。
之后,在Three代码中添加判断,如果模型名字包含“玻璃”就将它的材质设为已经编写好的玻璃材质即可,因此就不需要在Blender中提前为玻璃部分的模型设置材质,设置了也会被后续的代码进行材质的覆盖。
- if (child.isMesh && child.name.includes('玻璃')) {
- child.material = glassMaterial
- }
在完成上述模型的搭建及材质处理后,就需要将模型进行导出,在导出的时候要注意要使用鼠标将模型全选。
点击“文件”,然后点击“导出”,选择“glTF2.0”。
点开右边的“数据”,勾选“压缩”即可。
这样就足够满足学习的需要了,当然,里面还有一些个性化的选择,不过这就不在本文的讨论范围了。
你可能在第一次导入模型时候发现,Three.js模型显示全黑。
这是由于你的场景中没有光,于是你说要有光,你就在你的文件中添加了如下代码:
scene.add(new THREE.AmbientLight(0x666666))
const light1 = new THREE.DirectionalLight(0xffffff, 1) light1.position.set(0, 0, 10) scene.add(light1) const light2 = new THREE.DirectionalLight(0xffffff, 1) light1.position.set(0, 0, -10) scene.add(light2) const light3 = new THREE.DirectionalLight(0xffffff, 1) light1.position.set(10, 0, 0) scene.add(light3) const light4 = new THREE.DirectionalLight(0xffffff, 1) light1.position.set(-10, 0, 0) scene.add(light4)
这里你可以只写其中一个或者两个都写上,这里只是给你提供了一种解决问题的最简单方法。打光也是一门很有价值的课程,打光对模型的展示效果有很大的影响,其重要性不亚于调整材质。
最后感谢你的阅读,这里本文所能提供的就像造房子的劣质脚手架,当你在造好房子后,就应该把它拆掉,在它的基础上继续学习,这样才能收获更多。如果你遇到了在本文中没有出现的问题,欢迎评论或者私信我。
联系客服