使用React创建three.js环境:探索最受欢迎的3D库
基于Create React App 环境体验three.js库。
threejs 是一个 3D JavaScript库,用于在网页上呈现3D内容。它是一个开源项目,旨在创建一个易于使用、轻量级、跨浏览器、通用的3D库。
当前版本包括WebGL(Web图形库)渲染器和JavaScript API,可无需插件用在任何兼容渲染交互式2D和3D图形的Web浏览器中。现代浏览器广泛支持WebGL。
WebGL是一个绘制点、线和三角形的底册API。要使用WebGL做任何有用的事情,它需要相当多的代码,这时产生了threejs。它处理高级功能,如场景、灯光、阴影、材质、纹理、3D数学等。
threejs还支持其他渲染器,如WebGPU、SVG和CSS3D。官方示例显示了高级用法。
作为一篇入门threejs的文章,我们快速了解它是什么以及如何使用它。
官方立方体旋转动画
上面的图像由官方动画立方体代码渲染,该代码列在threejs的README文件中。下面是代码:
import * as THREE from 'three';
// init
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 2;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
document.body.appendChild(renderer.domElement);
// animation
function animation(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
}
接下来分析它是如何工作的:
在上面代码第一行, THREE 被导入;
import * as THREE from 'three';
在代码第4行, PerspectiveCamera
【透视摄像机】被创建
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
PerspectiveCamera
的构造函数需要4个参数,具体如下:
export class PerspectiveCamera extends Camera {
/**
* @param [fov=50] Camera frustum vertical field of view. Default value is 50.
* @param [aspect=1] Camera frustum aspect ratio. Default value is 1.
* @param [near=0.1] Camera frustum near plane. Default value is 0.1.
* @param [far=2000] Camera frustum far plane. Default value is 2000.
*/
constructor(fov?: number, aspect?: number, near?: number, far?: number);
}
在本例中,fov(视角)在垂直维度上设置为70度,纵横比设置为DOM窗口的纵横比(window.innerWidth/window.inerHeight)。
near和far表示将要渲染的摄影机前面的空间。
任何在 near 之前或 far 之后的东西都会被摄像机剪掉。相机前面的范围设置为[0.01,10]。平截头体是一种3D形状,它像一个顶端被切掉的金字塔。
在官方代码第5行, carmera.position 是 三维向量。
camera.position.z = 2;
相机位于[0,0,2]。+Y 和 -Y 轴位于绿色正方形的中间。
表示摄像机的可视范围。
以下是摄像机的类型:阵列相机、相机、立方体相机、正交相机、透视相机和立体相机。
在官方代码行7中,实例化了一个场景
const scene = new THREE.Scene();
场景 scene 是存放对象、灯光和相机的地方。以下都是可用的场景类型:Fog, FogExp2, and Scene.
在第9行代码中,一个 BoxGeometry 被实例化。
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
几何体 Geometry 定义对象的形状。BoxGeometry定义长方体尺寸-宽度、高度和深度。在该示例中,宽度、高度和深度设置为0.2。
export class BoxGeometry extends BufferGeometry {
/**
* @param [width=1] — Width of the sides on the X axis.
* @param [height=1] — Height of the sides on the Y axis.
* @param [depth=1] — Depth of the sides on the Z axis.
* @param [widthSegments=1] — Number of segmented faces along the width of the sides.
* @param [heightSegments=1] — Number of segmented faces along the height of the sides.
* @param [depthSegments=1] — Number of segmented faces along the depth of the sides.
*/
constructor(
width?: number,
height?: number,
depth?: number,
widthSegments?: number,
heightSegments?: number,
depthSegments?: number,
);
}
立方体的构造函数还可以定义沿每条边的分段面。默认情况下,每条边都有一个分段面。每边的细节越多,需要的分割面就越多。以下是4 x 5 x 10的分段面示意图:
这些是可用的几何类型:BoxGeometry、CapsuleGeometry,CircleGeomety、ConeGeometry和CylinderGeometry,和 WireframeGeometry。
在代码第10行,创建一个 MeshNormalMaterial 对象
const material = new THREE.MeshNormalMaterial();
材质【MaterialParameters】对象的参数-有光泽、平坦、颜色、纹理等-并采用以下参数:
export interface MaterialParameters {
alphaTest?: number | undefined;
alphaToCoverage?: boolean | undefined;
blendDst?: BlendingDstFactor | undefined;
blendDstAlpha?: number | undefined;
blendEquation?: BlendingEquation | undefined;
blendEquationAlpha?: number | undefined;
blending?: Blending | undefined;
blendSrc?: BlendingSrcFactor | BlendingDstFactor | undefined;
blendSrcAlpha?: number | undefined;
clipIntersection?: boolean | undefined;
clippingPlanes?: Plane[] | undefined;
clipShadows?: boolean | undefined;
colorWrite?: boolean | undefined;
defines?: any;
depthFunc?: DepthModes | undefined;
depthTest?: boolean | undefined;
depthWrite?: boolean | undefined;
name?: string | undefined;
opacity?: number | undefined;
polygonOffset?: boolean | undefined;
polygonOffsetFactor?: number | undefined;
polygonOffsetUnits?: number | undefined;
precision?: 'highp' | 'mediump' | 'lowp' | null | undefined;
premultipliedAlpha?: boolean | undefined;
dithering?: boolean | undefined;
side?: Side | undefined;
shadowSide?: Side | undefined;
toneMapped?: boolean | undefined;
transparent?: boolean | undefined;
vertexColors?: boolean | undefined;
visible?: boolean | undefined;
format?: PixelFormat | undefined;
stencilWrite?: boolean | undefined;
stencilFunc?: StencilFunc | undefined;
stencilRef?: number | undefined;
stencilWriteMask?: number | undefined;
stencilFuncMask?: number | undefined;
stencilFail?: StencilOp | undefined;
stencilZFail?: StencilOp | undefined;
stencilZPass?: StencilOp | undefined;
userData?: any;
}
网格材质:MeshNormalMaterialParameters 有如下参数
export interface MeshNormalMaterialParameters extends MaterialParameters {
bumpMap?: Texture | null | undefined;
bumpScale?: number | undefined;
normalMap?: Texture | null | undefined;
normalMapType?: NormalMapTypes | undefined;
normalScale?: Vector2 | undefined;
displacementMap?: Texture | null | undefined;
displacementScale?: number | undefined;
displacementBias?: number | undefined;
wireframe?: boolean | undefined;
wireframeLinewidth?: number | undefined;
flatShading?: boolean | undefined;
}
以下是可以使用的材质类型:ShadowMaterial, SpriteMaterial, RawShaderMaterial, ShaderMaterial, PointsMaterial, MeshPhysicalMaterial, MeshStandardMaterial, MeshPhongMaterial, MeshToonMaterial, MeshNormalMaterial, MeshLambertMaterial, MeshDepthMaterial, MeshDistanceMaterial, MeshBasicMaterial, MeshMatcapMaterial, LineDashedMaterial, LineBasicMaterial, and Material.
在代码第12行,创建了几何体形状和 网格材质,然后添加到 场景中:
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
网格是构成三维对象图形的骨架,它由几何体(材质)、材质(曲面)和场景 组成。
在官方代码行15–18中,WebGL呈现被实例化。它被设置为DOM窗口大小,配置了一个动画循环,其domElement被附加到DOM主体。
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
document.body.appendChild(renderer.domElement);
在官方代码行21–26中,动画 animation 函数被创建。
function animation(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
}
参数 time 是自渲染器以来的时间,调用setAnimationLoop(动画)。时间单位为毫秒。由于在每个轴上旋转一次需要2π,因此上述动画函数绕x轴旋转约12.56秒,绕y轴旋转约6.28秒。
setAnimationLoop(animation)是启动动画的请求。如果动画为空,它将停止任何正在进行的动画。setAnimationLoop是requestAnimationFrame的替换。
renderer.render(scene, camera) 渲染并更新数据;
使用react 脚手架搭建threejs环境
我们使用Create React App来了解三种情况。使用以下命令创建React项目:
$ npx create-react-app react-three
$ cd react-three
安装 three.js 依赖。
npm i three
// 或者
yarn add three
之后可以在package.json中看到
"dependencies": {
"three": "^0.145.0"
}
这样就把 three 添加到项目中。
使用下面代码,替换 src/App.js 文件
import { useEffect, useRef } from 'react';
import * as THREE from 'three';
function App() {
const divRef = useRef();
useEffect(() => {
// init
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 2;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
divRef.current.appendChild(renderer.domElement);
// animation
function animation(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
}
}, []);
return <div ref={divRef} />;
}
export default App;
以上代码几乎和官方代码相同,除了以下几点:
- 初始化代码封装在useEffect(第7–32行)中,并初始化一次(第32行的useEfect依赖列表设置为空数组[])。
- 渲染器有所不同,原来 renderer.domElement 是添加到 document.body 中,现在它被添加到divRef.current中。
执行命令 npm start
可以看到立方体旋转动画。
以上代码存在些可改进的方法:
- 不应该依赖DOM窗口的大小,因为我们可以实现 three.js 在一个组件内。
- 该应用不能随着浏览器缩放而缩放。
- 与大多数JavaScript库不同,three.js不会自动清理资源。它依靠浏览器在用户离开页面时进行清理。最佳实践是在对象不再使用时及时释放内存。
改良后的 src/app.js 文件
import { useEffect, useRef } from 'react';
import * as THREE from 'three';
function App() {
const divRef = useRef();
useEffect(() => {
// init
let width = divRef.current.clientWidth;
let height = divRef.current.clientHeight;
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 2;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setAnimationLoop(animation);
const divCurrent = divRef.current;
divCurrent.appendChild(renderer.domElement);
window.addEventListener('resize', handleResize);
// handle window resize
function handleResize() {
width = divRef.current.clientWidth;
height = divRef.current.clientHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}
// animation
function animation(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
}
return () => {
renderer.setAnimationLoop(null);
window.removeEventListener('resize', handleResize);
divCurrent.removeChild(renderer.domElement);
scene.remove(mesh);
geometry.dispose();
material.dispose();
};
}, []);
return <div ref={divRef} style={{ height: '100vh' }} />;
}
export default App;
在第59行,div元素的高度设置为视口高度的100%。
在第9-10行,我们将div元素的宽度和高度保存为变量,以便在第11行和第23行重用。
在第26行,divRef。divRef.current
保存为divCurrent。这允许在第27行添加到divCurrent的子元素在第52行被删除。
在第29行,事件监听器使用回调函数handleResize侦听resize事件。
在第32–39行,handleResize函数检索新的宽度和高度,并使用它们更新渲染和相机。在第38行,渲染器。渲染(场景、摄影机)重新渲染更新的数据。
在第49–56行,返回cleanup函数以停止动画、删除窗口侦听器并释放三个资源。
使用@react-three/fiber包创建应用
react-tree-fiber是一个用于threejs的react渲染器。它允许我们用JSX写threejs更具声明性。threejs的所有工作都将在react-tree-fiber中完成。
把jsx元素直接转换为threejs对象,没有其余额外的消耗,例如将 <mesh/>转换为新的THREE.mesh()
安装包 @react-three/fiber
npm i @react-three/fiber
添加到package.json中
"dependencies": {
"@react-three/fiber": "^8.0.19",
"three": "^0.145.0"
}
使用react-three/fiber后,src/App.js更简洁,看起来更像React。
mport { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
function Box() {
const meshRef = useRef();
useFrame((state, delta) => {
if (meshRef.current) {
meshRef.current.rotation.x += delta / 2;
meshRef.current.rotation.y += delta;
}
});
return (
<mesh ref={meshRef}>
<boxGeometry args={[0.2, 0.2, 0.2]} />
<meshNormalMaterial />
</mesh>
);
}
function App() {
return (
<Canvas
camera={{ fov: 70, near: 0.01, far: 100, position: [0, 0, 2] }}
style={{ height: '100vh', backgroundColor: 'black' }}
>
<Box />
</Canvas>
);
}
export default App;
在第4–18行,定义了Box组件。它为网格元素定义meshRef,该元素由钩子useFrame在第6–11行使用。
function useFrame(
callback: (state: RootState, delta: number, frame?: THREE.XRFrame) => void,
renderPriority?: number
): null;
对每帧调用useFrame。参数state包括所有三个状态信息,包括gl(WebGL)、相机、时钟、场景等。
参数delta是以秒为单位的时钟delta。它用于在第8–9行设置动画。
renderPriority是自动切换渲染开关的高级参数。
在 react-three-fiber 中,mesh 对象总是属于threejs的对象,成为一个全局组件。我们创建 mesh组件元素【在13-16行】,包括 boxGeometry 和 meshNormalMaterial。
这盒子元素被放置在标签中。
Canvas是three.js的基础。它渲染three组件。Canvas的道具包括gl(WebGL)、相机、光线投射器等。
export declare type RenderProps<TCanvas extends Element> = {
gl?: GLProps;
size?: Size;
shadows?: boolean | Partial<THREE.WebGLShadowMap>;
legacy?: boolean;
linear?: boolean;
flat?: boolean;
orthographic?: boolean;
frameloop?: 'always' | 'demand' | 'never';
performance?: Partial<Omit<Performance, 'regress'>>;
dpr?: Dpr;
raycaster?: Partial<THREE.Raycaster>;
camera?: (Camera | Partial<ReactThreeFiber.Object3DNode<THREE.Camera,
typeof THREE.Camera> & ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera,
typeof THREE.PerspectiveCamera> & ReactThreeFiber.Object3DNode<THREE.OrthographicCamera,
typeof THREE.OrthographicCamera>>) & {
manual?: boolean;
};
events?: (store: UseBoundStore<RootState>) => EventManager<HTMLElement>;
onCreated?: (state: RootState) => void;
onPointerMissed?: (event: MouseEvent) => void;
};
在第23行,摄像机的道具被定义为{fov:70,near:0.01,far:100,position:[0,0,2]}。
在第24行,样式定义为{height:“100vh”,backgroundColor:“black”}。对于宽度,画布会自动拉伸到100%。
这个简洁的代码和其他代码一样有效。
你是否注意到,我们并没有调用 object.dispose() !
React知道对象的生命周期,React-tree-fiber将尝试通过调用对象来释放资源。dispose(),如果存在,则对所有未装入的对象执行。通过将 dispose={ null }放置在网格、材质等上,甚至放置在父容器(如组)上,可以关闭dispose尝试。
本文是翻译文章:[原文链接](https://betterprogramming.pub/working-with-three-js-the-popular-3d-javascript-library-bd2e9b03c95a)
推荐阅读
-
使用React创建three.js环境:探索最受欢迎的3D库
-
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模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明: