<template> <!-- 项目模型实景管理 --> <div class="projectModalM"> <div id="QuanJing" ref="threeDom"></div> </div> </template> <script setup> import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器 import gsap from 'gsap'; import { CSSRulePlugin } from 'gsap/CSSRulePlugin'; const { proxy } = getCurrentInstance(); gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画 const AllData = ref({ show: false, numer: '0%', imgUrl: '/threeModal/baoGH.JPG', imgWidth: 1200, imgHeight: 560, }); // 初始化模型 const Scene = new THREE.Scene(); const Camera = new THREE.PerspectiveCamera(30, AllData.value.imgWidth / AllData.value.imgHeight, 0.1, 5000); const Renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, //开启alpha }); // 控制器 const Controls = new OrbitControls(Camera, Renderer.domElement); //gltfLoader const Gltfloader = new GLTFLoader(); // 注意:此处为threejs的DOM,需要将threejs的场景渲染进去 const threeDom = ref(); // 首页进入相机的视角,这个视角可以在三维模型中建立一个摄像机获取摄像机的坐标,如C4D,非常准确. const cameraPosition = { x: 500, y: 400, z: -200, }; const cameraLookat = { x: 0, y: 0, z: 0, }; // 声明一个方法传入参数可以在不同的地方调用相机 const cameraReset = (position, lookAt, time = 1) => { gsap.to(Camera.position, { x: position.x, y: position.y, z: position.z, duration: time, ease: 'power4.out', // onComplete: function () { // 这是相机运动完成的回调,可以执行其他的方法. // } }); gsap.to(Camera.lookAt, { x: lookAt.x, y: lookAt.y, z: lookAt.z, duration: time, ease: 'power4.out', }); gsap.to(Camera.target, { x: lookAt.x, y: lookAt.y, z: lookAt.z, duration: time, ease: 'power4.out', }); }; // Scene.add(skyBox); const initThreeScene = () => { // 使动画循环使用时阻尼或自转 意思是否有惯性 Controls.enableDamping = true; // 动态阻尼系数 就是鼠标拖拽旋转灵敏度 Controls.dampingFactor = 0.1; // 是否可以旋转 Controls.enableRotate = true; // 是否可以缩放与速度 Controls.enableZoom = true; // 设置相机距离原点的最远距离 // Controls.minDistance = 1; // 设置相机距离原点的最远距离 Controls.maxDistance = 900; Controls.autoRotate = true; Controls.autoRotateSpeed = 1.0; // 是否开启右键拖拽 Controls.enablePan = false; // Controls.addEventListener("change", render); //render的相关设置 // Renderer.setPixelRatio(window.devicePixelRatio); Renderer.setSize(AllData.value.imgWidth, AllData.value.imgHeight); Renderer.inputEncoding = true; // Renderer.outputEncoding = THREE.sRGBEncoding; // Renderer.setClearColor(0xd0d0d0, 1); // 将renderer渲染进DOM里面 threeDom.value.appendChild(Renderer.domElement); }; // 设置页面自适应 const onWindowResize = () => { Camera.aspect = AllData.value.imgWidth / AllData.value.imgHeight; Camera.updateProjectionMatrix(); Renderer.setSize(AllData.value.imgWidth, AllData.value.imgHeight); }; window.addEventListener('resize', onWindowResize, false); // 完成以上步骤基本的场景已经配置完成 cameraReset(cameraPosition, cameraLookat); const Render = () => { requestAnimationFrame(Render); Controls.update(); // 轨道控制器的更新 Renderer.clear(); // 清除画布 Renderer.render(Scene, Camera); }; let event = {}; // 单张纹理图的加载 event.onLoad = function () { console.log('图片加载完成'); AllData.value.show = false; }; event.onProgress = function (url, num, total) { console.log('图片加载完成:', url); console.log('图片加载进度:', num); console.log('图片总数:', total); let value = ((num / total) * 100).toFixed(2) + '%'; console.log('加载进度的百分比:', value); AllData.value.numer = value; }; event.onError = function (e) { console.log('图片加载出现错误'); console.log(e); AllData.value.show = false; }; // 设置加载管理器 const loadingManager = new THREE.LoadingManager(event.onLoad, event.onProgress, event.onError); const textureLoader = new THREE.TextureLoader(loadingManager); var material = new THREE.MeshBasicMaterial(); //材质 var texture = textureLoader.load(AllData.value.imgUrl); material.map = texture; // var skyBox = new THREE.Mesh(new THREE.SphereBufferGeometry(600, 600, 600), material); var skyBox = new THREE.Mesh(new THREE.SphereGeometry(600, 600, 600), material); skyBox.geometry.scale(1, 1, -1); Scene.add(skyBox); onMounted(() => { initThreeScene(); Render(); }); onBeforeUnmount(() => { Scene.remove(skyBox); //删除组 Scene = null; }); </script> <style lang="scss" scoped> .projectModalM { #QuanJing { width: 100%; height: 100%; } } </style>