<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,    2000);    //设置相机位置   //camera.position.z=0.1;   camera.position.set(-50,50,130);   //更新摄像头高宽比例   camera.aspect = window.innerWidth / window.innerHeight;
   //更新摄像头投影矩阵   camera.updateProjectionMatrix();   //添加场景   scene.add(camera);
   //初始化渲染器   const renderer = new THREE.WebGLRenderer({     //设置抗锯齿     antialias: true,     //对数深度缓冲区     logarithmicDepthBuffer: true,   });   renderer.outputEncoding = THREE.sRGBEncoding;
   //设置渲染器宽高   renderer.setSize(window.innerWidth,window.innerHeight);

   //添加平面   /* const planeGeometry = new THREE.PlaneGeometry(100,100);   const planeMaterial = new THREE.MeshBasicMaterial({     color: 0xffffff,   });   const plan = new THREE.Mesh(planeGeometry,planeMaterial);   scene.add(plan); */
  //创建一个巨大的天空球体  let texture = new THREE.TextureLoader().load('./static/textures/textures/sky.jpg');   const skyGeometry = new THREE.SphereGeometry(1000,60,60);   const skyMaterial = new THREE.MeshBasicMaterial({     map: texture,   });   const sky = new THREE.Mesh(skyGeometry,skyMaterial);   sky.geometry.scale(1,1,-1);//调整几何体Z轴颠倒   scene.add(sky);
 //载入环境纹理hdr const hdrLoader = new RGBELoader(); hdrLoader.loadAsync("./static/textures/textures/050.hdr").then((texture) =>{   texture.mapping = THREE.EquirectangularReflectionMapping;   scene.background = texture;   scene.environment = texture; });

   //视频纹理    const video = document.createElement("video");   video.src="./static/textures/textures/sky.mp4";   video.loop = true;   window.addEventListener("click",(e)=>{     //当鼠标移动的时候播放视频     //判断视频是否处于播放状态     if(video.paused){       video.play();       skyMaterial.map = new THREE.VideoTexture(video);       skyMaterial.map.needsUpdate = true;     }
   });
   //创建水面   const waterGeometry = new THREE.CircleBufferGeometry(300,64);   const water = new Water(waterGeometry,{     textureWidth:1024,     textureHeigth: 1024,     color: 0xeeeeff,     flowDirection: new THREE.Vector2(1,1),     scale: 1,   });   //水面x轴旋转至水平   water.rotation.x = -Math.PI /2;   scene.add(water);
   //添加平行光   const light = new THREE.DirectionalLight(0xffffff,1);
   light.add(light);   scene.add(light);


//添加小岛模型//实例化gltf载入库const loader = new GLTFLoader();//实例化draco载入库const dracoLoader = new DRACOLoader();//添加draco载入库dracoLoader.setDecoderPath('./draco');loader.setDRACOLoader(dracoLoader);loader.load('./static/textures/textures/yugang.glb',(gltf)=>{  scene.add(gltf.scene);});

   //监听屏幕的大小改变，修改渲染器的宽高，相机的比例   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>