Blender Three.js 智慧3D机房开发模型创建与导入中的常见问题与解决方案

芥子c1yw3tb42g 2023-08-26 发布于陕西

展开全文

机房效果展示

可能出现的问题及解决方法

Three. js服务器运行环境搭建及文件配置

使用Node.js搭建本地服务器

文件配置

Blender材质处理

Blender导出GLTF模型出现材质丢失

机房效果展示

机房正面图：

机房背面图：

机房：

机柜内部（因为还处于测试阶段，都先使用相同材质）：

桥架和风管：

操作中心：

UPS间外部：

UPS间内部：

blender中机房建模效果图

渲染模式下机房模型效果图（可以看到blender中一部分模型是不透明的，但在Three.js中是透明的，为了得到玻璃材质效果，需要在Three.js中单独进行处理，下文会提到如何解决Three.js中玻璃材质问题）：

可能出现的问题及解决方法

在作者的不懈努力下，终于在翻遍各大技术论坛以及Blender和Three.js的官方文档后，成功根据机房的cad图纸转化为上图所示的机房效果，可以说把所有能踩的坑都踩了一遍。

接下来，我将从 Three. js服务器运行环境搭建及文件配置， Blender模型材质处理，Blender导出glTF格式模型和 Three. js模型显示的场景设置，依次对可能出现的问题及解决办法进行说明。

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搭建本地服务器

我这里将介绍如何使用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';为已经修改过的路径。在完成所有需要导入的脚本文件的修改后，包括修改引用文件的引用文件！！！就可以正常显示模型了。

Blender材质处理

Blender导出GLTF模型出现材质丢失

在我完成前面的操作后，并且导入了一个从网络上找到的glb格式模型并且可以正常显示后，就开始Blender的建模，下图是我第一次机房建模在Blender中的效果图：

看着还不错吧，连玻璃都一并做好了，只需要将模型以GLTF格式导出就大功告成，模型导出也不过如此，就在我导出模型放入Three.js后在浏览器上进行显示后，却得到下图的效果：

虽然很黑，但很明显不是光线的问题，那只能是材质丢失的问题。经过一番查询，终于在Blender官方文档中得到答案

GLTF文件只支持原理性BSDF材质，其他的着色器和材质都不支持，因此得在Blender中手动更改着色器并重新链接图片才可以导出我们需要的模型。

玻璃材质为例，在上图可以看到，玻璃材质是实现是以透明BSDF实现的，并不是原理化BSDF。因此需要将所有不是以原理化BSDF为着色器的材质重新进行链接。下图为可以正常导出的材质：

关于如何获取材质图片，以及Blender材质的详细细节如何就不属于本文的讨论的范围，感兴趣的话，可以搜索Blender材质节点进行相关的了解。

Three.js玻璃材质制作

既然只能通过原理化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./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  
        }

Blender导出glTF格式模型

在完成上述模型的搭建及材质处理后，就需要将模型进行导出，在导出的时候要注意要使用鼠标将模型全选。

点击“文件”，然后点击“导出”，选择“glTF2.0”。

点开右边的“数据”，勾选“压缩”即可。

这样就足够满足学习的需要了，当然，里面还有一些个性化的选择，不过这就不在本文的讨论范围了。

Three. js模型显示场景的设置

你可能在第一次导入模型时候发现，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)