从选择上传文件缩略图预览到提交上传程序的全过程总结
前言
上传图片生成缩略图,这个需求很常见,网络上的文章也很多。但是大多数都是直接丢一堆代码出来,也不多解释,不说下注意点,不说明优缺点等,也缺乏场景的延伸。
我这里所写的,不仅是生成缩略图这个需求,还把验证上传文件、删除已选文件、提交上传文件的一个完整的实际流程来展开此文章。
因为网上很多就单纯地解决一个生成缩略图的方案,但是忽略实际场景的应用,很多时候还是存在一些不足,在这里做些小优化和做下几个方法的对比,也有一些注意点提及出来,帮助大家避坑。我看很多文章,都仅只说生成缩略图,却不告知如何配合发送数据。
好记性不如烂笔头,人老了很多会忘记,趁我人老头秃前记一下为好。
需求
首先要明确需求,根据需求才能确定方案:
点击上传工具,弹出上传文件对话框,可单选可多选文件,此次选择之后生成文件的罗略图(本文主要针对图片格式文件),之后每次的选择文件上传,都会在原本已选择的基础上新增。最后把每次选择的文件一并进行上传。
要注意的一点是,在此需求中,并不是每一次的选择文件,会覆盖上次选择的文件。而是会保留上次选择的结果,然后把每次选择的结果一并提交了。要进行删除已选的文件的话,就删除缩略图即代表删除了已选文件。
需求细节分点描述:
- 记录每次选择结果,最后一并提交
- 每次选择可多选
- 对选择的文件进行校验
- 根据所选的文件生成缩略图(随机 or 根据选择顺序)
- 点击缩略图进行预览(在文章不展开说,因为单纯是css样式即可控制,没多大难度)
- 删除缩略图代表删除已选文件
生成缩略图
要生成缩略图,无非就是展示“图”。“图”的展示有两种表现形式,一个是用img
标签来直接展示图片,一个是用background-image
样式来展示图片。所以这里的生成缩略图,可以往这两个方向走。
这里以用img
标签表示为例:
/**
* 生成预览容器
* @param {String} url - 文件的url
* @param {Function} cb - 图像加载完成时的执行函数
*/
function createPreviewWrap (url, cb) {
let imgWrap = document.createElement('div');
let image = new Image();
imgWrap.className = 'img-wrap';
image.src = url;
cb && (image.onload = cb);
// 这里我放在imgWrap里是为了更好地控制缩略图的样式
// 实际上用background-image的方式呈现图片,反而更好地控制图片的显示样式
imgWrap.appendChild(image);
// 生成删除缩略图icon,样式请自己补充
const deleteIcon = document.createElement('i');
deleteIcon.onclick = deleteFile; // deleteFile函数后面在各自方案中说明
imgWrap.appendChild(deleteIcon);
// img-container为用来放置缩略图的所在标签,如div
document.getElementById('img-container').appendChild(imgWrap);
}
但是要能展示出“图”,上面两个思路的首要条件都是要知道图片的“源”,即图片路径。因此要实现生成缩略图的问题,就转化为生成图片路径的问题了。
上传文件所用到的标签是
<input type="file" />
所以,要处理的是文件类型(Blob
类型的子类),针对文件类型生成URL
的方式有两种
- FileReader
- URL.createObjectURL
使用FileReader
使用FileReader
,生成的url是基于base64编码的url(Data Url),因此长度会比较大。
基本用法:
var fileReader = new FileReader(); // 新建一个FileReader
fileReader.readAsDataURL(blob); // 对blob以data url的形式进行读取
// 读取过程是异步的,读取成功后的this.result即为file的Data Url结果
fileReader.onload = function() {
console.log(this.result);
};
知道了基本用法后,要对上传文件生成url就好办了:
/**
* FileReader方式实现缩略图(按读取速度快慢生成)
* @param {FileList} files - 此次选择上传的文件列表
*/
function createThumbnailRandom (files) {
for (let i = 0; i < files.length; i++) {
let fileReader = new FileReader();
fileReader.readAsDataURL(files[i]);
fileReader.onload = function() {
createPreviewWrap(this.result);
};
}
}
由于选择上传文件时是可以多选的,所以上述方法中files
是个FileList
类型,类数组,需要对其遍历一个个生成url。可以留意到我的注释有这么一句“按读取速度快慢生成”,因为上面说了fileReader
的读取是异步的,所以上述方法并没有控制读取顺序。
如果你想按照顺序,可参考下述方法:
/**
* FileReader方式实现缩略图(按顺序生成)
* @param fileReader
* @param {FileList} files - 此次选择上传的文件列表
* @param {Number} index - files要处理的下标
*/
function createThumbnail (fileReader, files, index) {
let i = index || 0;
if (i >= files.length) {
return;
}
fileReader.readAsDataURL(files[i]);
fileReader.onload = function() {
createPreviewWrap(this.result);
createThumbnail(fileReader, files, ++i);
};
}
这里用递归的方式来实现只有每次读取完,再读取下一个文件,进而来控制顺序。
我们要知道,file类型的input
,当你在某次选择上传文件时,是多选的,此时FileList
的默认顺序是按照文件名升序排序的。
我们把上述的两个方法整合在一个方法里:
/**
* FileReader方式实现缩略图
* @param {FileList} files - 此次选择上传的文件列表
* @param {Number} type - 1:按顺序回显 2:按速度回显
*/
function fileReaderPreview (files, type) {
// IE9(含9)以下不支持FileReader
if (!FileReader) {
alert('您的浏览器不支持上传,请换用或升级浏览器!');
}
let type = type || 1;
if (type === 1) {
let fileReader = new FileReader();
// 按在文件选择器里的文件顺序回显缩略图
createThumbnail(fileReader, files);
} else if (type === 2) {
createThumbnailRandom(files)
}
}
使用createObjectURL
语法:
window.URL.createObjectURL(blob)
参数为Blob
类型,返回值为Objcet URL(Blob URL)
该方式简单明了,不多讲,直接看代码:
/**
* createObjectURL方式实现缩略图
* @param {FileList} files - 此次选择上传的文件列表
*/
function objectURLPreview (files) {
// IE9(含9)以下不支持createObjectURL
for (let i = 0; i < files.length; i++) {
const url = window.URL.createObjectURL(files[i]);
createPreviewWrap(url, function (){
// 释放url内存
// 如果是用background-image来呈现图片,那么也是要通过new Image对象来加载图片
// 监听onload事件后再把url赋值给background-image,之后再释放内存即可
URL.revokeObjectURL(url);
});
}
}
小结
既然有两个方式,我们选择哪个比较好呢,我们简单做个对比。
同:
- 只支持IE10(含10)以上的浏览器
异:
执行时间
- FileReader是异步执行的,读取文件时异步的
- createObjcetURL是同步执行的
内存情况
- FileReader产生的url是base64编码地址,所占内存一般比createObjcetURL要大。但是在它没用的时候就会自动释放内存(浏览器的内存回收机制)
- createObjcetURL创建出来的网络地址所占用内存需要等到页面刷新/关闭或者执行revokeObjcetURL方法时才被释放
还有一些不确定因素,就是我在查阅资料时,看到有些人反馈说用FileReader在某些安卓机上不能生成预览图,但是createObjectURL可以,且createObjectURL性能会好点。 具体这点我尚未验证,请大家辩证地看待。
验证(限制)上传文件
本文主要讲述图片类型的上传,然后生成缩略图。对于其他文件类型的上传,其实大同小异,只是缩略图方面可能要额外处理,如找个固定的图片代表一类文件等,视频上传生成截图,也是一个值得分享的知识,但是不在本文之内。
言归正传,我们可以在html里对上传文件进行一定的限制
<!-- 用label替代input.file作为视觉上的上传交互触发器,方便样式统一和美化 -->
<label>
请选择上传文件
<!-- accept属性仅仅是实现了文件选择器里展示的文件类型默认过滤出指定类型,但是不会真正阻止上传别的类型,需要结合js检验 -->
<input type="file" id="file" multiple accept="image/*">
</label>
关于accept的取值格式和形式可参考Unique file type specifiers
正如注释所说,要在js里做限制才是真正起到限制作用
/**
* 检验上传文件类型
* @param {FileList} files - 此次选择上传的文件列表
*/
function verifyType (files) {
for (let i = 0; i < files.length; i++) {
// type属性是根据文件后缀名来判断的,所以如果你修改了文件的后缀名,type值也会发生改变
// 因此不建议仅用type来作为唯一的判断条件
if (!/^image\//.test(files[i].type)) {
return false;
}
}
return true;
}
选择上传
有了上面的两个基础,我们来对上传选择这个操作来做个处理,以满足需求里的“多次选择一并提交”这个需求。
首先我们要知道,利用type为file的input
实现的上传,每次打开文件选择框进行文件选择后,都会覆盖掉先前选择的内容,如果不做任何处理,进行数据的提交,只会提交最后一次选择的文件。所以我们需要有一个变量,来记录每次选择的文件。
<label>
请选择上传文件
<input type="file" id="file" multiple accept="image/*">
</label>
// 用于记录上传的所有文件
var uploadFiles = [];
// 对上传选择做监听
document.getElementById('file').addEventListener('change', upload, false);
/**
* 选择上传文件后
*/
function upload (ev) {
let e = ev || event;
const files = e.target.files;
if (!files.length) {
return;
}
// 检验上传文件类型
if (!verifyType(files)) {
alert('请上传图片格式的文件');
return;
}
Array.prototype.push.apply(uploadFiles, files);
// 生成预览图,这里选择使用objectURL
objectURLPreview(files);
}
提交数据
一切都就绪了,最后当然就是把数据提交给后台了,缺少这步,一切都失去意义了。
说起提交数据,传统的方式,莫过于使用form表单进行提交了。
直接采用form表单
简易版
从简入难,虽然该方案不是本文章主要讲的内容,但是还是简单介绍下吧,毕竟你搜索网上资料,都有此方案的推介,但是并没有提出该方案的不足。我写出来,引以为戒。
顺带有些小知识点,可以留意一下。
<!-- 在使用包含文件上传控件的表单时,必须使用enctype="multipart/form-data" -->
<!-- 因为是上传文件,用get请求大小受限制,所以用post -->
<form action="http://example.com" method="POST" enctype="multipart/form-data">
<label>
上传文件
<!-- 表单元素一定要写name,不然提交不了数据给后台 -->
<input type="file" id="uploadFiles" name="uplpoadFiles" multiple accept="image/*" onchange="upload()">
</label>
<!-- button的type属性默认是submit,但是为了兼容ie(默认是button),显示地写出type为submit比较好,会自动提交表单 -->
<!--如果type是button,但是你绑定了onclick="submit()",就算你有一个函数名叫submit,但是还是当做表单提交的submit来处理,-->
<!--即发挥了type="submit"的按钮处理-->
<button type="submit">提交</button>
</form>
以上是一个最简单的利用表单用html
就能实现的提交功能。
但是要注意,一个input
只能记录最后一次选择的一批文件。例如你点击“上传文件”,弹出选择窗口,选择了一批后,点确定,此时窗口关闭了;然后你又点击“上传文件”,此时再重复上述过程,以此类推。那么这个id
为uploadFiles
的input
被提交上去的只会是上述过程中最后一次选择的那批文件。
为了配合此种行为,我们需要改造一下上面的upload
函数,只是删除了一行代码Array.prototype.push.apply(uploadFiles, this.files);
就好。
但是这样的效果并不是我们想要的,我们是想每次选择之后都会生成缩略图,然后提交的时候是要把每批选择的文件都提交上去。这时候我们需要对上述代码进行升级改造。
改造升级版
思路:既然一个input
只能代表一批文件,所以你想最终提交几批,就对应新建几个input
就好了。只要每选择一批文件之后,生成预览图后,已选择的input
就隐藏,新建一个新的input
,每次如此。
丑话说在前,在允许一个input
多选的情况下,由于文件上传input
的行为就是如果你选择错或者反悔了,那重新选择即可,后面一次覆盖前面一次选择,本身就没有配备删除已选文件功能。所以该方案的一个缺点就是没法删除已选文件。这很显然,该缺陷不能接受,那只能退而求其次,只要限制每个input
为单选文件,这样删除缩略图时就把对应的input
删掉就好了。
<form id="myForm" action="http://example.com" method="POST" enctype="multipart/form-data">
<label>
上传文件
<input type="file" id="upload1" name="uplpoadFiles[]" accept="image/*" onchange="upload()">
</label>
<button id="submitBtn" type="submit">提交</button>
</form>
以上是html
部分,我们在选择上传文件,触发的upload
方法里,添加对input
的隐藏和添加。
/**
* 选择上传文件后
*/
function upload (ev) {
let e = ev || event;
const files = e.target.files;
if (!files.length) {
return;
}
// 检验上传文件类型
if (!verifyType(files)) {
alert('请上传图片格式的文件');
return;
}
// 隐藏和生成新的input
e.target.parentNode.style.display = 'none';
const form = document.querySelector('#myForm');
const label = document.createElement('label');
label.innerText = '上传文件';
const input = document.createElement('input');
input.type = 'file';
input.name = 'uplpoadFiles[]';
input.accept = 'image/*';
input.onchange = upload;
label.appendChild(input);
form.insertBefore(label, document.querySelector('#submitBtn'));
// 生成预览图,这里函数有调整,下方有说明
objectURLPreview(files, e.target.parentNode);
}
删除已选文件和缩略图
接下来就是,如果删除缩略图,就得删除对应的input
。我们怎么找到这个对应的input
呢,我们对上述的createPreviewWrap
和objectURLPreview
做个简单调整,把input
所在的label
节点(即上面upload
方法中的e.target.parentNode
)和缩略图节点当做参数进行传递,然后进行删除。
/**
* createObjectURL方式实现缩略图
* @param {FileList} files - 此次选择上传的文件列表
* @param label- 要删除的包裹input的label
*/
function objectURLPreview (files, label) {
for (let i = 0; i < files.length; i++) {
const url = window.URL.createObjectURL(files[i]);
createPreviewWrap(url, label, function (){ // 主要改动这里
URL.revokeObjectURL(url);
});
}
}
/**
* 生成预览容器
* @param {String} url - 文件的url
* @param {String} label - input的对应的label
* @param {Function} cb - 图像加载完成时的执行函数
*/
function createPreviewWrap (url, label, cb) {
let imgWrap = document.createElement('div');
let image = new Image();
imgWrap.className = 'img-wrap';
image.src = url;
cb && (image.onload = cb);
imgWrap.appendChild(image);
const deleteIcon = document.createElement('span');
deleteIcon.onclick = () => {deleteFile(label, imgWrap);} // 主要改动为这里
imgWrap.appendChild(deleteIcon);
document.getElementById('img-container').appendChild(imgWrap);
}
对应的删除节点函数
/**
* 删除对应input的label和缩略图
* @param label - input的对应的label
* @param imgWrap - 要删除的缩略图
*/
function deleteFile (label, imgWrap) {
document.querySelector('#myForm').removeChild(label);
document.getElementById('img-container').removeChild(imgWrap);
}
小结
总结下该方案的缺点:
- 每次选择文件只能单选
- 频繁进行DOM操作,可能会引起重绘或重排
丢个demo
用XMLHttpRequest发请求提交
在这里的方案,我们能够在上文的基础上(除去form表单提交方案的内容),就能满足所有需求,且不用退而求其次。
按照传统的做法,要提交上传文件的内容,都是借助表单来实现的。那么如果不想直接用上述的html
形式的表单提交,我们还可以借助FormData
对象来表示有一份表单数据,因此可以不必写form
标签,然后利用XMLHttpRequest
发送请求提交表单数据。
html
部分可以改成这样:
<div id="img-container"></div>
<div>
<label>
请选择上传文件
<input type="file" id="file" multiple accept="image/*">
</label>
<button onclick="submitFormData()">提交</button>
</div>
提交按钮绑定了一个方法,就是用于提交上传数据的:
function submitFormData () {
if (uploadFiles.length === 0) {
alert('请选择文件');
return;
}
// FFormData ie10以下不支持
let formData = new FormData();
uploadFiles.forEach(item => {
formData.append('uplpoadFiles[]', item);
});
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com');
xhr.send(formData);
xhr.onload = function () {
if (this.status === 200 || this.status == 304) {
alert('上传成功');
} else {
alert('上传失败');
}
}
}
删除已选文件和缩略图
同样的,在该方案下的删除操作,需要对生成缩略图相关的两个函数做调整,这里仍然以objectURLPreview
为例子。
我们要找到要删除对应的在uploadFiles
数组中的元素,然后对其删除,这里我们利用数组下标确定找到。(主要调整在注释处)
function objectURLPreview (files) {
const index = uploadFiles.length - files.length; // 找出用于计算本批文件对应下标的基础值
for (let i = 0; i < files.length; i++) {
const url = window.URL.createObjectURL(files[i]);
// 基础值+此批对应的下标即为在整个uploadFiles数组中的下标
createPreviewWrap(url, index + i, function (){
URL.revokeObjectURL(url);
});
}
}
function createPreviewWrap (url, index, cb) {
let imgWrap = document.createElement('div');
let image = new Image();
imgWrap.className = 'img-wrap';
image.src = url;
cb && (image.onload = cb);
imgWrap.appendChild(image);
const deleteIcon = document.createElement('span');
deleteIcon.onclick = () => {deleteFile(index, imgWrap);}// 主要改动为这里
imgWrap.appendChild(deleteIcon);
document.getElementById('img-container').appendChild(imgWrap);
}
删除函数即为
function deleteFile (index, imgWrap) {
uploadFiles.splice(index, 1);
document.getElementById('img-container').removeChild(imgWrap);
}
最后,丢个demo,看看完整的一个例子
总结
整篇文章无论哪个方案,兼容性都是要在ie10含10以上才能正常运行。
未经允许,请勿私自转载
上一篇: 如何显示 pdf 预览缩略图
下一篇: 如何显示 png 缩略图
推荐阅读
-
从选择上传文件缩略图预览到提交上传程序的全过程总结
-
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模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明: