three.js在Vue项目中加载fbx模型文件

<template>
  <div>
    <div id="threeContained"></div>
  </div>
</template>
<script>
import * as THREE from "three"; //引入Threejs
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Stats from "three/examples/jsm/libs/stats.module";
 
// const OrbitControls = require("three-orbit-controls")(THREE);
export default {
  name: "vue-three",
  data() {
    return {
      scene: "",
      light: "",
      camera: "",
      controls: "",
      renderer: "",
        load:'',
      clock:'',
      mixer:''
    };
  },
  methods: {
    init() {
      var that = this;
      let container = document.getElementById("threeContained");
 
      // 创建场景
      that.scene = new THREE.Scene();
      that.scene.background = new THREE.Color(0x8cc7de);
      // 创建相机
      that.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        2000
      );
      // that.camera.position.set( -70, 25, 90 );
      // 定位相机,并且指向场景中心
            that.camera.position.x = 30;
            that.camera.position.y = 30;
            that.camera.position.z = 170;
            that.camera.lookAt(that.scene.position)
 
      /// 显示三维坐标系
            var axes = new THREE.AxesHelper(100)
            // 添加坐标系到场景中
            that.scene.add(axes);
 
       
     // 创建地面
      // const geometry = new THREE.BoxGeometry();
      // const material = new THREE.MeshPhongMaterial({ color: 0xffffff });
      // const cube = new THREE.Mesh(geometry, material);
      // that.scene.add(cube);
 
      // 创建地面的几何体
            var planeGeometry = new THREE.PlaneGeometry(100, 60);
            // 给地面物体上色
            var planeMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });
            // 创建地面
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
      plane.material.opacity = 0.6;
      plane.material.transparent = true;
      plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 0;
            plane.castShadow = true;
            // 接收阴影
            plane.receiveShadow = true;
      that.scene.add(plane);
 
      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
      hemiLight.position.set(0, 1, 0);
      that.scene.add(hemiLight);
 
      const directionalLight1 = new THREE.DirectionalLight(0xffeeff, 0.8);
      directionalLight1.position.set(1, 1, 1);
      that.scene.add(directionalLight1);
 
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight2.position.set(-1, 0.5, -1);
      that.scene.add(directionalLight2);
 
      const ambientLight = new THREE.AmbientLight(0xffffee, 0.25);
      that.scene.add(ambientLight);
 
 
      // stats
      that.stats = new Stats();
      container.appendChild(that.stats.dom);
 
      // 材质
      const normal = new THREE.TextureLoader().load( 'models/shanghai/textures/shanghai.jpg' );
 
      // model
      that.loader = new FBXLoader();

        
            that.loader.load("/models/shanghai/model/shanghai.fbx", function (object) {
        // that.mixer = new THREE.AnimationMixer( object );
        // const action = that.mixer.clipAction( object.animations[ 0 ] );
                // action.play();
        // object.traverse( function ( child ) {
        //   if ( child.isMesh ) {
        //     child.castShadow = true;
                //      child.receiveShadow = true;
                //  }
                // });
 
        object.traverse( function ( child ) {
 
                        if ( child.isMesh ) {
 
                            child.material.specular.setScalar( 0.1 );
                            child.material.normalMap = normal;
 
                        }
 
                    } );
 
        console.log(object);
        object.scale.set(0.1,0.1,0.1)
        // object.scale.set(1,1,1)
        that.scene.add(object);
        that.animate();
      });
 
       
      // 创建渲染器
      that.renderer = new THREE.WebGLRenderer();
      that.renderer.setPixelRatio(window.devicePixelRatio);
      // 设置渲染器的初始颜色
      that.renderer.setClearColor(new THREE.Color(0xeeeeee));
      // 设置输出canvas画面的大小
      that.renderer.setSize(window.innerWidth, window.innerHeight);
      container.appendChild(that.renderer.domElement);
 
 
 
 
      const controls = new OrbitControls(that.camera, that.renderer.domElement);
      controls.target.set(0, 12, 0);
      controls.update();
        // debugger
    //   window.addEventListener("onpointerdown", that.selectObject());
      window.addEventListener("resize", that.onWindowResize);
    },
 
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
 
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
 
    animate() {
      // requestAnimationFrame(this.animate);
 
      // this.renderer.render(this.scene, this.camera);
 
      // this.stats.update();
 
      requestAnimationFrame( this.animate );
      const delta = this.clock.getDelta();
      if ( this.mixer ) this.mixer.update( delta );
      this.renderer.render( this.scene, this.camera );
      this.stats.update();
    },
    selectObject(event) {
      debugger
 
      if (event.button != 0) return;
 
      const mouse = new THREE.Vector2();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 
      const raycaster = new THREE.Raycaster();
      raycaster.setFromCamera(mouse, this.camera);
 
      const intersected = raycaster.intersectObjects(
        this.scene.children,
        false
      );
      console.log(intersected)
      if (intersected.length) {
        const found = intersected[0];
        const faceIndex = found.faceIndex;
        const geometry = found.object.geometry;
        console.log(this.load)
        // const id = ifcLoader.ifcManager.getExpressId(geometry, faceIndex);
 
        const modelID = found.object.modelID;
        // ifcLoader.ifcManager.createSubset( { modelID, ids: [ id ], scene, removePrevious: true, material: highlightMaterial } );
        // const props = ifcLoader.ifcManager.getItemProperties(modelID, id, true);
        // console.log(props);
        // this.renderer.render( this.scene, this.camera );
      }
    },
  },
  mounted() {
    this.clock = new THREE.Clock();
    this.init();
    this.animate();
    window.onpointerdown = this.selectObject;
  },
};
</script>
 
<style scoped>
html,
body {
  height: 100%;
}
/* #container {
  width: 100%;
  margin: 0 auto;
  height: 1000px;
  overflow: hidden;
} */
</style>

//3d文件路径要放在public文件夹下

Vue3使用three.js加载fbx模型,可以按照以下步骤进行操作: 1. 首先,在Vue3项目安装three.jsfbx-loader: ``` npm install three fbx-loader --save ``` 2. 在Vue3创建一个Three.js组件,可以参考如下代码: ```javascript <template> <div ref="container"></div> </template> <script> import * as THREE from 'three' import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js' export default { name: 'ThreeScene', mounted() { // 创建场景 this.scene = new THREE.Scene() // 创建相机 this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) this.camera.position.set(0, 0, 5) // 创建渲染器 this.renderer = new THREE.WebGLRenderer({ antialias: true }) this.renderer.setSize(window.innerWidth, window.innerHeight) this.renderer.setPixelRatio(window.devicePixelRatio) // 将渲染器添加到页面 this.$refs.container.appendChild(this.renderer.domElement) this.animate() // 加载fbx模型 const loader = new FBXLoader() loader.load('/path/to/model.fbx', (fbx) => { this.scene.add(fbx) }) }, methods: { animate() { requestAnimationFrame(this.animate) this.renderer.render(this.scene, this.camera) } } } </script> ``` 在mounted函数,我们创建了场景、相机和渲染器,并将渲染器添加到Vue组件的DOM元素。然后,使用FBXLoader加载fbx模型,并将模型添加到场景。最后,使用requestAnimationFrame函数来循环渲染场景。 3. 在Vue3使用ThreeScene组件 在Vue3项目,我们可以使用ThreeScene组件来加载fbx模型。例如: ```html <template> <div> <ThreeScene /> </div> </template> <script> import ThreeScene from './ThreeScene.vue' export default { components: { ThreeScene } } </script> ``` 这样就可以在Vue3加载fbx模型了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值