three.js加载模型 简单使用

依赖

npm i three

引包

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js'
import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader.js'
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader.js'

使用

this.krq = new THREE.Object3D();
this.textureLoader = new THREE.TextureLoader();
// 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。
this.scene = new THREE.Scene();
var urls = [
  require('@/assets/images/3d/negz.jpg'),
  require('@/assets/images/3d/negz.jpg'),
  require('@/assets/images/3d/negz.jpg'),
  require('@/assets/images/3d/negz.jpg'),
  require('@/assets/images/3d/negz.jpg'),
  require('@/assets/images/3d/negz.jpg'),
];

var cubeLoader = new THREE.CubeTextureLoader();
this.scene.background = cubeLoader.load(urls);

// 创建一个摄像机，它定义了我们正在看的地方
this.camera = new THREE.PerspectiveCamera(40,
  document.documentElement.clientWidth / document.documentElement.clientHeight, 0.5, 10000);
this.camera.position.set(180, 80, 90);//设置相机位置
this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
// 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
this.renderer = new THREE.WebGLRenderer({
  antialias: true,
  logarithmicDepthBuffer: true,
});
this.renderer.setClearColor(new THREE.Color(0x121A39));
this.renderer.setSize(this.canvasWidth, this.canvasHeight);
var alight = new THREE.AmbientLight("#ffffff", 1);
alight.name = "aLight";
this.scene.add(alight);
// TODO 开始添加模型到场景中 后续有方法
// 使用函数进行渲染
var _this = this;
_this.camera.updateProjectionMatrix();
if (_this.renderClock != null) clearInterval(_this.renderClock)
_this.renderClock = setInterval(() => {
  _this.renderer.render(_this.scene, _this.camera);
}, 100)
//控制器
orbit = new OrbitControls(_this.camera, _this.renderer.domElement);
orbit.addEventListener("change", (e) => {
  _this.renderer.render(_this.scene, _this.camera);
});
// 点击事件
this.renderer.domElement.addEventListener('click', function (event) {
  // console.log(event)
  const mouse = new THREE.Vector2();
  var container = document.querySelector('#dom')
  let getBoundingClientRect = container.getBoundingClientRect()
  mouse.x = ((event.clientX - getBoundingClientRect.left) / container.offsetWidth) * 2 - 1;
  mouse.y = -((event.clientY - getBoundingClientRect.top) / container.offsetHeight) * 2 + 1;

  var raycaster = new THREE.Raycaster()
  //提高点击精度？？？
  raycaster.params.Line.threshold = 0.01
  raycaster.setFromCamera(mouse, _this.camera);

  const intersects = raycaster.intersectObjects(_this.scene.children);
  // console.log(intersects)
  if (intersects && intersects.length > 0 && intersects[0].object.userData.form) {
    //距离最近的模型
    _this.clickModel = intersects[0].object
    // console.log(_this.clickModel, "clickModel")
    var firstForm = intersects[0].object.userData.form
  }
});

加载图片

let _this = this;
var url = require('@/assets/images/other/xxx.png')
new THREE.TextureLoader().load(url,
  (texture) => {
    let height = 10;
    let width = 10;
    const mat = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide, transparent: true});
    const geom = new THREE.PlaneGeometry(width, height);
    const mesh = new THREE.Mesh(geom, mat);
    var tX = -140
    mesh.position.set(-97, 20, tX);
    mesh.rotation.y = Math.PI / 2
    _this.scene.add(mesh);
  }
);

加载obj模型 _OBJLoader

var objLoader = new OBJLoader();
let _this = this;
//这个url似乎只能放在assets文件下 后续再试验放其他地方
objLoader.load('/static/assets/models/floor/floor_obj.obj', obj => {
  // console.log(obj)
  // obj.updateMatrixWorld()
  var mesh = obj.children[0];
  mesh.material = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('/static/assets/models/floor/2.png'),
  });
  //mesh.scale.set(200, 0.1, 200);
  // mesh.scale.set(0.7, 0.3, 1);
  mesh.position.set(0, -1, 0);
  _this.scene.add(mesh);
});

加载fbx文件 _FBXLoader

var _this = this;
var fbxLoader = new FBXLoader()
fbxLoader.load('/static/assets/models/electricbox.fbx', res => {
  var mesh = res.children[0]
  mesh.material = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('/static/assets/models/electricbox_pic.png'),
  });
  mesh.position.set(0, 0, 0);
  //mesh.scale.set(1, 1, 1)
  //mesh.rotation.y = -Math.PI / 2
  _this.scene.add(mesh);
})

同时加载mtl跟obj

var _this = this;
var objLoader2 = new OBJLoader();
var mtlLoader = new MTLLoader();
mtlLoader.load('/static/assets/models/car/rio.mtl',mtl=>{
  objLoader2.setMaterials(mtl)
  objLoader2.load('/static/assets/models/car/rio.obj', obj => {
    var mesh = obj;
    mesh.scale.set(1, 1, 1);
    mesh.position.set(0, 50, 0);
    _this.scene.add(mesh);
  })
})

改变模型颜色

模型本型.material.color.set('#DAA569');