在 Three.js 中，"USDZExporter "类用于将场景导出为 USDZ 格式，这是一种用于在 iOS 平台上显示增强现实（AR）内容的格式。

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 导入 OrbitControls import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; // 导入 RoomEnvironment import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // 导入 GLTFLoader import { USDZExporter } from 'three/addons/exporters/USDZExporter.js'; // 导入 USDZExporter import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; // 导入 GUI let camera, scene, renderer; const params = { exportUSDZ: exportUSDZ // 导出 USDZ 文件的函数 }; init(); // 初始化函数 render(); // 渲染函数 function init() { renderer = new THREE.WebGLRenderer( { antialias: true } ); // 创建 WebGL 渲染器 renderer.setPixelRatio( window.devicePixelRatio ); // 设置像素比率 renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器尺寸 renderer.toneMapping = THREE.ACESFilmicToneMapping; // 设置色调映射 document.body.appendChild( renderer.domElement ); // 将渲染器的 DOM 元素添加到文档中 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 ); // 创建透视摄像机 camera.position.set( - 2.5, 0.6, 3.0 ); // 设置摄像机位置 const pmremGenerator = new THREE.PMREMGenerator( renderer ); // 创建 PMREMGenerator scene = new THREE.Scene(); // 创建场景 scene.background = new THREE.Color( 0xf0f0f0 ); // 设置场景背景色 scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ), 0.04 ).texture; // 设置环境贴图 const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' ); // 创建 GLTFLoader loader.load( 'DamagedHelmet.gltf', async function ( gltf ) { // 加载 GLTF 模型 scene.add( gltf.scene ); // 将加载的模型添加到场景中 const shadowMesh = createSpotShadowMesh(); // 创建阴影网格 shadowMesh.position.y = - 1.1; // 设置阴影网格位置 shadowMesh.position.z = - 0.25; // 设置阴影网格位置 shadowMesh.scale.setScalar( 2 ); // 设置阴影网格缩放 scene.add( shadowMesh ); // 将阴影网格添加到场景中 render(); // 渲染场景 // 导出 USDZ const exporter = new USDZExporter(); // 创建 USDZExporter const arraybuffer = await exporter.parse( gltf.scene ); // 将场景导出为 USDZ 格式 const blob = new Blob( [ arraybuffer ], { type: 'application/octet-stream' } ); // 创建 Blob 对象 const link = document.getElementById( 'link' ); // 获取下载链接元素 link.href = URL.createObjectURL( blob ); // 设置下载链接的 href 属性为导出的 USDZ 文件的 URL } ); const controls = new OrbitControls( camera, renderer.domElement ); // 创建 OrbitControls controls.addEventListener( 'change', render ); // 添加控制器变化事件监听器 controls.minDistance = 2; // 设置控制器最小距离 controls.maxDistance = 10; // 设置控制器最大距离 controls.target.set( 0, - 0.15, - 0.2 ); // 设置控制器焦点 controls.update(); // 更新控制器 window.addEventListener( 'resize', onWindowResize ); // 添加窗口大小调整事件监听器 const isIOS = /iPad|iPhone|iPod/.test( navigator.userAgent ); // 检查是否为 iOS 设备 if ( isIOS === false ) { // 如果不是 iOS 设备 const gui = new GUI(); // 创建 GUI gui.add( params, 'exportUSDZ' ).name( 'Export USDZ' ); // 添加导出 USDZ 按钮到 GUI gui.open(); // 打开 GUI } } function createSpotShadowMesh() { const canvas = document.createElement( 'canvas' ); // 创建 canvas 元素 canvas.width = 128; // 设置 canvas 宽度 canvas.height = 128; // 设置 canvas 高度 const context = canvas.getContext( '2d' ); // 获取 2D 渲染上下文 const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 ); // 创建径向渐变 gradient.addColorStop( 0.1, 'rgba(130,130,130,1)' ); // 添加颜色停止 gradient.addColorStop( 1, 'rgba(255,255,255,1)' ); // 添加颜色停止 context.fillStyle = gradient; // 设置填充样式为渐变 context.fillRect( 0, 0, canvas.width, canvas.height ); // 绘制矩形 const shadowTexture = new THREE.CanvasTexture( canvas ); // 创建纹理对象 const geometry = new THREE.PlaneGeometry(); // 创建平面几何体 const material = new THREE.MeshBasicMaterial( { // 创建基础网格材质 map: shadowTexture, blending: THREE.MultiplyBlending, toneMapped: false } ); const mesh = new THREE.Mesh( geometry, material ); // 创建网格对象 mesh.rotation.x = - Math.PI / 2; // 设置网格旋转 return mesh; // 返回网格对象 } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; // 设置摄像机宽高比 camera.updateProjectionMatrix(); // 更新摄像机投影矩阵 renderer.setSize( window.innerWidth, window.innerHeight ); // 更新渲染器尺寸 render(); // 渲染场景 } function exportUSDZ() { const link = document.getElementById( 'link' ); // 获取下载链接元素 link.click(); // 模拟点击下载链接 } // function render() { renderer.render( scene, camera ); // 渲染场景 }