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

demo 案例
在这里插入图片描述

在 Three.js 中，USDZExporter 类用于将场景导出为 USDZ 格式，这是一种用于在 iOS 平台上显示增强现实（AR）内容的格式。下面是关于 USDZExporter 的入参、出参、方法和属性的讲解：

入参 (Parameters):

  1. scene: THREE.Scene 类型的参数，表示要导出为 USDZ 格式的 Three.js 场景对象。

出参 (Return Value):

  1. Promise: parse 方法返回一个 Promise 对象，该 Promise 在导出完成时解析为导出的 USDZ 文件的二进制数据。

方法 (Methods):

  1. constructor(): 构造函数，用于创建 USDZExporter 实例。

  2. parse(scene: THREE.Scene): Promise: parse 方法用于将给定的 Three.js 场景对象转换为 USDZ 格式。它接受一个 THREE.Scene 实例作为参数，表示要导出的场景，并返回一个 Promise 对象，该对象在导出完成时解析为导出的 USDZ 文件的二进制数据。

完整代码

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - USDZ exporter</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"><style>body {background-color: #eee;}#info {color: #222;}a {color: #00f}#button {position: absolute;bottom: 15px;left: calc(50% - 40px);}</style></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - USDZ exporter<br />Battle Damaged Sci-fi Helmet by<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a></div><a id="link" rel="ar" href="" download="asset.usdz"><img id="button" width="100" src="files/arkit.png"></a><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 导入 OrbitControlsimport { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; // 导入 RoomEnvironmentimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // 导入 GLTFLoaderimport { USDZExporter } from 'three/addons/exporters/USDZExporter.js'; // 导入 USDZExporterimport { GUI } from 'three/addons/libs/lil-gui.module.min.js'; // 导入 GUIlet 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 ); // 创建 PMREMGeneratorscene = 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/' ); // 创建 GLTFLoaderloader.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(); // 渲染场景// 导出 USDZconst exporter = new USDZExporter(); // 创建 USDZExporterconst 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 ); // 创建 OrbitControlscontrols.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(); // 创建 GUIgui.add( params, 'exportUSDZ' ).name( 'Export USDZ' ); // 添加导出 USDZ 按钮到 GUIgui.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 ); // 渲染场景}</script></body>
</html>

本内容来源于小豆包，想要更多内容请跳转小豆包 》

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/786310.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

非常绕的“输入结束”信号

非常绕的“输入结束”信号

【题目描述】 输入一些整数&#xff0c;求出它们的最小值、最大值和平均值&#xff08;保留3位小数&#xff09;。输入保证这些数都是不超过1000的整数。 【样例输入】 2 8 3 5 1 7 3 6 【样例输出】 1 8 4.375 【题目来源】 刘汝佳《算法竞赛入门经典 第2版》 例题2-5…
阅读更多...
HTTP和HTTPS谁传输数据更安全？

HTTP和HTTPS谁传输数据更安全？

1.HTTP HTTP在传输数据时&#xff0c;通常都是明文传输&#xff0c;也就是传输的数据没有进行加密。在这种情况下&#xff0c;如果传输的是一些敏感数据&#xff0c;比如某银行卡密码&#xff0c;就很容易被别人截获到&#xff0c;这就对我们的个人利益产生了威胁。 HTTP传输数…
阅读更多...
时区信息TimeZoneInfo

时区信息TimeZoneInfo

1.时区TimeZoneInfo 对于一个开放于全球的网站或服务&#xff0c;在时间上的显示是一个问题&#xff0c;因为各个国家都会有所谓的时差&#xff0c;好在 .Net Framework 提供 TimeZoneInfo 类来解决这个问题。 TimeZoneInfo 类的成员支持以下操作&#xff1a; 检索操作系统已定…
阅读更多...
Mysql数据库故障排查与优化

Mysql数据库故障排查与优化

目录 前言 一、Mysql数据库的单实例故障 1.故障一——拒绝连接数据库 1.1故障内容 1.2问题分析 1.3解决方法 2.故障二——密码错误 2.1故障内容 2.2问题分析 2.3解决方法 3.故障三——数据库处理较慢 3.1故障内容 3.2问题分析 3.3解决方法 4.故障四——数据库表…
阅读更多...
k8s 基础入门

k8s 基础入门

1.namespace k8s中的namespace和docker中namespace是两码事&#xff0c;可以理解为k8s中的namespace是为了多租户&#xff0c;dockers中的namespace是为了网络、资源等隔离 2.deployment kubectl create #新建 kubectl aply #新建 更新 升级&#xff1a; 滚动升级&#x…
阅读更多...
真实sql注入以及小xss--BurpSuite联动sqlmap篇

真实sql注入以及小xss--BurpSuite联动sqlmap篇

前几天漏洞检测的时候无意发现一个sql注入 首先我先去网站的robots.txt去看了看无意间发现很多资产 而我意外发现admin就是后台 之后我通过基础的万能账号密码测试or ‘1‘’1也根本没有效果 而当我注入列的时候情况出现了 出现了报错&#xff0c;有报错必有注入点 因此我…
阅读更多...
Flink Checkpoint 机制深度解析：原理、注意事项与最佳实践

Flink Checkpoint 机制深度解析：原理、注意事项与最佳实践

Flink Checkpoint 机制详解 Apache Flink 的 Checkpoint 机制是一种强大的容错机制&#xff0c;其设计目标是在分布式流处理环境中保证数据处理的一致性和可靠性。Checkpoint 主要通过周期性地创建应用流图状态的全局快照来实现&#xff0c;当系统发生故障时&#xff0c;可以从…
阅读更多...
33-2 XXE漏洞 - XXE外部实体注入原理

33-2 XXE漏洞 - XXE外部实体注入原理

一、外部实体注入漏洞定义 外部实体注入漏洞（XML External Entity Injection，XXE）是针对应用程序解析 XML 输入类型的一种攻击。 攻击者利用未经严格安全控制的服务端 XML 解析过程，向其注入恶意 XML 数据。通过加载恶意外部实体，攻击者可以导致服务器执行恶意配置，从而造…
阅读更多...
企业能耗数据分析有哪些优势？怎样进行分析？

企业能耗数据分析有哪些优势？怎样进行分析？

随着互联网技术的发展&#xff0c;企业在运营中会出现大量的用能数据&#xff0c;但却做不了精准的用能数据分析&#xff0c;导致数据没有得到有效利用&#xff0c;以及产生能源浪费现象。 为什么企业用能分析总是难&#xff1f; 一、用能分析过程复杂 由于用能分析过于复杂…
阅读更多...
采用C#.net6.0+Vue，Ant-Design技术开发的一套大型医院手术麻醉信息系统源码，系统成熟，运行稳定

采用C#.net6.0+Vue，Ant-Design技术开发的一套大型医院手术麻醉信息系统源码，系统成熟，运行稳定

手术麻醉信息系统源码&#xff0c;C#手麻系统源码&#xff0c;自主版权应用案例&#xff08;适合上项目&#xff09; 手术麻醉信息系统可以实现手术室监护仪、麻醉机、呼吸机、输液泵等设备输出数据的自动采集&#xff0c;采集的数据能据如实准确地反映患者生命体征参数的变化&…
阅读更多...
穿山甲广告平台SDK接入效果怎么样？

穿山甲广告平台SDK接入效果怎么样？

广告收入是大多数开发者的应用变现收入来源&#xff0c;如何进行流流量变现是从应用设计之初就需要开发者思考的问题。 穿山甲广告平台作为国内第三方广告变现平台&#xff0c;是不少开发者选择的对接平台。 穿山甲广告平台的广告类型较多&#xff0c;有信息流&#xff0c;ba…
阅读更多...
Linux 安装apache

Linux 安装apache

安装apache过程 配置yum源安装apache启动apache检查apache的状态访问apache如果访问不了可能是火墙和selinux 配置yum源 一 .挂载光盘 mkdir /kk mount /dev/cdrom /kk检查挂载点 ls /kk第二步&#xff1a;修改yum的配置文件&#xff0c;指向我们创建的yum源&#xff1a;/te…
阅读更多...
苍穹外卖05（Redis入门，下载于安装，服务启动和停止，Redis数据类型面试题，常用命令，Java中操作Redis，店铺营业状态设置）

苍穹外卖05（Redis入门，下载于安装，服务启动和停止，Redis数据类型面试题，常用命令，Java中操作Redis，店铺营业状态设置）

目录 一、Redis入门 1. Redis简介 1 NoSQL介绍 2 Redis简介 2. Redis下载与安装 1 Redis下载 2 Redis安装 3. Redis服务启动与停止 1 服务启动命令 2 客户端连接命令 3 修改Redis配置文件 3 修改Redis配置文件 4 Redis客户端图形工具 二、Redis数据类型【面试题】…
阅读更多...
如何让光猫4个网口都有网络

如何让光猫4个网口都有网络

一般情况光猫只有LAN1口有网络&#xff0c;LAN2、LAN3和LAN4口都是预留给电视用的&#xff0c;那么如何让这3个网口也有网络呢&#xff1f; 使用场景&#xff1a; 光猫在弱电箱内&#xff0c;弱电箱中有三根网线&#xff08;网线1、网线2和网线3&#xff09;分别接入到了三个房…
阅读更多...
基于Arduino IDE 野火ESP8266模块 文件系统LittleFS 的开发

基于Arduino IDE 野火ESP8266模块 文件系统LittleFS 的开发

一、文件系统LittleFS的介绍 LittleFS是一个为微控制器设计的轻量级、可靠且高性能的文件系统。它专为嵌入式设备打造&#xff0c;拥有占用空间小、对硬件要求低的特点&#xff0c;同时保证在断电情况下数据的完整性和稳定性。 1.设计与特点 LittleFS的设计旨在提供嵌入式系统所…
阅读更多...
依赖倒转原则

依赖倒转原则

1.1 MM请求电脑 MM电脑坏了&#xff0c;需要修电脑&#xff0c;是因为每次打开QQ,一玩游戏&#xff0c;机器就死了。出来蓝底白字的一堆莫名奇妙的英文。蓝屏死机了&#xff0c;估计内存有问题。 1.2 电话遥控修电脑 遥控修理电脑&#xff0c;打开内存条&#xff0c;两根内存…
阅读更多...
Vivado使用（6）——增量综合（ Incremental Synthesis）

Vivado使用（6）——增量综合（ Incremental Synthesis）

目录 一、概述 1.1 增量综合的工作原理 1.2 增量综合的优点 1.3 注意事项 二、设置增量综合 2.1 Write Incremental Synthesis 复选框 2.2 Incremental Synthesis 选择框 2.2.1 自动使用上一次运行的检查点&#xff08;Automatically use the checkpoint from the…
阅读更多...
Vue（十二）：脚手架配置代理，github案例，插槽

Vue（十二）：脚手架配置代理，github案例，插槽

一、脚手架配置代理 老师讲的主要有两种方法&#xff1a; 但是我的没有proxy&#xff0c;只有proxyTable,之前一直不成功&#xff0c;现在我是这样配置的&#xff1a; config文件夹下的index.js: App.vue: 然后就成功了&#xff1a;&#xff08;我真服了&#xff0c;之前在这…
阅读更多...
jdbc连SQL server，显示1433端口连接失败解决方法

jdbc连SQL server，显示1433端口连接失败解决方法

Exception in thread "main" com.microsoft.sqlserver.jdbc.SQLServerException: 通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败。错误:“connect timed out。请验证连接属性。确保 SQL Server 的实例正在主机上运行&#xff0c;且在此端口接受 TCP/IP 连接…
阅读更多...
零基础入门实战深度学习Pytorch课程下载

零基础入门实战深度学习Pytorch课程下载

本课程旨在帮助零基础学员掌握PyTorch深度学习框架。通过实战项目&#xff0c;学员将学习神经网络基础、模型训练和调优技巧。逐步掌握深度学习核心概念&#xff0c;为未来在人工智能领域打下坚实基础。 课程大小:2.6G 课程下载&#xff1a;https://download.csdn.net/downlo…
阅读更多...
最新文章

Copyright @ 2022~2023