<template>  <div class="container" ref="container">
  </div></template>
<script >import * as THREE from "three";import { ref } from "vue";//添加一个轨道控制器import { OrbitControls} from "three/examples/jsm/controls/OrbitControls";export default {  name: 'App',  data() {    return {      renderer: null,      scene: null,      camera: null,      cube: null,    }  },  mounted() {    //1.创建场景
    const scene = new THREE.Scene();
    //2.创建相机(透视相机)    /**     * 构造器     * PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )     * fov — 摄像机视锥体垂直视野角度     * aspect — 摄像机视锥体长宽比     * near — 摄像机视锥体近端面     * far — 摄像机视锥体远端面     */    const camera = new THREE.PerspectiveCamera(    75,    window.innerWidth / window.innerHeight,    0.1,    1000    );    //设置相机位置:x,y,z轴位置    camera.position.set(0,0,10);    //添加相机到场景中    scene.add(camera);    this.scene=scene;this.camera=camera;
    //3.添加物体      //创建几何体      const cubeGeometry = new THREE.BoxGeometry(1,1,1);      //创建材质      const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00});      //根据几何体和材质创建物体      const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
     //缩放:x轴3倍，y轴2倍，z轴1倍     //cube.scale.set(3,2,1)
     //旋转     cube.rotation.set(Math.PI/4 , 0,0,'XZY');
      this.cube=cube;


      //将几何体添加到场景中      scene.add(cube);
    //4.初始化渲染器    const renderer = new THREE.WebGLRenderer();      //设置渲染器的尺寸大小      renderer.setSize(window.innerWidth,window.innerHeight);    this.renderer=renderer;      //将webgl渲染的canvas内容添加到div      //document.body.append(renderer.domElement);      this.$refs['container'].appendChild(renderer.domElement);

      //使用渲染器，通过相机将场景渲染进来      renderer.render(scene,camera);
    //5.创建轨道控制器    const  controls = new OrbitControls(camera,renderer.domElement);
    //6.添加坐标轴辅助器      //size -- (可选的) 表示代表轴的线段长度. 默认为 1.    const axesHelper = new THREE.AxesHelper( 5 );    scene.add( axesHelper );
    this.renders();  },  methods: {    renders(){      //设置物体再x轴往返移动      this.cube.position.x += 0.01;
      //设置旋转      this.cube.rotation.x +=0.01;      if(this.cube.position.x >5){        this.cube.position.x = 0;      }
       this.renderer.render(this.scene,this.camera);    //  requestAnimationFrame(this.renders());//此行代码会出现threejs requestAnimationFrame 导致的call stack超出上限的问题      requestAnimationFrame( this.renders.bind(this) );
    },
  }}</script>
<style>  *{    margin: 0;    padding: 0;  }.container{  height: 100vh;  width: 100vw;  background-color: #f0f0f0;}</style>