threejs加载外部模型

threejs加载外部模型

加载gltf文件

• 创建外部模型文件

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

// 实例化一个加载器
const loader = new GLTFLoader();

// 创建插入模型
const model = new THREE.Group();

loader.load(
  "./Kamado Nezuko/model.glb",// 路径
  // 添加模型
  function (gltf) {
    // console.log(gltf);
    model.add(gltf.scene);
  },
  // 加载模型进度
  function (xhr) {
    console.log(`已加载：${(xhr.loaded / xhr.total) * 100}%`);
  },
  // 回调函数
  function (error) {
    console.log("错误显示");
  }
);

export default model;

在创建前，需要有gltf模型文件

• GLTFLoader可以支持两周文件格式：gltf和glb
  • gltf是二进制和模型分离
  • glb是二进制和模型合并

threejs后缀名可以支持，blender、3dmax或者是SolidWorks等软件，SolidWorks2019可以直接将模型转成以上诉述两种格式

加载obj文件

合并写法

• 如果想显示颜色可以添加mtl，这么做需要引入响应包，看下面事例

import * as THREE from "three";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
// 加载颜色解释
import { MTLLoader } from "three/addons/loaders/MTLLoader.js";

// 实例化一个加载器
const loader = new OBJLoader();
const mtlLoader = new MTLLoader();

// 创建插入模型
const model = new THREE.Group();

// 颜色也提添加到文件中
mtlLoader.load("./Kamado Nezuko/model.mtl", function (loadedMesh) {
  // 如果有后缀名为 `mtl` 的可以这样添加
  // 如果不添加会出现没有颜色的模型
  loader.setMaterials(loadedMesh);
  // 加载模型
  loader.load("./Kamado Nezuko/model.obj", function (gltf) {
    console.log(gltf);
    model.add(gltf);
  });
});

export default model;

分开写法

import * as THREE from "three";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
// 加载颜色解释
import { MTLLoader } from "three/addons/loaders/MTLLoader.js";

// 实例化一个加载器
const loader = new OBJLoader();
const mtlLoader = new MTLLoader();

// 创建插入模型
const model = new THREE.Group();

// 颜色也提添加到文件中
mtlLoader.load("./Kamado Nezuko/model.mtl", function (loadedMesh) {
  // 如果有后缀名为 `mtl` 的可以这样添加
  // 如果不添加会出现没有颜色的模型
  loader.setMaterials(loadedMesh);
});

// 加载模型
loader.load("./Kamado Nezuko/model.obj", function (gltf) {
  console.log(gltf);
  model.add(gltf);
});

export default model;

需要注意的是，obj文件和gltf文件不同，Obj是需要手动引入颜色的，否则会出现颜色丢失问题，显示出来的是空白模型

使用setMaterials设置颜色

加载fbx文件

import * as THREE from "three";
import { FBXLoader } from "three/addons/loaders/FBXLoader.js";

// 实例化一个加载器
const loader = new FBXLoader();

// 创建插入模型
const model = new THREE.Group();

loader.load("./static/Set_05.fbx", function (gltf) {
  console.log(gltf);
  model.add(gltf);
});

export default model;

设置观察位置

• 在设置观察位置时，需要设定使用到三个函数

camera.position.set(3000, 3000, 3000);
/**
* 在设置lookAt值时，需要将下面  controls.target.set也设置成相同值
* 两个值设置相同时会出现中间显示
* 如果单独设置lookAt值不会有任何变化
* 并且要设置 controls.update(); 是页面更新
*/
camera.lookAt(3000, 300, 3000);

// 拖动页面
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(3000, 300, 3000);
controls.update();

在设定相机参数lookAt值只会还要设置，控件参数

controls.target.set(3000, 300, 3000);
controls.update();

update用于更新视图

设置远裁截面far参数

 // 设定相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    1,// 进裁截面大小，如果足够小需要低几个数量级 0.001等
    88888// 渲染距离
);

根据相机控件调试页面

• 根据相机控件调试页面显示位置

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 拖拽动画
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
controls.addEventListener("change", () => {
    console.log(camera.position); // 借助相机控件调试页面显示位置
    renderer.render(scene, camera);
});

• 之后将值赋值给camera.lookAt

• const controls = new OrbitControls(camera, renderer.domElement);
  controls.target.set(3000, 300, 3000);
  controls.update();