threejs基本知识5 （模型加载）

最新推荐文章于 2024-05-15 22:22:27 发布

嚣张丶小麦兜

最新推荐文章于 2024-05-15 22:22:27 发布

阅读量588

点赞数

分类专栏： threejs 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/sqbcsdn/article/details/128154494

版权

threejs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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);
      });