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

这篇具有很好参考价值的文章主要介绍了Blender Three.js 智慧3D机房开发模型创建与导入中的常见问题与解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

机房效果展示

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

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

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

文件配置

Blender材质处理

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

Three.js玻璃材质制作

Blender导出glTF格式模型

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

总结

文章来源地址https://www.toymoban.com/news/detail-447028.html

机房效果展示

机房正面图：

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

机房背面图：

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

机房：

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

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

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

桥架和风管：

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

操作中心：

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

UPS间外部：

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

UPS间内部：

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

blender中机房建模效果图

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

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

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

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

在作者的不懈努力下，终于在翻遍各大技术论坛以及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的官方文档中找到问题产生的原因：

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

所以，要想成功地从外面导入模型，我们就必须在本地运行服务器。但如果你继续往下看，你就会发现，官方对你能用哪些软件包来创建一个服务器进行了简略的描述，却没有给出具体的解决方案（你不知道服务器代码是如何编写的）。

本地服务器的建立方法多种多样，如果你对这方面有所了解，那你可以使用你熟悉的方法来建立本地服务器，可能你会问那我直接使用云服务器如何？我的答案是可以，但是考虑到个人购买的云服务器的上行带宽（你从服务器上下载文件的最大速度）是如此的低，加载一个80mb的模型大概在10分钟左右，所以为了方便和开发效率起见，在本地搭建一个服务器用于测试模型，再将测试完成后的模型放入云服务器中，才是你最好的解决方案。

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

我这里将介绍如何使用Node.js来搭建本地服务器，需要使用express包，具体的原理和下载流程我就不进行赘述了，感兴趣的话可以自行搜索。下图是我进行模型测试的文件目录结构：

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

其中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"

很明显不满足以"/"或"./"，或者"../"开头，这里还是以我的文件目录结构为例：

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

可以看到我将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中的效果图：

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

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

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

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

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

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

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

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

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

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

Three.js玻璃材质制作

既然只能通过原理化BDSF作为着色器，那么玻璃材质又该如何进行处理？以Blender中的猴头模型为例：

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

为猴头新建材质后，初始设置如下图：

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

进行如下设置，将糙度设置为0，透射设置为1，Alpha设置为0.1。

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

我们想要的玻璃材质就做好了，甚至不需要我们特地去寻找材质，不过你还记得前面机房展示中，玻璃部分在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

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

并且在下面的评论中也给出了问题的解决，回答链接：https://github.com/mrdoob/three.js/issues/25274

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

大概意思就是片段着色器无法在> r144版本中编译，而我们的浏览器是r144以上的版本。在一番阅读后，发现原文作者要我们进行一些代码的修改，不过在我打开代码文件时，发现正在使用的three代码已经是被官方修改过了的，并且将模型放入官方的编辑器中也是能够成功显示的。

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

总之，我在这里已经找到的问题产生的原因以及可能的解决方案，不断尝试的过程中，均以失败告终，于是我开始思考另一种解决方法，既然不能使用Blender的着色器，那么就使用Three.js中的材质渲染。所以就先在Three.js中先编写玻璃材质如下：

const glassMaterial = new THREE.MeshPhysicalMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.1,
    depthWrith: false
})

之后在Blender为需要添加玻璃材质的模型的命名中包含“玻璃”两字。

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

之后，在Three代码中添加判断，如果模型名字包含“玻璃”就将它的材质设为已经编写好的玻璃材质即可，因此就不需要在Blender中提前为玻璃部分的模型设置材质，设置了也会被后续的代码进行材质的覆盖。

if (child.isMesh && child.name.includes("玻璃")) {
            child.material = glassMaterial  
        }

Blender导出glTF格式模型

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

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

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

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

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

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

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

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

你可能在第一次导入模型时候发现，Three.js模型显示全黑。

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

这是由于你的场景中没有光，于是你说要有光，你就在你的文件中添加了如下代码：

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)

这里你可以只写其中一个或者两个都写上，这里只是给你提供了一种解决问题的最简单方法。打光也是一门很有价值的课程，打光对模型的展示效果有很大的影响，其重要性不亚于调整材质。