记事本(父页面与iframe子页面的联通,vue3+ts展示fbx模型,与tga贴图)
vue3+ts 展示fbx与tga贴图
npm i three --save<template><div ref="modelContainer"></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as THREE from 'three';
import { FBXLoader } from 'three/addons/loaders/FBXLoader'; // 导入FBXLoader
import { TGALoader } from 'three/examples/jsm/loaders/TGALoader'
const modelContainer = ref<HTMLElement | null>(null);
let fbxModel = null as any;
onMounted(() => {// 创建场景const scene = new THREE.Scene();// 创建相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 2.5;camera.position.y = 1.5;// 设置alpha为true// 设置clearColor为透明// 创建渲染器const renderer = new THREE.WebGLRenderer({ alpha: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0x000000, 0);modelContainer.value?.appendChild(renderer.domElement);// 创建FBX加载器const loader = new FBXLoader();const tgaloader = new TGALoader()// 贴图路径数组const texturePaths = ['/public/models/LoGo_D.tga','/public/models/LoGo_N.tga'];// 加载FBX模型loader.load('/public/models/LoGo.fbx',(fbx) => {fbxModel = fbx;// 创建一个包含多个贴图的数组const textures = texturePaths.map(path => {const texture = tgaloader.load(path);texture.colorSpace = THREE.SRGBColorSpace;return texture;});// 创建一个包含多个贴图的uniform对象const uniforms = {texture1: { value: textures[0] },texture2: { value: textures[1] },};// 顶点着色器代码const vertexShader = `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`;// 片段着色器代码const fragmentShader = `varying vec2 vUv;uniform sampler2D texture1;uniform sampler2D texture2;void main() {vec4 color1 = texture2D(texture1, vUv);vec4 color2 = texture2D(texture2, vUv);gl_FragColor = mix(color1, color2, 0.001); }`;// 创建着色器材质const material = new THREE.ShaderMaterial({uniforms: uniforms,vertexShader: vertexShader,fragmentShader: fragmentShader,});// 遍历模型的所有子网格fbx.traverse((child: any) => {if (child instanceof THREE.Mesh) {// 应用着色器材质到子网格child.material = material;}});scene.add(fbxModel);},(xhr) => {console.log((xhr.loaded / xhr.total) * 100 + '% loaded');},(error) => {console.error(error);});// 创建光源const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);const pointLight = new THREE.PointLight(0xffffff, 1);camera.add(pointLight);scene.add(camera);// 渲染场景const animate = () => {requestAnimationFrame(animate);// 根据滚动条位置调整模型的旋转角度if (fbxModel) {fbxModel.rotation.y += 0.01;}// const scrollTops = window.pageYOffset || document.documentElement.scrollTop;// if (scrollTops >= 12220) {// const maxRotation = Math.PI / 2; // 最大旋转角度为90度，模型躺下// fbxModel.rotation.y = maxRotation * scrollTops;// }// 在这里可以添加模型的旋转或其他动画renderer.render(scene, camera);};animate();});
</script><style scoped>
/* 在这里可以添加样式 */
</style>
iframe子页面与父页面
<script>
//子页面 iframe
window.parent.postMessage({data:'data'}, '*');//父页面
window.addEventListener('message',function (e: any) {if (e.data.action === "closeLoading") {TransferMethod()}},false
)
</script>