Threejs基本概念(六)加载器

Posted 2023-05-06

参考技术A Loader
FileLoader
FontLoader
ImageLoader
JSONLoader
Cache
缓存
MaterialLoader
ObjectLoader
TextureLoader

AnimationLoader
用于以JSON格式加载动画的类。
AudioLoader
加载
BufferGeometryLoader
用于加载BufferGeometry的装载器。这在内部使用FileLoader来加载文件。
MaterialLoader
用于以JSON格式加载素材的加载器
ObjectLoader
用于加载JSON资源的加载程序,此加载程序无法加载几何

TextureLoader
基类
CompressedTextureLoader
基于块的纹理加载器（dds，pvr，...）的抽象基类
CubeTextureLoader
立方体加载器
DataTextureLoader
抽象基类加载通用二进制纹理格式（rgbe，hdr，...）

MaterialLoader
用于以JSON格式加载素材的加载器
ObjectLoader
TextureLoader

BabylonLoader
.babylon
ColladaLoader
.dae
GLTF2Loader
.gltf
MTLLoader
.mtl资源的装载器 (材质)
OBJLoader
.obj资源的装载器 (3d对象)
OBJLoader2
.obj资源的装载器(3d对象)
WWOBJLoader2
用于在web worker中加载.obj资源的装载器。(3d对象)
PCDLoader
用于.pcd文件的加载程序。加载ascii和二进制。不支持压缩的二进制文件(3d对象)
PDBLoader
.pdb是geometryAtoms，geometryBonds和JSON结构。
SVGLoader
TGALoader
加载.tga文件 纹理的类。

THREEJS案例-坐标系之点线面

本篇作为ThreeJS案例系列的第一篇，我们先来整体了解下构成整个3D世界坐标系统，并在坐标系里面展示3D世界的点线面。先看下整体效果图。

本系列并没有一上来先让大家了解场景、相机和渲染器这些内容，是因为大多数学习者一个盲区不在于这些基本概念，而在于整个3D世界的概念，比如空间坐标系，坐标系里面元素的空间变换这些内容，所以我这里以3D世界的坐标系作为开篇。 场景、相机和渲染器这些内容作为下一篇讲解。

• 画线

画线扫盲连接：https://threejs.org/docs/index.html#manual/zh/introduction/Drawing-lines

function createLine(lineColor,points) { var material = new THREE.LineBasicMaterial({ color: lineColor });
 var geometry = new THREE.Geometry(); geometry.vertices=points;
 var line = new THREE.Line(geometry, material, THREE.LineSegments); scene.add(line); return line; }  //调用 createLine(0x00FF00, [new THREE.Vector3(0, 0, 0), new THREE.Vector3(500, 0, 0)]);

• 画面

  ThreeJS平面扫盲连接：
  https://threejs.org/docs/index.html#api/zh/geometries/PlaneGeometry

function createShape(){ var geometry = new THREE.PlaneGeometry( 500, 300, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xE1FFFF} ); var plane = new THREE.Mesh( geometry, material ); plane.position.set(250,150,0); scene.add( plane ); }

文字

ThreeJS文字扫盲连接：

https://threejs.org/docs/index.html#api/zh/geometries/TextGeometry

function createText(text,x,y,z,c){ var loader = new THREE.FontLoader();      //可以在 C:\Windows\Fonts 下面找到中文字体库，用下面的链接转换      //http://gero3.github.io/facetype.js/ loader.load( './css/fonts/helvetiker_regular.typeface.json', function ( font ) { var geometry = new THREE.TextGeometry( text, { font: font, size: 30, height: 10, curveSegments: 3, bevelEnabled: true, bevelThickness: 3, bevelSize: 3, bevelSegments: 5 } ); var material = new THREE.MeshBasicMaterial( {color: c} ); var xMesh = new THREE.Mesh( geometry, material ); xMesh.position.set(x,y,z); scene.add( xMesh ); } ); }

本篇作为开篇，我们不具体的了解整个3D世界，下一篇开始我们结合所学的数学知识一点一点的学习3D世界的坐标系以及几何体在3D世界中的变换。

在这里诚信结交3D爱好者共同进步，可以公众号留V，加群交流。