<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";//导入动画库import gsap from "gsap";//导入dat.guiimport * as dat from "dat.gui";//导入水面import {Water} from "three/examples/jsm/objects/Water2";//导入gltf载入库import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";//导入解压库import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";export default {  name: 'App',  data() {    return {      renderer: null,      scene: null,      camera: null,      cube: null,      clock: null,      animate1: null,      controls: null,      gui: null,      directionalLight: null,      smallBall: null    }  },  mounted() {    //初始化场景    const scene = new THREE.Scene();    //初始化相机    const camera = new THREE.PerspectiveCamera(    75,    window.innerWidth/window.innerHeight,    0.1,    1000);    //设置相机位置   camera.position.z=0.1;  // camera.position.set(1.5,1,1.5);   //更新摄像头高宽比例   camera.aspect = window.innerWidth / window.innerHeight;
   //更新摄像头投影矩阵   camera.updateProjectionMatrix();   //添加场景   scene.add(camera);
  //加载背景纹理  const loader = new THREE.TextureLoader();  const bgTexture = loader.load("./static/textures/textures/050.jpg");  //折射效果，反射的效果不好  bgTexture.mapping = THREE.EquirectangularReflectionMapping;
   //设置背景和环境贴图   scene.background = bgTexture;  scene.environment = bgTexture;
  //添加环境光  const ambient = new THREE.AmbientLight(0xffffff,1);  scene.add(ambient);


  //加载小熊模型   const gltfLoader = new GLTFLoader();  gltfLoader.load("./static/textures/textures/bear.gltf",(gltf)=>{    const model = gltf.scene.children[0];    model.material = new THREE.MeshPhongMaterial({      color: 0xffffff,      envMap: bgTexture,      //设置折射率      refractionRatio: 0.7,      reflectivity: 0.99,    //  opacity: 0.5    })    model.scale.set(0.1,0.1,0.1);    scene.add(model);  })


 //初始化渲染器   //初始化渲染器      const renderer = new THREE.WebGLRenderer({        //设置抗锯齿        antialias: true,      });
      //设置渲染器宽高      renderer.setSize(window.innerWidth,window.innerHeight);
      //监听屏幕的大小改变，修改渲染器的宽高，相机的比例       window.addEventListener("resize",()=>{         camera.aspect = window.innerWidth /window.innerHeight;         camera.updateProjectionMatrix();         renderer.setSize(window.innerWidth,window.innerHeight);       });
   //将渲染器添加到页面   //将webgl渲染的canvas内容添加到div     //document.body.append(renderer.domElement);   this.$refs['container'].appendChild(renderer.domElement);   this.renderer=renderer;   this.camera=camera;   this.scene=scene;   //实例化控制器   const  controls = new OrbitControls(camera,renderer.domElement);   //设置控制器阻尼，让控制器更有真实效果，必须在动画循环调用update   controls.enableDamping = true;   this.controls=controls;

   this.renders();



  },  methods: {    renders(){       this.renderer.render(this.scene,this.camera);       requestAnimationFrame(this.renders.bind(this));


    },
  }}</script>
<style>  *{    margin: 0;    padding: 0;  }.container{  height: 100vh;  width: 100vw;  background-color: #f0f0f0;}</style>