threejs基本知识5 (模型加载)
OBJLoader/ 模型加载器,MTLLoader / 材质加载器
import * as THREE from "three";
import Stats from "three/examples/jsm/libs/stats.module";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
let w = window.innerWidth; // 浏览器宽度
let h = window.innerHeight; // 浏览器高度
const scene = new THREE.Scene(); // 创建场景
// 坐标轴辅助器
const axes = new THREE.AxesHelper(10, 10, 10);
// 网格辅助器
const grid = new THREE.GridHelper(10, 10, "red", "red");
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000); // 创建相机 (视角 宽高比 最近距离 最远距离)
camera.position.set(0, 6, 3); // 相机位置
camera.lookAt(0, 0, 0); // 相机视角
// 基础环境光(环境光创建后内存中的色值是0-1 => (1,1,1) 白色)
const light = new THREE.AmbientLight("#ffffff", 1); // 创建灯光
// 创建obj模型加载器
const objLoader = new OBJLoader();
// 创建mtl模型材质加载器
const mtlLoader = new MTLLoader();
// 模型和材质引入都是异步过程,可以封装成promise返回 通过then拿到模型group组(先加载材质再加载模型)
const getFrame = new Promise((resolve, reject) => {
mtlLoader
.loadAsync("/frame.mtl")
.then((materialCreator) => {
objLoader
.setMaterials(materialCreator)
.loadAsync("/frame.obj")
.then((objGroup) => {
resolve(objGroup);
})
.catch((err) => {
reject(err);
});
})
.catch((err) => {
reject(err);
});
});
getFrame.then((objGroup) => {
objGroup.scale.set(0.1, 0.1, 0.1);
scene.add(objGroup);
});
scene.add(light);
scene.add(axes);
scene.add(grid);
const renderer = new THREE.WebGLRenderer({ antialias: true }); // 创建渲染器 antialias 抗锯齿
renderer.setSize(w, h); // 渲染器尺寸
renderer.shadowMap.enabled = true; // 场景开启阴影渲染
renderer.render(scene, camera); // 场景和相机放在渲染器中
const stats = new Stats(); // 刷新帧辅助器
document.getElementById("box-container").append(renderer.domElement);
document.getElementById("box-container").append(stats.domElement);
const orbitControls = new OrbitControls(camera, renderer.domElement); // 控制辅助器(鼠标滚动缩放、右击平移、左击旋转)
const clock = new THREE.Clock();
function render() {
const time = clock.getElapsedTime(); // 在不同频率下稳定增长的值
cube.rotation.z = time;
renderer.render(scene, camera); // 场景和相机放在渲染器中
stats.update();
orbitControls.update();
requestAnimationFrame(render);
}
render();
window.addEventListener("resize", () => {
w = window.innerWidth;
h = window.innerHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
});