three.js模型导入

---

效果预览

下载threejs

npm i three

准备工作

引入相应的模块

import * as THREE from "three";
//.obj文件的加载器
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
//.mtl文件的加载器 mtl文件是材质文件
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
//Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

创建一个场景

为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

渲染场景

现在，如果将之前写好的代码复制到HTML文件中，你不会在页面中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

添加light

// 太阳光
let Sun = new THREE.DirectionalLight(0xffffff, 0.5);
Sun.position.set(20, 20, 20);
Sun.castShadow = true;
//给场景增加环境光
let Ambient = new THREE.AmbientLight(0x404040, 2);
scene.add(Ambient);
scene.add(Sun);

导入模型

去网上随便下载个模型，不一定需要.obj类型

// 导入模型
  const objLoader = new OBJLoader();
  const mtlLoader = new MTLLoader();
  mtlLoader.load('City/City_Park.mtl', function (materials) {
    //obj的模型会和MaterialCreator包含的材质对应起来
    objLoader.setMaterials(materials);
    objLoader.load(
      // 资源的URL
      "City/City_Park.obj",
      // onLoad回调
      function (obj) {
        obj.scale.set(0.05, 0.05, 0.05)
        scene.add(obj);
      }
    );
  })

附上代码

<template>
  <div id="container"></div>
</template>
 
<script setup>
import { onMounted } from "vue";
import * as THREE from "three";
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';


const init = () => {
  // 渲染器
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearAlpha(0);
  renderer.shadowMap.enabled = true;
  const container = document.getElementById("container");
  container.appendChild(renderer.domElement);

  // 场景
  const scene = new THREE.Scene();
  // 天空盒
  scene.background = new THREE.CubeTextureLoader()
    .setPath('./img/')
    .load(["sky-R.jpg", "sky-R.jpg", "sky-R.jpg", "sky-R.jpg", "sky-L.jpg", "sky-L.jpg"]);
  // 相机
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(500, 500, 0);

  // 太阳光
  let Sun = new THREE.DirectionalLight(0xffffff, 0.5);
  Sun.position.set(20, 20, 20);
  Sun.castShadow = true;
  //给场景增加环境光
  let Ambient = new THREE.AmbientLight(0x404040, 2);
  scene.add(Ambient);
  scene.add(Sun);

  // 导入模型
  const objLoader = new OBJLoader();
  const mtlLoader = new MTLLoader();
  mtlLoader.load('City/City_Park.mtl', function (materials) {
    //obj的模型会和MaterialCreator包含的材质对应起来
    objLoader.setMaterials(materials);
    objLoader.load(
      // 资源的URL
      "City/City_Park.obj",
      // onLoad回调
      function (obj) {
        obj.scale.set(0.05, 0.05, 0.05)
        scene.add(obj);
      }
    );
  })

  // 控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.update();
  renderer.render(scene, camera);

  const animate = () => {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
  }
  animate()
}

onMounted(() => {
  init()
})

</script>