vue2引入three.js

范天缘

已于 2022-06-17 08:47:08 修改

阅读量2.5k

点赞数 3

分类专栏： three.js vue 文章标签：前端 vue.js

于 2022-06-17 08:46:28 首次发布

本文链接：https://blog.csdn.net/weixin_42821697/article/details/125326752

版权

vue 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

three.js

18 篇文章 0 订阅

订阅专栏

1.首先利用npm安装three.js,具体操作代码如下：

npm install three

2.接下来利用npm安装轨道控件插件：

npm install three-orbit-controls

3.接下来安装加载.obj和.mtl文件的插件：

npm i --save three-obj-mtl-loader

4.安装渲染器插件：

npm i --save three-css2drender

安装好以后，在页面中引入three.js并使用，在所调用页面引入的代码为：

import * as Three from 'three'

代码如下

<!--  -->
<template>
  <div id="container"></div>
</template>

<script>
import * as Three from 'three'
let scene = null,
camera=null,
renderer=null,
mesh=null
export default {
  data () {
    return {
        
    };
  },
  methods:{
    init(){
      let container = document.getElementById('container');
      camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
      camera.position.z = 1
      scene = new Three.Scene()
      let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
      let material = new Three.MeshNormalMaterial();

      mesh = new Three.Mesh(geometry, material);
      scene.add(mesh);

      renderer = new Three.WebGLRenderer({antialias:true});
      renderer.setSize(container.clientWidth,container.clientHeight);
      container.appendChild(renderer.domElement);
    },
    animate(){
      requestAnimationFrame(this.animate);
      console.log(this.animate,'132')
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
      renderer.render(scene,camera); 
    }
  },
  mounted(){
      this.init()
      this.animate()
  }

}

</script>
<style scoped>
#container{
    width: 100vw;
    height: 100vh;
}
</style>