使用 JS 从零开始构建 3D 渲染引擎 (I)
希沃ENOW大前端
公司官网:CVTE(广州视源股份)
团队:CVTE旗下未来教育希沃软件平台中心enow团队
本文作者:
引子
为什么要写这个系列呢? 市面上关于前端的三维渲染的入门教程层出不穷, 有偏重于数学计算原理的, 有偏向于渲染管线流程介绍的, 也有告诉你API怎么用如何快速上手的.
这系列文章期望从零开始去考虑3D渲染引擎的搭建, 从无到有一步一步去构建三维渲染必备的要素和流程, 让读者能够"知其然亦知其所以然", 在这浮躁的环境带来一丝清凉, 愿大家能有所收获, 欢迎交流讨论.
这系列文章以代码Demo为线索, 从这个demo的搭建过程中去深度理解三维渲染的要素和环节. 具有以下特点:
一、不使用webgl技术来完成三维渲染, webgl规范帮我们封装了很多底层实现, 因此也屏蔽了一部分重要的细节, 笔者更希望webgl技术只是提供了对接GPU计算的接口, 让我们可以使用GPU的力量来提升计算效率, 当然不使用GPU仅使用CPU也能做到同样的事, 只不过效率低一些, 但是以学习为目的的话足够了, 反而会使我们更清晰, 因此我们会使用纯粹JS代码来进行所有的运算和绘制并且最终实现一个"3D渲染引擎";
二、我们利用demo的搭建过程来理解三维渲染, 因此在这个过程中我们会分为几个小阶段, 每一个阶段有阶段性目标作为驱动, 有时会用比较简易的方法来达到目的, 当阶段性目标变得更复杂, 可能会推掉之前的部分实现来满足更复杂的需求;
三、既然是以Demo为线索和主体, 所有的代码都是可得的, 在这个仓库里(github.com/ShaojieLiu/…), 期望大家可以去下载并运行, 甚至亲自从零开始一起搭建, 相信能有所收获!
那么我们先亮出我们这一系列的最终目标: 我们会基于2D渲染的API来实现三维渲染引擎. 它可以解析并渲染市面上常用的三维模型数据格式, 具有边框渲染/片元渲染/贴图功能/光照阴影等. 请看以下效果图:
效果一:
效果二:
线框渲染器
小目标
当然, 如果期望一篇文章就可以使读者从零开始搭建出这样一个渲染引擎, 那基本上可以洗洗睡了.
因此我们需要分解这个最终目标, 先定一个小目标: 线框渲染器. 具体来讲如果输入一个立方体模型, 可以输出这样的渲染效果.(勉强还是看得出是一个立方体吧)
Demo仓库介绍
你可以跟着笔者的脚步一步一步自己来实现这些小目标, 也可以走马观花大致了解. 如果你愿意花时间一起学习的话, 可以将这个仓库拉下: github.com/ShaojieLiu/…
根路径下有一个index.html, 打开会看到所有实验汇总的一个目录页面, 由于当前只做了前三个实验, 因此你看到的界面如下图所示.
仓库的目录结构如下所示, 其中index.html为目录页, common为公共函数, 0/1.1/1.2为小实验文件夹. 小实验文件夹内部包括math相关的类, render相关的类, 只要打开index.html即可预览调试该demo.
从一条线开始
正所谓"一生二, 二生三, 三生万物", 讲图形渲染总是会从绘制一条线开始. (本小节代码可以参考demo0)
const main = () => {
const c = document.querySelector('#canvas')
const canvas = Canvas.new(c)
canvas.drawline(Vector.new(50, 50), Vector.new(100, 100), Color.green())
}
Canvas类
我们期望封装一个Canvas类, 它来负责操作真正的canvas DOM进行绘制, 首先它最基本的能力就是drawline.
这里我们使用了canvas.context的API来进行线段的绘制. canvas的API十分简单易用我就不赘述了, 不太熟悉的读者可以在这里查阅:
developer.mozilla.org/zh-CN/docs/…
class Canvas extends GObject {
constructor(canvas) {
super(canvas)
this.canvas = canvas
this.ctx = canvas.getContext('2d')
}
drawline(v1, v2, color) {
const ctx = this.ctx
ctx.beginPath()
// 设置颜色
ctx.strokeStyle = color.toRgba()
// 移动起点
ctx.moveTo(v1.x, v1.y)
// 连接到终点
ctx.lineTo(v2.x, v2.y)
ctx.closePath()
// 绘制path的stroke(边框)
ctx.stroke()
}
}
Vector类
由于我们后续会引入矩阵运算, 因此在这里先引入向量的概念, 向量就是一条有方向的线段, 在三维它可以由x, y, z来表示.
本文更偏向于渲染相关, 一些计算的细节可能不会过度展开, 因此一些方法具体的实现我隐藏了(但是在代码仓库可以找到), 聪明的你看方法名字应该也知道如何实现了.
例如相减/取模/归一/点乘/叉乘 等等, 这里都可以先不看他们.
class Vector extends GObject {
// 表示三维点的类
constructor(x, y, z) {
super()
this.x = x
this.y = y
this.z = z
}
}
Color类
Color类就更简单了, 我们采用rgba来描述颜色, 并封装了不同格式的转换方法, 还有常见的颜色.
class Color extends GObject {
// 表示颜色的类
constructor(r, g, b, a) {
super()
this.r = r
this.g = g
this.b = b
this.a = a
}
toRgba() {
return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`
}
// 常见的几个颜色
static black() {
}
static green() {
}
static blue() {
}
}
demo0
有了以上几个类, 你便可以绘制一条线出来, 得到了下图, 似乎有点...简单. 别急, 很快就要起飞了.
const main = () => {
const c = document.querySelector('#canvas')
const canvas = Canvas.new(c)
canvas.drawline(Vector.new(50, 50), Vector.new(100, 100), Color.green())
}
绘制Mesh网格正视图
Mesh的定义
什么是mesh呢? 形象一点的话, 前面提到的手枪模型可以分为两部分: 黑色的框线, 绿色的面元.
其中黑色的框线就是我们讲的mesh(网状格). 而且这些网状格的每一个格子不是矩形的, 而是三角形.
为什么使用三角形呢? 因为三角形的三个点必定是位于同一个平面的, 所以它是用来描述平面的最小单元, 反观四边形则不然, 因为3点确定一个面因此第4个点有可能是落在这个面之外的, 因此如果用四边形来描述的话, 有可能是一个平面也有可能是两个平面, 所以不太方便.
Mesh类
为此我们引入Mesh类来描述, 它主要由vertices和indices两个内部变量构成. (本小节代码可以参考demo1.1)
接下来我们用一个立方体来举例说明, vertices包含该几何体的所有顶点(8个顶点, 分别是v0到v7), 采用右手坐标系, 顶点的位置关系如下图.
indices是一个嵌套数组, 每个item描述一个三角小平面, 因此包含三个数字分别是指这个三角小平面的三个顶点是vertices数组中的第几个点(点的索引).
这个描述方式不是笔者创造的, 笔者观察了市面上绝大多数的三维模型数据格式(之后会有一节专门讲三维模型数据格式的解析, 在那里我们会展开, 这里先略过), 基本都是采用点+索引来描述面.
所以根据indices的数据, v0 v1 v2组成第一个面, v1 v3 v2组成第二个面, ... 以此类推.
class Mesh extends GObject {
// 表示三维物体的类
constructor() {
super()
this.position = Vector.new(0, 0, 0)
this.rotation = Vector.new(0, 0, 0)
this.scale = Vector.new(1, 1, 1)
this.vertices = null
this.indices = null
}
// 返回一个正方体
//
// v0----- v1
// /| /|
// v4------v5|
// | | | |
// | |v2---|-|v3
// |/ |/
// v6------v7
//
// Coordinates
// 右手坐标系
// Y
// |
// |
// O ------ X
// /
// Z
//
static cube() {
// 8 points
let points = [
-1, 1, -1, // 0
1, 1, -1, // 1
-1, -1, -1, // 2
1, -1, -1, // 3
-1, 1, 1, // 4
1, 1, 1, // 5
-1, -1, 1, // 6
1, -1, 1, // 7
]
let vertices = []
for (let i = 0; i < points.length; i += 3) {
let v = Vector.new(points[i], points[i + 1], points[i + 2])
let c = Color.randomColor()
vertices.push(Vertex.new(v, c))
}
// 12 triangles * 3 vertices each = 36 vertex indices
let indices = [
// 12
[0, 1, 2],
[1, 3, 2],
[1, 7, 3],
[1, 5, 7],
[5, 6, 7],
[5, 4, 6],
[4, 0, 6],
[0, 2, 6],
[0, 4, 5],
[5, 1, 0],
[2, 3, 7],
[2, 7, 6],
]
let m = this.new()
m.vertices = vertices
m.indices = indices
return m
}
}
这里的mesh的定义非常重要, 后续的内容都会基于这个定义, 务必花点时间理解一下.
在这里, 细心的同学会发现vertices不仅包括vector还包括了color, 这里的颜色我们绘制线框不会用到, 但是之后绘制片元的时候会用到.
class Vertex extends GObject {
// 表示顶点的类, 包含 Vector 和 Color
// 表示了一个坐标和一个颜色
constructor(position, color) {
super()
this.position = position
this.color = color
}
}
drawMesh方法
以上只是关于mesh的基础知识, 这个小demo里我们期望Canvas实例上有一个方法drawMesh, 可以绘制各式各样不同的mesh. 因此最关键的, 我们来看看drawMesh的具体实现.
canvas.drawMesh(Mesh.cube())
class Canvas extends GObject {
constructor(canvas) {
}
drawline(v1, v2, color) {
}
drawMesh(mesh) {
const { indices, vertices } = mesh
// 偏移的魔数
const position = Vector.new(150, 100, 0)
const color = Color.blue()
indices.forEach(ind => {
const [v1, v2, v3] = ind.map(i => {
// 强行缩放的魔数
return vertices[i].position.multi_num(30).add(position)
})
this.drawline(v1, v2, color)
this.drawline(v2, v3, color)
this.drawline(v1, v3, color)
})
}
}
demo1.1
在这个demo里, 我们绘制几何体的"正视图", 因此我们直接忽略每个顶点的z值, 直接将其画在canvas平面内, 效果就好像踩扁废弃的利乐装盒子一样, 直接将几何体"压扁". 同时为了方便观察, 我们强行加上了位移和放大的魔数. 至此, 你得到这样的效果图.
(⊙o⊙)…额, 好像有点吃藕, 不是预想中的样子呢. 为什么呢? 观察发现, 最重要的是正视图没有透视感觉, 前面和后面完全叠在一起, 侧面也完全看不到了....
那我们来加上透视效果吧!!!
绘制旋转的透视图
demo1.2 分解步骤
虽说上面这个demo能看到一个立方体的正视图, 但是里面竟然有两个魔数: 放大30倍, 偏移(150, 100). 咱们先把这两个丑陋的魔数去除掉, 看看会怎样.
这一小节里用到了很多的矩阵方法, 可以简单理解矩阵是用来做变换的(包括旋转/投影/位移/甚至形变), 并且多个矩阵变换可以通过矩阵乘法得到一个新的矩阵同时包含这多种变换, 这第二个特性就使得矩阵用起来非常方便, 它可以将复杂的变换"打包"到一起.
关于矩阵运算这里展开讲篇幅会有点多, 笔者先不过多展开, 如果有需要后续会补充更多细节.
在这里我们可以打开demo1.2, 这是一个非常重要的demo, 因为矩阵的运算比较抽象, 因此这个demo里面用分解步骤先注释掉了部分代码(下面代码块的24到27行), 之后我们再慢慢解开, 来看看每一步带来的效果.
class Canvas extends GObject {
constructor(canvas) {
//...
}
drawMesh(mesh, cameraIndex) {
const { indices, vertices } = mesh
const { w, h } = this
let { position, target, up } = Camera.new(cameraIndex || 0)
const rotation = Matrix.rotation(mesh.rotation)
const translation = Matrix.translation(mesh.position)
const view = Matrix.lookAtLH(position, target, up)
const view2 = Matrix.lookAtLH(position, target, Vector.new(1, 1, 0))
const projection = Matrix.perspectiveFovLH(8, w / h, 0.1, 1)
const world = rotation.multiply(translation)
const worldAndView = world.multiply(view)
const worldAndView2 = world.multiply(view2)
const transform = worldAndView.multiply(projection)
let t = undefined
let needProject = false
// needProject = true
// t = world
// t = worldAndView2
// t = transform
console.log('transform', t)
const color = Color.blue()
indices.forEach(ind => {
const [v1, v2, v3] = ind.map(i => {
if (needProject) {
return this.project(vertices[i], t).position
} else {
return vertices[i].position
}
})
this.drawline(v1, v2, color)
this.drawline(v2, v3, color)
this.drawline(v1, v3, color)
})
}
}
现在运行demo1.2你应该可以看到这个效果:
红色的箭头所指的就是我们绘制出来的mesh, 为什么这么小呢? 因为立方体的顶点位置都是-1到1, 立方体的边长为2. 而canvas的尺寸为300*200
, 因此立方体自然是小的看不见了.
尺寸自适应
为了解决这个问题, 我们解开一行注释: needProject = true
class Canvas extends GObject {
constructor(canvas) {
//...
}
project(coordVertex, transformMatrix = Matrix.identity()) {
}
drawMesh(mesh, cameraIndex) {
// 这里省略....
let t = undefined
let needProject = false
needProject = true
// t = world
// t = worldAndView2
// t = transform
// 这里也省略....
}
}
这样子线框的渲染之前就会先修正顶点的位置, 具体project方法如下, 从代码可以看出, 这里会将原来宽高范围从-1到1, 变为 0到w 和 0到h. 这样一来几何体就可以充满整个视图啦!
class Canvas extends GObject {
project(coordVertex, transformMatrix = Matrix.identity()) {
const { w, h } = this
const [w2, h2] = [w / 2, h / 2]
const point = transformMatrix.transform(coordVertex.position)
const x = point.x * w2 + w2
const y = - point.y * h2 + h2
const z = point.z
const v = Vector.new(x, y, z)
return Vertex.new(v, this.color)
}
drawMesh(mesh, cameraIndex) {
// 省略
let t = undefined
let needProject = false
needProject = true
// t = world
// t = worldAndView2
// t = transform
indices.forEach(ind => {
const [v1, v2, v3] = ind.map(i => {
if (needProject) {
return this.project(vertices[i], t).position
} else {
return vertices[i].position
}
})
// 省略
})
}
}
因此你可以得到以下效果图
线框旋转
接下来我们让这个图动起来, 我们定时变更mesh的rotation属性, 当然demo1.2里面都写好啦!
const main = () => {
const c = document.querySelector('#canvas')
const canvas = Canvas.new(c)
console.log(canvas)
canvas.drawline(Vector.new(50, 50), Vector.new(100, 100), Color.green())
const mesh = Mesh.cube()
canvas.drawMesh(mesh)
setInterval(() => {
canvas.clear()
mesh.rotate(new Vector(0.05, 0.1, 0))
console.log('r', mesh.rotation)
canvas.drawMesh(mesh, 3)
}, 200)
}
然后我们再解开一行代码注释: t = world
class Canvas extends GObject {
// 省略
drawMesh(mesh, cameraIndex) {
// 省略
let t = undefined
let needProject = false
needProject = true
t = world
// t = worldAndView2
// t = transform
// 省略
}
}
这样你就可以看到线框图旋转起来的效果
嗯, 还是有点丑. 大致是因为:
- 没有近大远小的透视效果
- 镜头太近了, 完全贴着几何体
既然这样, 我们就要开始关心镜头啦!
Camera类
如果是正视图的话, 几乎不需要有"镜头"这个概念, 因为镜头的位置和方向都确定了, 方向就是从正前方看过去, 位置距离呢, 由于正视图没有"近大远小"的透视效果, 距离也变得无关紧要.
但是这与我们人眼观察和熟知的三维世界有很大区别. 因此我们需要引入camera类来描述, 才有可能得到透视图.
Camera类包括三个变量, position target up, 类型都是Vector.
class Camera extends GObject {
constructor(index) {
super()
this.init(index)
}
init(index) {
const dict = {
0: () => {
this.position = Vector.new(0, 0, -10)
this.target = Vector.new(0, 0, 0)
this.up = Vector.new(0, 1, 0)
},
// 忽略
}
dict[index || 0]()
}
}
这三个变量, position指相机的位置, target指相机看向的目标, position和target两者的连线代表相机自身的z轴方向, up指相机的上方向.
这里相机的描述一个有几个*度呢?
笔者数了一下, 应该是6个.
相机的位置(相机参考系的原点)由三个*度决定.
相机直角坐标系的方向由三个*度决定, 简单理解当相机的位置被固定之后, 相机可以在那里左右摇摆上下俯仰, 因此target可以确定这两个*度, target定了之后相机还可以绕着自己的z轴旋转, up这个变量就把这个*度限制的死死的, 所以相机就被唯一确定了下来.
可以看到这里用9个数值确定了6个*度, 所以这不是最简洁的描述, 9个数值之间不是完全独立(正交)的, 但是由于非常的语义化, 便于调试, 我们继续沿用这个描述.
这里稍微有点抽象, 因此笔者贴多几个关于这些参数描述的链接出来供大家参考, 还不明白的话, 与我交流, 帮助我一起完善.
-
www.w3cschool.cn/webgl/4lwv1…
-
www.cnblogs.com/v-weiwang/p…
应用镜头矩阵
然后我们再解开一行代码注释: t = worldAndView2
class Canvas extends GObject {
// 省略
drawMesh(mesh, cameraIndex) {
// 省略
const view2 = Matrix.lookAtLH(position, target, Vector.new(1, 1, 0))
const worldAndView2 = world.multiply(view2)
// 省略
let t = undefined
let needProject = false
needProject = true
t = world
t = worldAndView2
// t = transform
// 省略
}
}
这时候你就可以得到从这个角度开始旋转的一个线框图啦. 相当于镜头"歪着头"照出来的画面, 这就是up这个参数的效果. 你可以在这里多调节下view2的三个相机参数, 来体会position和target的作用.
透视图
如果你真的去调节了position和target就会发现奇怪的事情, 无论position近或者远, 图像都不会缩小放大, 而是一直保持当前的大小.
这是因为视空间的概念, 我们现在绘制的是"正视图", 正视图的视空间是一个长方体, 因此近处和远处同大小的物品会完全重叠在一起, 没有"近大远小"的效果, 看起来空间被"压缩"在了一起. 而正常人眼的视空间不是长方体, 而是一个"锥体", 如下图所示.
为了满足这个需求, 我们解开一行代码的注释: t = transform
class Canvas extends GObject {
// 省略
drawMesh(mesh, cameraIndex) {
// 省略
const view2 = Matrix.lookAtLH(position, target, Vector.new(1, 1, 0))
const worldAndView2 = world.multiply(view2)
// 省略
let t = undefined
let needProject = false
needProject = true
t = world
t = worldAndView2
t = transform
// 省略
}
}
便可以得到以下效果:
简单来讲, 有以下几个步骤计算:
- 物品自身矩阵(处理物品自身偏移和旋转)
- 相机矩阵(用来将世界坐标系变换到相机坐标系)
- 透视调节矩阵(调整近大远小/宽高比例, 让成像接近人眼视觉)
- 画布归一(让成像充满canvas画布).
通过以上几个步骤的变换可以将mesh原先基于物体自身参考系的描述, 转换为基于相机视角参考系的描述, 也就是说变换完之后画出来的mesh就是人眼在相机位置和方向所看到的物品啦!
如果你随着我们的教程一步一步解开demo1.2的注释, 此时你可以得到一个旋转的立方体线框, 也就是直接运行demo1.3的效果.
小结
在本文中, 我们从零开始编写每一行代码, 直到可以渲染旋转几何体的透视图.
在这个过程中, 我们接触到了canvas的2Dcontext的绘制线条的API, 并基于此封装了Canvas类其中最重要的方法drawMesh, 我们一开始实现了简单的版本(正视图), 来渲染Mesh, 为了描述Mesh(几何体)我们引入了Vector/Color/Vertice/Mesh等类.
后面为了绘制透视图我们升级了drawMesh方法, 并且引入了Camera类和大量的Matrix运算, 最终我们得到了旋转几何体的透视图!!!
本文是否对你有帮助呢? 无论你是早就知道, 还是一看就透, 亦或是云里雾里还是先马后看, 欢迎与我讨论交流, 欢迎点赞收藏关注, 感谢各位父老乡亲.
下一期我们主要讲渲染片元, 并且处理颜色和位置的插值, 还有遮挡关系的处理, 还会针对本节课的互动和评论补充相应的细节. 但愿不鸽, 下次一定.
推荐阅读
-
使用 webgl (three.js) 构建 3D 智能公园、3D 建筑、3D 消防模拟、3D 网页版、bim 管理系统 - 第 4 课(炫彩版 I)
-
使用 JS 从零开始构建 3D 渲染引擎 (I)
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明: