<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,    }  },  beforeCreate() {    console.log("beforeCreate");  },  beforeMount() {     console.log("beforeMount");  },  created() {
  },

  mounted() {    //初始化场景    const scene = new THREE.Scene();    //初始化相机    const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);    //设置相机位置    camera.position.z =5;    //初始化渲染器    const renderer = new THREE.WebGLRenderer();    renderer.setSize(window.innerWidth,window.innerHeight);   // const container = ref(null);   //添加控制器    const controls = new OrbitControls(camera,this.$refs['container']);    controls.enableDamping = true;//阻尼    this.$refs['container'].appendChild(renderer.domElement);    this.renderer=renderer;    this.scene=scene;    this.camera=camera;    this.renders();   // renderer.render(scene,camera);
    /* const render  {      renderer.render(scene,camera);      requestAnimationFrame(renderer);    } */    //添加立方体    const geometry = new THREE.BoxGeometry(1,1,1);    const material = new THREE.MeshBasicMaterial({color: 0X00FF00});    const cube = new THREE.Mesh(geometry,material);    scene.add(cube);




  },  methods: {    renders(){
       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>