three.js(19)-接入vue

如何将three接入vue项目中呢？

npm install three -S

index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>
    html,body {
      width:100%;
      height:100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <noscript>

  </noscript>
  <div id="app">
    
  </div>

</body>

</html>

App.vue

<template>
  <div id="app">
    <home></home>
  </div>
</template>

<script>
import Home from './components/home.vue'
export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

<style>

#app {
  width:100%;
  height:100%;
}
</style>

home.vue

<template>
  <div class="main" ref="container">
  </div>
</template>

<script>
import * as THREE from "three";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

export default {
  name: 'Home',
  data(){
    return {
      cont: null,
      camera: null,
      scene: null,
      mesh: null,
      renderer: null,
    }
  },
  mounted(){
    this.cont = this.$refs.container;
    this.init();
    this.animate();
    window.onresize = ()=>{
        this.camera.aspect = this.cont.clientWidth / this.cont.clientHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize( this.cont.clientWidth, this.cont.clientHeight, true);
    }
  },
  methods:{
    init(){
      this.scene = new THREE.Scene();
      var axes = new THREE.AxesHelper(50);//50表示xyz轴的长度，红:x,绿:y,蓝:z
      this.scene.add(axes);
      var geometry = new THREE.BoxGeometry(20, 20, 20); 

      var material = new THREE.MeshLambertMaterial({
        color: 0xffff00
      });
      //合成对象
      this.mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      this.mesh.position.set(10, 10, 10);
      this.scene.add(this.mesh); //网格模型添加到场景中
      var point = new THREE.PointLight(0xffffff);
      point.position.set(0, 0, 100); //点光源位置

      this.scene.add(point); //点光源添加到场景中
     
      this.camera = new THREE.PerspectiveCamera(45, this.cont.clientWidth / this.cont.clientHeight, 0.1, 1000);
      this.camera.position.set(50, 50, 50); //设置相机的位置
      this.camera.lookAt(new THREE.Vector3(0,0,0)); //设置相机拍摄的方向，看向原点位置
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(this.cont.clientWidth, this.cont.clientHeight, true);//设置渲染区域尺寸
      this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      this.cont.appendChild(this.renderer.domElement);

      new OrbitControls(this.camera, this.renderer.domElement);
    },
    animate(){
      this.renderer.render(this.scene, this.camera);//渲染必须有场景和相机两个对象
      this.mesh.rotateY(0.01);
      requestAnimationFrame(this.animate);//递归调用
    }
  }
}
</script>


<style scoped>
.main{
  width:100%;
  height:100%;
}
</style>

scene.gif

最后编辑于：2021.12.14 10:25:32