vue three.js基本案例解析

专注前端不学习一天浑身难受2023-09-01 11:11

1.安装依赖

javascript 复制代码

// 比如安装148版本
npm install three@0.148.0 --save

2.使用页面引用

javascript 复制代码

import * as THREE from 'three';
// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

3.实例说明代码

javascript 复制代码

export default {
  name: 'App',
  data() {
    return {
      vn: 1,
      scene: '',
      geometry: '',
      material: '',
      mesh: '',
      camera: '',
      controls:'',
      renderer:''
    }
  },
  mounted() {
    this.scene = new THREE.Scene();
    this.geometry = new THREE.BoxGeometry(100, 100, 100);
    //创建一个材质对象Material
    this.material = new THREE.MeshBasicMaterial({
      color: 0xff0000,//0xff0000设置材质颜色为红色
    });
    // 两个参数分别为几何体geometry、材质material
    const mesh = new THREE.Mesh(this.geometry, this.material); //网格模型对象Mesh
    //设置网格模型在三维空间中的位置坐标，默认是坐标原点
    mesh.position.set(0, 10, 0);
    this.scene.add(mesh)

    // 实例化一个透视投影相机对象
    const aspect = window.innerWidth / window.innerHeight;
    const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
    //相机在Three.js三维坐标系中的位置
    // 根据需要设置相机位置具体值
    camera.position.set(200, 200, 200);
    camera.lookAt(mesh.position);//指向mesh对应的位置
    this.camera = camera
    // 创建渲染器对象
    const renderer =new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer=renderer
    document.body.appendChild(renderer.domElement);
    // 设置相机控件轨道控制器OrbitControls
    this.controls = new OrbitControls(camera, renderer.domElement);
    this.animate();
    console.log("记载")
  },
  methods:{
    animate(){
      requestAnimationFrame(this.animate.bind(this));
    this.controls.update();
    this.renderer.render(this.scene, this.camera);
    }
  }
}
</script>

效果图