vue 加载 three.js 模型(fbx,json)

今天我需要在我的项目中引入three.js,并且使用three.js加载fbx模型跟json模型这两种类型的模型。其中遇到了蛮多的问题的,再次跟大家分享一下。

首先在我们的项目中引入相关插件

npm install three --save

接下来我们把需要加载的模型放到static下面,

注意,必须放入static文件夹下,否则可能出现无法访问的情况。

 

 加载fbx模型代码

<template>
  <div id="app">demo</div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
export default {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      modelPath: "static/model/SambaDancing.fbx"
    };
  },
  methods: {
    init() {
      let self = this;

      let container = document.getElementById("app");
      let mouse = new THREE.Vector2();
      self.camera = new THREE.PerspectiveCamera(
        45,
        container.clientWidth / container.clientHeight,
        0.01,
        2000
      );
      self.camera.position.set(100, 200, 300);
      self.scene = new THREE.Scene();
      // ground
      var mesh = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(2000, 2000),
        new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
      );
      mesh.rotation.x = -Math.PI / 2;
      mesh.receiveShadow = true;
      self.scene.add(mesh);

      var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
      grid.material.opacity = 0.2;
      grid.material.transparent = true;
      self.scene.add(grid);

      self.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        precision: "highp"
      });
      self.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(self.renderer.domElement)

      self.controls = new OrbitControls(self.camera, self.renderer.domElement);
      self.controls.target.set(0, 100, 0);
      self.controls.update();
      var light = new THREE.HemisphereLight(0xffffff, 0x444444);
      light.position.set(0, 200, 0);
     self. scene.add(light);

      light = new THREE.DirectionalLight(0xffffff);
      light.position.set(0, 200, 100);
      light.castShadow = true;
      light.shadow.camera.top = 180;
      light.shadow.camera.bottom = -100;
      light.shadow.camera.left = -120;
      light.shadow.camera.right = 120;
      self.scene.add(light);
      let fbxLoader = new FBXLoader();
      fbxLoader.load(self.modelPath, function(object) {
        self.scene.add(object);
      });
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.clear();
      this.renderer.render(this.scene, this.camera);
      this.renderer.clearDepth();
    }
  },
  mounted() {
    this.init();
    this.animate();
  }
};
</script>
<style lang="less" scoped>
#app {
  height: 100%;
  width: 100%;
}
</style>

效果如下:

 

记下来,先去获得一个json格式的模型,官网下载一个three.js的项目,然后打开three.js编辑器,然后把fbx模型导入

导入json模型的代码只要在之前代码的基础上,修改掉模型导入的路径

跟加载模型的方式就可以了

1.可能会遇到模型加载不出来的问题

a.确保把模型放在了static文件夹下面

b.是否导入的模型太大或者太小了,调整一下模型的大小

c.是否没有添加灯光之类的,如果场景一片漆黑的情况

 

点击下载

  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 46
    评论
### 回答1: 在Vue加载fbx模型可以使用Three.js库来实现。首先,你需要在Vue项目中安装和引入Three.js库。 1. 在Vue项目的根目录下,使用终端或命令提示符运行以下命令来安装Three.js库: ``` npm install three ``` 2. 在你的Vue组件中引入Three.js库: ```javascript import * as THREE from 'three'; ``` 3. 在Vue组件的`mounted`钩子函数中编写加载fbx模型的代码。例如,假设你的fbx模型文件名为`model.fbx`,它与Vue组件的文件在同一目录下: ```javascript mounted() { // 创建场景 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); this.$refs.container.appendChild(renderer.domElement); // 加载fbx模型 const loader = new THREE.FBXLoader(); loader.load('model.fbx', (fbx) => { scene.add(fbx); }); // 设置相机位置 camera.position.z = 5; // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); }, ``` 4. 在Vue模板中,添加一个容器元素来承载渲染器的canvas画布。例如,你可以在Vue组件的`<template>`中添加以下代码: ```html <template> <div ref="container"></div> </template> ``` 这样,fbx模型就会在Vue页面加载和渲染出来。记得在最后将fbx模型添加到场景中,并在动画循环中持续渲染场景。 ### 回答2: 在Vue加载FBX模型需要使用Three.js库和FBXLoader插件。首先,你需要在Vue项目中引入Three.jsFBXLoader。 1. 在你的Vue项目中安装Three.js库。 ``` npm install three --save ``` 2. 在Vue组件的代码中引入Three.jsFBXLoader。 ```javascript import * as THREE from 'three' import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js' ``` 3. 创建一个用于渲染Three.js场景的div元素。 ```html <div id="canvas"></div> ``` 4. 在Vue组件的mounted生命周期钩子函数中编写加载FBX模型的代码。 ```javascript mounted() { // 创建Three.js场景 const scene = new THREE.Scene() // 创建Three.js渲染器 const renderer = new THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) const canvas = document.getElementById('canvas') canvas.appendChild(renderer.domElement) // 创建Three.js相机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) camera.position.z = 5 // 创建一个灯光 const light = new THREE.DirectionalLight(0xffffff) light.position.set(1, 1, 1).normalize() scene.add(light) // 创建FBXLoader const loader = new FBXLoader() // 加载FBX模型 loader.load('path/to/your/model.fbx', (fbx) => { // 设置模型的初始位置和旋 fbx.position.set(0, 0, 0) fbx.rotation.set(0, 0, 0) fbx.scale.set(1, 1, 1) // 将模型添加到场景中 scene.add(fbx) // 渲染场景 function animate() { requestAnimationFrame(animate) fbx.rotation.y += 0.01 renderer.render(scene, camera) } animate() }) } ``` 以上代码中,首先创建了Three.js场景、渲染器、相机和灯光。然后通过FBXLoader加载FBX模型,并将其添加到场景中。最后通过requestAnimationFrame方法,循环渲染场景,实现模型的旋效果。 ### 回答3: 在Vue加载FBX模型,可以使用Three.js库来实现。首先,将需要加载FBX文件放置在项目的公共文件夹中(例如,public文件夹)。然后,按照以下步骤进行操作: 1. 在Vue组件中引入Three.js库: ```javascript import * as THREE from 'three'; ``` 2. 创建一个Vue组件并在mounted钩子中加载FBX模型: ```javascript export default { mounted() { this.loadFBXModel(); }, methods: { loadFBXModel() { const loader = new THREE.FBXLoader(); loader.load('/path/to/your/fbx-model.fbx', (fbx) => { this.scene.add(fbx); }); } } } ``` 在上述代码中,我们创建了一个FBXLoader实例,并使用其load方法加载FBX模型加载完成后,通过将模型添加到场景中来显示。 3. 创建场景和渲染器并在组件中初始化它们: ```javascript import * as THREE from 'three'; export default { data() { return { scene: null, renderer: null }; }, mounted() { this.initScene(); this.loadFBXModel(); this.animate(); }, methods: { initScene() { this.scene = new THREE.Scene(); this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize(window.innerWidth, window.innerHeight); this.$el.appendChild(this.renderer.domElement); }, animate() { requestAnimationFrame(this.animate); this.renderer.render(this.scene); } } } ``` 在上述代码中,我们通过将渲染器实例化为THREE.WebGLRenderer,并设置其大小以及将其DOM元素附加到组件的根元素中。接着,我们在mounted钩子中调用animate方法,以使渲染器在每一帧渲染场景。 通过以上步骤,你就可以在Vue加载FBX模型并在场景中显示它了。请确保使用合适的路径替换代码中的'/path/to/your/fbx-model.fbx'。
评论 46
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猴子编程

请支持一下我的分享

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值