当前位置：首页 > wzjs >正文

北京常规网络营销电话网站关键词优化案例

wzjs 2025/8/26 7:14:05

北京常规网络营销电话,网站关键词优化案例,wordpress首页文章分类展示,广州大型网站设计公司模型类型 GLTF(.gltf,.glb)： 是由 Khronos Group 开发的一种新型 3D 文件格式，具有高效、紧凑、支持 PBR 材质等优点，是当前主流的 3D 模型格式。 FBX(.fbx)： 是由 Autodesk 开发的一种 3D 模型格式，支持几何体、材质…

模型类型

GLTF(.gltf,.glb)： 是由 Khronos Group 开发的一种新型 3D 文件格式，具有高效、紧凑、支持 PBR 材质等优点，是当前主流的 3D 模型格式。
FBX(.fbx)： 是由 Autodesk 开发的一种 3D 模型格式，支持几何体、材质、骨骼动画等丰富信息，但文件较大，加载速度较慢，常用于 3D 内容制作和动画。
OBJ(.obj)： 是由 Wavefront Technologies 开发的一种 3D 模型格式，文件较小，但缺少动画和材质信息。
Collada(.dae)： 是由 Khronos Group 开发的一种 3D 模型格式，支持几何体、材质、动画等多种信息，但文件较大，加载速度较慢。
STL(.stl)： 是由 3D Systems 开发的一种 3D 模型格式，主要用于 3D 打印，文件较小，但缺少动画和材质信息。
PLY(.ply)： 是一种用于存储 3D 扫描数据的文件格式，支持几何体和材质信息，但文件较大，加载速度较慢。
3DS(.3ds)： 是由 Autodesk 开发的一种 3D 模型格式，支持几何体、材质和简单动画。
VRML(.wrl)： 是一种早期的 3D 模型格式，支持几何体、材质和简单动画。
JSON(.json)： 是一种轻量级的数据交换格式，可以用于存储 3D 模型信息，支持几何体、材质、动画等信息，但需要自己解析和处理。

加载器

GLTFLoader

是 Three.js 提供的一个用于加载 GLTF 格式模型的加载器。

//导入GLTFLoader
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";//创建GLTFLoader实例
const gltfLoader = new GLTFLoader();//加载模型
gltfLoader.load("./models/scene.gltf",(gltf) => {scene.add(gltf.scene);},(xhr) => {console.log(xhr);let progress = (xhr.loaded / xhr.total) * 100;processDom.innerText = `加载进度：${progress.toFixed(2)}%`;},(err) => {console.log(err);}
);

gltfLoader.load()： 加载模型的方法。

第一个参数： 模型的路径。
第二个参数： 加载成功后的回调函数，参数为加载的模型对象。
第三个参数： 加载过程中的回调函数，参数为加载进度。
第四个参数： 加载失败的回调函数，参数为错误信息。

在这里插入图片描述

OBJLoader

是 Three.js 提供的一个用于加载 OBJ 格式模型的加载器。

//导入OBJLoader
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";//创建OBJLoader实例
const objLoader = new OBJLoader();//加载模型
objLoader.load("./models/scene.obj", (obj) => {scene.add(obj);//添加贴图obj.traverse((child) => {if (child.isMesh) {child.material.map = new THREE.TextureLoader().load("./models/nezha.png");}});
});

objLoader.load()： 加载模型的方法。

第一个参数： 模型的路径。
第二个参数： 加载成功后的回调函数，参数为加载的模型对象。
第三个参数： 加载过程中的回调函数，参数为加载进度。
第四个参数： 加载失败的回调函数，参数为错误信息。

obj.traverse()： 遍历模型对象的所有子对象。

在这里插入图片描述

FBXLoader

是 Three.js 提供的一个用于加载 FBX 格式模型的加载器。

//导入FBXLoader
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";

ColladaLoader

是 Three.js 提供的一个用于加载 Collada 格式模型的加载器。

//导入ColladaLoader
import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader.js";

STLLoader

是 Three.js 提供的一个用于加载 STL 格式模型的加载器。

//导入STLLoader
import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";

PLYLoader

是 Three.js 提供的一个用于加载 PLY 格式模型的加载器。

//导入PLYLoader
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";

VRMLLoader

是 Three.js 提供的一个用于加载 VRML 格式模型的加载器。

//导入VRMLLoader
import { VRMLLoader } from "three/examples/jsm/loaders/VRMLLoader.js";

TDSLoader

是 Three.js 提供的一个用于加载 3DS 格式模型的加载器。

//导入TDSLoader
import { TDSLoader } from "three/examples/jsm/loaders/TDSLoader.js";

JSONLoader

是 Three.js 提供的一个用于加载 JSON 格式模型的加载器。

//导入JSONLoader
import { JSONLoader } from "three/examples/jsm/loaders/JSONLoader.js";

注意： 以上加载器的使用方法基本相同，只是加载的模型格式不同。另外加载模型的时候可能需要添加光源，不然加载的模型是黑的。

模型对象

gltf 模型对象

在这里插入图片描述

scene： 模型场景，包含模型的所有子对象。
scenes： 模型场景数组，包含模型的所有场景。
animations： 模型动画，包含模型的所有动画。
asset： 模型资源，包含模型的元数据。
parser： 模型解析器，用于解析模型文件。
camera： 模型相机，用于渲染模型。
userData： 模型用户数据，用于存储用户自定义数据。

obj 模型对象

在这里插入图片描述

children： 模型子对象数组，包含模型的所有子对象。

位置操作

不管从 gltf 对象 scene 中还是 obj 对象中可以看到很多熟悉的属性，比如 position、scale 等，这些属性都是 Three.js 中常用的属性。加载模型成功后就可以操作模型的这些属性了。

以 Obj 模型为例，加载成功后可以看到模型对象中有一个 children 属性，这个属性是一个数组，里面包含了模型的所有子对象。每个子对象都是一个 Mesh 对象，Mesh 对象是 Three.js 中用于渲染几何体的对象，它包含了几何体和材质两个属性。我们可以通过操作这些属性来改变模型的显示效果。

//获取模型对象
objLoader.load("./models/scene.obj", (obj) => {//缩放obj.scale.set(0.5, 0.5, 0.5);//位移obj.position.set(0.5, 0, 0);// 旋转180度obj.rotation.y = Math.PI;scene.add(obj);
});

在这里插入图片描述

材质操作

//获取模型对象
objLoader.load("./models/scene.obj", (obj) => {// 设置材质颜色obj.children[0].material.color.set(0xff0000); // 设置材质纹理obj.children[0].material.map = new THREE.TextureLoader().load("./models/nezha.png");scene.add(obj);
});

在这里插入图片描述

动画操作

let mixer; // 动画混合器
//获取模型对象
gltfLoader.load("./models/Soldier.glb", (gltf) => {//获取动画const animations = gltf.animations;//创建动画混合器mixer = new THREE.AnimationMixer(gltf.scene);//创建动画动作const action = mixer.clipAction(animations[1]);//播放动画action.play();scene.add(gltf.scene);
});let clock = new THREE.Clock();
//更新动画
function animate() {requestAnimationFrame(animate);if (mixer) {mixer.update(clock.getDelta());}renderer.render(scene, camera);
}