Test-webgl

本文档主要用于测试在网页端渲染三维模型。

将你的本地机器作为服务器

很多时候你需要把你自己的 PC 作为服务器(serve your site locally ),这样才能看到你的网页的效果。例如(个人认为),很多 WebGL 的效果必须要在服务器上才能看到。这里说明如何将你的机器作为服务器,参考的是WebGL 3D Model Viewer Using three.js 界面中作者的一个回复。

步骤如下:

npm install http-server -g

在 Windows 中,你会得到类似这样的结果:

$ npm install http-server -g
C:\Users\chao\AppData\Roaming\npm\http-server -> C:\Users\chao\AppData\Roaming\npm\node_modules\http-server\bin\http-server
C:\Users\chao\AppData\Roaming\npm\hs -> C:\Users\chao\AppData\Roaming\npm\node_modules\http-server\bin\http-server
+ http-server@0.12.1
updated 1 package in 1.007s
  • 前进到你的 html 文件所在路径。然后使用如下命令启动服务器:
http-server -p 8000

这里的 8000 是端口名称(其实换其他数值也行)。你会得到类似如下结果:

$ http-server -p 8000
Starting up http-server, serving ./
Available on:
  http://10.0.0.233:8000
  http://127.0.0.1:8000
  http://192.168.8.193:8000
Hit CTRL-C to stop the server

如果这样就说明服务器启动成功了。上面这几个 url 链接都可以使用。

  • 此时就可以在你的浏览器中测试了。在浏览器中输入上面你得到的任意一个 url + 你的 html 文件名,类似这样:
http://10.0.0.233:8000/index.html

或者使用 localhost:端口号/html_file文件,类似这样:

localhost:8000/index.html

这时你就能看到你的 html 文件在服务器上的效果了。

WebGL 3D Model Viewer Using three.js

参考:

  • https://github.com/Lorti/webgl-3d-model-viewer-using-three.js
  • https://manu.ninja/webgl-3d-model-viewer-using-three-js

这是网上牛人开发的一个基于 Three.js 的网页渲染普通三维模型的工具。优点是:

  • 支持 OBJ 模型格式并且支持纹理。
  • 提供了几乎所有常见的和模型相关的操作函数,例如位姿变换、光照调节和模型操作等。

model-viewer

model-viewer 是 Google 出品的一款在网页上渲染三维动态模型的 AR 工具。它的优点是:

  • 使用非常简单,放入几行代码即可;
  • 支持常见的 3D animation 格式(不过似乎只支持 animation,不支持常见的静态三维模型格式)。目前只支持常见的 glb 和 glTF 格式。
  • 支持简单的模型处理操作,例如光照调节、位姿变化、交互操作等等。

下面的代码就可以在网页上展示一个三维模型(虽然本文是 markdown 格式,但是它最终会按照 html 来处理,因此下面的 html 代码可以使用)。

<!-- Loads model-viewer for modern browsers -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<!-- Loads model-viewer for older browsers -->
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Render the animation. Use it like any other HTML element -->
<model-viewer src="/images/RobotExpressive.glb" alt="A 3D model of a robot" auto-rotate="" camera-controls="" background-color="#455A64"></model-viewer>

渲染 RobotExpressive.glb 做测试:

这是另一个比较大的模型 copyroom.glb:

clay-viewer

https://github.com/pissang/clay-viewer

3D model viewer with high quality rendering based on ClayGL and glTF2.0/GLB export.

Search

    Table of Contents