GLTFExporter是一个用于将3D场景导出为glTF格式的JavaScript库。

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

GLTFExporter是一个用于将3D场景导出为glTF格式的JavaScript库。下面我将逐个讲解其入参、出参、属性、方法以及API使用方式。

入参(Input Parameters):

GLTFExporter的主要入参是要导出的场景对象和一些导出选项。具体来说:

  1. scene(场景对象): 这是要导出的3D场景对象,通常是使用Three.js等库构建的场景。
  2. options(导出选项): 这是一个可选的对象,其中包含一些配置项,用于控制导出的行为。例如,您可以指定是否将纹理嵌入到输出文件中、是否包含额外的信息等。

出参(Output):

GLTFExporter的出参是导出的glTF文件。根据您的配置,它可能是一个二进制文件(.glb)或包含多个文件的文件夹(.gltf)。

属性(Properties):

GLTFExporter对象可能具有一些属性,用于配置导出的行为。这些属性通常是一些默认设置,如缩放系数等。

方法(Methods):

GLTFExporter包含了执行导出的方法。

  1. parse(scene, options, onCompleted, onError): 这个方法执行实际的导出过程。它接受场景对象、导出选项以及两个回调函数作为参数。第一个回调函数(onCompleted)在导出成功完成时调用,并接收导出的结果作为参数。第二个回调函数(onError)在导出过程中出现错误时调用。

API方式使用(API Usage):

使用GLTFExporter的基本流程通常如下:

  1. 创建GLTFExporter对象。
  2. 定义导出选项(可选)。
  3. 使用parse方法将场景导出为glTF格式。
  4. 处理导出的结果,如保存到文件或进一步处理。

示例代码:

// 导入GLTFExporter库
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';// 创建GLTFExporter对象
const exporter = new GLTFExporter();// 定义导出选项(可选)
const options = {binary: true, // 是否以二进制格式输出(默认为false,输出为.gltf文件)includeCustomExtensions: true, // 是否包含自定义扩展信息trs: true, // 是否将几何体的位置、旋转和缩放信息导出animations: [], // 要导出的动画(如果有的话)embedImages: false // 是否将图片嵌入到gltf文件中
};// 使用parse方法导出场景为glTF格式
exporter.parse(scene, options, function (result) {// 处理导出的结果if (result instanceof ArrayBuffer) {// 以二进制格式输出saveArrayBuffer(result, 'scene.glb');} else {// 以JSON格式输出const output = JSON.stringify(result, null, 2);saveString(output, 'scene.gltf');}
}, function (error) {// 处理导出过程中出现的错误console.error('Export error:', error);
});// 保存导出的文件
function saveArrayBuffer(buffer, filename) {// 实现保存二进制文件的逻辑
}function saveString(text, filename) {// 实现保存JSON文件的逻辑
}

所有源码


```html
<!DOCTYPE html>
<html lang="en">
<head><!-- 页面标题 --><title>three.js webgl - exporter - gltf</title><meta charset="utf-8"><!-- 响应式布局 --><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><!-- 引入 CSS 文件 --><link type="text/css" rel="stylesheet" href="main.css">
</head>
<body><!-- 信息提示 --><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - gltf</div><!-- 导入映射 --><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><!-- 主要 JavaScript 代码 --><script type="module">// 导入所需的模块import * as THREE from 'three';  // 导入 three.js 库import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';  // 导入 GLTFExporter 模块import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';  // 导入 GLTFLoader 模块import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';  // 导入 KTX2Loader 模块import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';  // 导入 MeshoptDecoder 模块import { GUI } from 'three/addons/libs/lil-gui.module.min.js';  // 导入 GUI 模块// 导出 GLTF 文件的函数function exportGLTF( input ) {const gltfExporter = new GLTFExporter();const options = {trs: params.trs,onlyVisible: params.onlyVisible,binary: params.binary,maxTextureSize: params.maxTextureSize};gltfExporter.parse(input,function ( result ) {if ( result instanceof ArrayBuffer ) {saveArrayBuffer( result, 'scene.glb' );} else {const output = JSON.stringify( result, null, 2 );console.log( output );saveString( output, 'scene.gltf' );}},function ( error ) {console.log( 'An error happened during parsing', error );},options);}// 创建保存链接的函数const link = document.createElement( 'a' );link.style.display = 'none';document.body.appendChild( link ); // Firefox 的兼容性解决方案,见 #6594// 保存文件的函数function save( blob, filename ) {link.href = URL.createObjectURL( blob );link.download = filename;link.click();// URL.revokeObjectURL( url ); breaks Firefox...}// 保存字符串到文件的函数function saveString( text, filename ) {save( new Blob( [ text ], { type: 'text/plain' } ), filename );}// 保存 ArrayBuffer 到文件的函数function saveArrayBuffer( buffer, filename ) {save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );}// 全局变量定义let container;  // 容器let camera, object, object2, material, geometry, scene1, scene2, renderer;  // 相机、物体、材质、几何体、场景、渲染器等let gridHelper, sphere, model, coffeemat;  // 网格帮助器、球体、模型、材质等// 参数定义const params = {trs: false,onlyVisible: true,binary: false,maxTextureSize: 4096,exportScene1: exportScene1,exportScenes: exportScenes,exportSphere: exportSphere,exportModel: exportModel,exportObjects: exportObjects,exportSceneObject: exportSceneObject,exportCompressedObject: exportCompressedObject,};// 初始化函数init();animate();// 初始化函数function init() {container = document.createElement( 'div' );document.body.appendChild( container );// 纹理数据const data = new Uint8ClampedArray( 100 * 100 * 4 );for ( let y = 0; y < 100; y ++ ) {for ( let x = 0; x < 100; x ++ ) {const stride = 4 * ( 100 * y + x );data[ stride ] = Math.round( 255 * y / 99 );data[ stride + 1 ] = Math.round( 255 - 255 * y / 99 );data[ stride + 2 ] = 0;data[ stride + 3 ] = 255;}}// 渐变纹理const gradientTexture = new THREE.DataTexture( data, 100, 100, THREE.RGBAFormat );gradientTexture.minFilter = THREE.LinearFilter;gradientTexture.magFilter = THREE.LinearFilter;gradientTexture.needsUpdate = true;// 第一个场景scene1 = new THREE.Scene();scene1.name = 'Scene1';// 透视相机camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );camera.position.set( 600, 400, 0 );camera.name = 'PerspectiveCamera';scene1.add( camera );// 环境光const ambientLight = new THREE.AmbientLight( 0xcccccc );ambientLight.name = 'AmbientLight';scene1.add( ambientLight );// 平行光const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );dirLight.target.position.set( 0, 0, - 1 );dirLight.add( dirLight.target );dirLight.lookAt( - 1, - 1, 0 );dirLight.name = 'DirectionalLight';scene1.add( dirLight );// 网格辅助器gridHelper = new THREE.GridHelper( 2000, 20, 0xc1c1c1, 0x8d8d8d );gridHelper.position.y = - 50;gridHelper.name = 'Grid';scene1.add( gridHelper );// 坐标轴辅助器const axes = new THREE.AxesHelper( 500 );axes.name = 'AxesHelper';scene1.add( axes );// 基本材质的简单几何体// 二十面体const mapGrid = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;mapGrid.colorSpace = THREE.SRGBColorSpace;material = new THREE.MeshBasicMaterial( {color: 0xffffff,map: mapGrid} );object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 0 ), material );object.position.set( - 200, 0, 200 );object.name = 'Icosahedron';scene1.add( object );// 八面体material = new THREE.MeshBasicMaterial( {color: 0x0000ff,wireframe: true} );object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 1 ), material );object.position.set( 0, 0, 200 );object.name = 'Octahedron';scene1.add( object );// 四面体material = new THREE.MeshBasicMaterial( {color: 0xff0000,transparent: true,opacity: 0.5} );object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );object.position.set( 200, 0, 200 );object.name = 'Tetrahedron';scene1.add( object );// 缓冲几何体原语// 球体material = new THREE.MeshStandardMaterial( {color: 0xffff00,metalness: 0.5,roughness: 1.0,flatShading: true,} );material.map = gradientTexture;material.bumpMap = mapGrid;sphere = new THREE.Mesh( new THREE.SphereGeometry( 70, 10, 10 ), material );sphere.position.set( 0, 0, 0 );sphere.name = 'Sphere';scene1.add( sphere );// 圆柱体material = new THREE.MeshStandardMaterial( {color: 0xff00ff,flatShading: true} );object = new THREE.Mesh( new THREE.CylinderGeometry( 10, 80, 100 ), material );object.position.set( 200, 0, 0 );object.name = 'Cylinder';scene1.add( object );// 环面纹理material = new THREE.MeshStandardMaterial( {color: 0xff0000,roughness: 1} );object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 15, 40, 10 ), material );object.position.set( - 200, 0, 0 );object.name = 'Cylinder';scene1.add( object );// 组合体const mapWood = new THREE.TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );material = new THREE.MeshStandardMaterial( { map: mapWood, side: THREE.DoubleSide } );object = new THREE.Mesh( new THREE.BoxGeometry( 40, 100, 100 ), material );object.position.set( - 200, 0, 400 );object.name = 'Cube';scene1.add( object );object2 = new THREE.Mesh( new THREE.BoxGeometry( 40, 40, 40, 2, 2, 2 ), material );object2.position.set( 0, 0, 50 );object2.rotation.set( 0, 45, 0 );object2.name = 'SubCube';object.add( object2 );// 群组const group1 = new THREE.Group();group1.name = 'Group';scene1.add( group1 );const group2 = new THREE.Group();group2.name = 'subGroup';group2.position.set( 0, 50, 0 );group1.add( group2 );object2 = new THREE.Mesh( new THREE.BoxGeometry( 30, 30, 30 ), material );object2.name = 'Cube in group';object2.position.set( 0, 0, 400 );group2.add( object2 );// 线条geometry = new THREE.BufferGeometry();let numPoints = 100;let positions = new Float32Array( numPoints * 3 );for ( let i = 0; i < numPoints; i ++ ) {positions[ i * 3 ] = i;positions[ i * 3 + 1 ] = Math.sin( i / 2 ) * 20;positions[ i * 3 + 2 ] = 0;}geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );object.position.set( - 50, 0, - 200 );scene1.add( object );// 线环geometry = new THREE.BufferGeometry();numPoints = 5;const radius = 70;positions = new Float32Array( numPoints * 3 );for ( let i = 0; i < numPoints; i ++ ) {const s = i * Math.PI * 2 / numPoints;positions[ i * 3 ] = radius * Math.sin( s );positions[ i * 3 + 1 ] = radius * Math.cos( s );positions[ i * 3 + 2 ] = 0;}geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );object = new THREE.LineLoop( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );object.position.set( 0, 0, - 200 );scene1.add( object );// 点numPoints = 100;const pointsArray = new Float32Array( numPoints * 3 );for ( let i = 0; i < numPoints; i ++ ) {pointsArray[ 3 * i ] = - 50 + Math.random() * 100;pointsArray[ 3 * i + 1 ] = Math.random() * 100;pointsArray[ 3 * i + 2 ] = - 50 + Math.random() * 100;}const pointsGeo = new THREE.BufferGeometry();pointsGeo.setAttribute( 'position', new THREE.BufferAttribute( pointsArray, 3 ) );const pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00, size: 5 } );const pointCloud = new THREE.Points( pointsGeo, pointsMaterial );pointCloud.name = 'Points';pointCloud.position.set( - 200, 0, - 200 );scene1.add( pointCloud );// 正交相机const cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );scene1.add( cameraOrtho );cameraOrtho.name = 'OrthographicCamera';material = new THREE.MeshLambertMaterial( {color: 0xffff00,side: THREE.DoubleSide} );object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );object.position.set( 200, 0, - 400 );scene1.add( object );object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );object.position.set( 0, 0, - 400 );scene1.add( object );object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );object.position.set( - 200, 0, - 400 );scene1.add( object );//const points = [];for ( let i = 0; i < 50; i ++ ) {points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );}object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material );object.position.set( 200, 0, 400 );scene1.add( object );// 用于测试 `onlyVisible` 选项的隐藏的大红色盒子material = new THREE.MeshBasicMaterial( {color: 0xff0000} );object = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );object.position.set( 0, 0, 0 );object.name = 'CubeHidden';object.visible = false;scene1.add( object );// 需要 KHR_mesh_quantization 的模型const loader = new GLTFLoader();loader.load( 'models/gltf/ShaderBall.glb', function ( gltf ) {model = gltf.scene;model.scale.setScalar( 50 );model.position.set( 200, - 40, - 200 );scene1.add( model );} );// 需要 KHR_mesh_quantization 的模型material = new THREE.MeshBasicMaterial( {color: 0xffffff,} );object = new THREE.InstancedMesh( new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 ), material, 50 );const matrix = new THREE.Matrix4();const color = new THREE.Color();for ( let i = 0; i < 50; i ++ ) {matrix.setPosition( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 );object.setMatrixAt( i, matrix );object.setColorAt( i, color.setHSL( i / 50, 1, 0.5 ) );}object.position.set( 400, 0, 200 );scene1.add( object );// 第二个 THREE.Scenescene2 = new THREE.Scene();object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );object.position.set( 0, 0, 0 );object.name = 'Cube2ndScene';scene2.name = 'Scene2';scene2.add( object );renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.toneMapping = THREE.ACESFilmicToneMapping;renderer.toneMappingExposure = 1;container.appendChild( renderer.domElement );window.addEventListener( 'resize', onWindowResize );// 导出压缩的纹理和网格(KTX2 / Draco / Meshopt)const ktx2Loader = new KTX2Loader().setTranscoderPath( 'jsm/libs/basis/' ).detectSupport( renderer );const gltfLoader = new GLTFLoader().setPath( 'models/gltf/' );gltfLoader.setKTX2Loader( ktx2Loader );gltfLoader.setMeshoptDecoder( MeshoptDecoder );gltfLoader.load( 'coffeemat.glb', function ( gltf ) {gltf.scene.position.x = 400;gltf.scene.position.z = - 200;scene1.add( gltf.scene );coffeemat = gltf.scene;} );const gui = new GUI();let h = gui.addFolder( 'Settings' );h.add( params, 'trs' ).name( 'Use TRS' );h.add( params, 'onlyVisible' ).name( 'Only Visible Objects' );h.add( params, 'binary' ).name( 'Binary (GLB)' );h.add( params, 'maxTextureSize', 2, 8192 ).name( 'Max Texture Size' ).step( 1 );h = gui.addFolder( 'Export' );h.add( params, 'exportScene1' ).name( 'Export Scene 1' );h.add( params, 'exportScenes' ).name( 'Export Scene 1 and 2' );h.add( params, 'exportSphere' ).name( 'Export Sphere' );h.add( params, 'exportModel' ).name( 'Export Model' );h.add( params, 'exportObjects' ).name( 'Export Sphere With Grid' );h.add( params, 'exportSceneObject' ).name( 'Export Scene 1 and Object' );h.add( params, 'exportCompressedObject' ).name( 'Export Coffeemat (from compressed data)' );gui.open();}function exportScene1() {exportGLTF( scene1 );}function exportScenes() {exportGLTF( [ scene1, scene2 ] );}function exportSphere() {exportGLTF( sphere );}function exportModel() {exportGLTF( model );}function exportObjects() {exportGLTF( [ sphere, gridHelper ] );}function exportSceneObject() {exportGLTF( [ scene1, gridHelper ] );}function exportCompressedObject() {exportGLTF( [ coffeemat ] );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );render();}function render() {const timer = Date.now() * 0.0001;camera.position.x = Math.cos( timer ) * 800;camera.position.z = Math.sin( timer ) * 800;camera.lookAt( scene1.position );renderer.render( scene1, camera );}</script></body>
</html>

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

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

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

相关文章

Wi-Fi儿童故事机解决方案

一、方案描述 故事机是一套全新的数码幼教产品&#xff0c;是早期的复读机与mp3播放器结合的产物&#xff0c;其电路组成设有操作按键和微处理器控制的语音电路。它独有外放品质的儿童MP3&#xff0c;可以让宝宝赏音乐、听故事、学英语、习常识&#xff0c;帮助儿童发展语言能…

京东云免费服务器申请入口,2024年最新免费云主机

京东云服务器免费6月申请入口 jdyfwq.com 在京东云免费云主机申请页面&#xff0c;免费云服务器配置为云主机2核4G5M和轻量云主机2C2G可以申请免费使用&#xff0c;目前京东云免费云服务器申请时长从之前的6个月缩短到1个月&#xff0c;如下图&#xff1a; 京东云免费云主机 云…

2.java openCV4.x 入门-hello OpenCV

专栏简介 &#x1f492;个人主页 &#x1f4f0;专栏目录 点击上方查看更多内容 &#x1f4d6;心灵鸡汤&#x1f4d6;我们唯一拥有的就是今天&#xff0c;唯一能把握的也是今天建议把本文当作笔记来看&#xff0c;据说专栏目录里面有相应视频&#x1f92b; &#x1f9ed;文…

类和对象(下)--- 初始化列表、explicit、友元、static、匿名对象和内部类

本篇将会对类和对象的主要知识收尾&#xff0c;先会对构造函数进行补充&#xff0c;分别补充了构造函数体赋值、初始化列表、explicit 关键字&#xff0c;然后介绍 static 成员知识以及友元、内部类还有匿名对象等知识点&#xff0c;目录如下&#xff1a; 目录 1. 构造函数补充…

免费AI开源引擎:在电力电网工单系统中智能解析的应用场景

电力系统作为国家基础设施的重要组成部分&#xff0c;其稳定性和可靠性对经济社会发展具有至关重要的影响。随着智能电网技术的发展&#xff0c;如何高效、准确地处理电网工单&#xff0c;成为提升电网运维管理水平的关键。自然语言处理&#xff08;NLP&#xff09;技术在电力工…

想学电子维修,没基础怎么学?

如果你没有电子维修的基础&#xff0c;学习起来可能会有些挑战&#xff0c;但并不意味着不能学会。以下是一些建议&#xff0c;帮助你从零开始学习电子维修&#xff1a; 从了解基本概念 首先&#xff0c;要补充电子学的基本概念&#xff0c;比如电流、电压、电阻、电容、电感等…

扫码预约登记怎么做?表单二维码在线制作技巧

现在提交预约信息时&#xff0c;很多场景下已不再使用原来传统的纸质登记方式&#xff0c;而采用扫码填写信息的方式来登记预约信息。这种方式除了能够有效的降低成本之外&#xff0c;还能够让更多用户能够同时填写自己的信息&#xff0c;解决需要需要排队填写的复杂操作&#…

Clickhouse-表引擎探索之MergeTree

引言 前文曾说过&#xff0c;Clickhouse是一个强大的数据库Clickhouse-一个潜力无限的大数据分析数据库系统 其中一个强大的点就在于支持各类表引擎以用于不同的业务场景。 MergeTree MergeTree系列的引擎被设计用于插入极大量的数据到一张表当中。数据可以以数据片段的形式一…

kubernetes用户权限管理详解——普通用户[kubeconfig]

原文&#xff1a; 学一下https://suxueit.com/article_detail/tdVymI4BWZdDRfKqnv1y K8s 的用户分为两类 普通用户&#xff1a;普通用户是指集群外部的人或系统管理&#xff0c;它们不由 Kubernetes 直接管理。普通用户的证书、密钥和权限管理通常由外部系统&#xff08;如企业…

科创新格局·共赢双循环“2024上海智能科技与创新展览会”

2024上海智能科技与创新展览会&#xff0c;将于6月中旬在上海新国际博览中心隆重召开。作为一场盛大的科技盛会&#xff0c;此次展览会将汇聚科技前瞻趋势&#xff0c;融合产业贸易优势&#xff0c;布局初创投资赛道&#xff0c;提供全方位场景生态的跨界合作&#xff0c;构建“…

算法之美:B+树原理、应用及Mysql索引底层原理剖析

B树的一种变种形式&#xff0c;B树上的叶子结点存储关键字以及相应记录的地址&#xff0c;同等存储空间下比B-Tree存储更多Key。非叶子节点不对关键字记录的指针进行保存&#xff0c;只进行数据索引 , 树的层级会更少 , 所有叶子节点都在同一层, 叶子节点的关键字从小到大有序排…

Linux基本指令篇

在前边&#xff0c;我们已经了解过了Linux操作系统的发展和应用&#xff0c;从该篇起&#xff0c;就正式进入对Linux的学习。 今天我们就来在Xshell上远程登录我们的云服务器。首先我们要知道自己云服务器的公网ip&#xff0c;然后修改一下密码。 点击跳转 修改完密码之后我们…