如何打开GLTF文件

Posted 2023-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何打开GLTF文件相关的知识，希望对你有一定的参考价值。

gltf文件一般是3d模型的通用储存格式。
此文件可以使用常用的3d模型软件打开，也可以使用一些站点工具打开。比如百度搜索进入“gltfs模型库”，点击本地模型预览，就可以查看gltf格式的模型了。参考技术A 这种情况恐怕是操作失误，将文件的后缀名给删除了，机器不知道该用什么程序来打开这个文件。
以前打开过这个文件或是这类的文件吗？是用的什么程序打开的？可以先打开应用程序，再试着用来打开这个文件。如果试出来了，能打开了。再照下面操作：
随便打开一个文件夹，工具－文件夹选项－查看，确认“隐藏已知文件的扩展名”选项未被勾选，根据应用程序支持的文件类型，给这个文件添加相应的后缀名，

如何将环境映射添加到 gltf 对象

【中文标题】如何将环境映射添加到 gltf 对象【英文标题】：How to add env map onto gltf object 【发布时间】：2021-07-14 22:14:20 【问题描述】：

我在将环境贴图添加到加载的 GLTF / GLB 文件时遇到了相当大的麻烦，到目前为止，我得到了某种反射，而不是带有光点的黑点，

我正在阅读一些关于三个 js 的文档，并认为我可以使用标准网格材料将其拉下来，并以某种方式将其应用于对象（gltf）并将网格添加到场景中。我尝试了一个类似的模型，但该项目消失了。不知道怎么弄，求各位大神帮忙

这是我试图应用到它的环境贴图，（或类似的东西） https://hdrihaven.com/files/hdri_images/tonemapped/8192/venice_sunset.jpg

这是我正在开发的代码笔 https://codepen.io/8AD/pen/XWpxmpO

HTML

<script src="https://unpkg.com/three@0.87.1/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/build/three.min.js"></script>
<!-- OrbitControls.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/controls/OrbitControls.js"></script>
<!-- DRACOLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/DRACOLoader.js"></script>
<!-- GLTFLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/GLTFLoader.js"></script>

<div id="3dmain">

  
</div>

var gltf = null;
var mixer = null;
var clock = new THREE.Clock();
var controls;
var camera;
init();
animate();

var renderCalls = [];
function render () 
requestAnimationFrame( render );
renderCalls.forEach((callback)=> callback(); );

render();

  
function init() 
    width = window.innerWidth;
    height = window.innerHeight;
    
    scene = new THREE.Scene();
    
  var light = new THREE.PointLight( 0xffffcc, 20, 200 );
light.position.set( 4, 30, 80 );
scene.add( light );

var light2 = new THREE.AmbientLight( 0x20202A, 20, 100 );
light2.position.set( 30, -10, 30 );
scene.add( light2 );

  
    camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 10000 );
    camera.position.set(0, 3, 10);


    window.addEventListener( 'resize', function () 
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth, window.innerHeight );
    , false );
    
    var geometry = new THREE.BoxGeometry(100, 5, 100);
    var material = new THREE.MeshLambertMaterial(
        color: "#707070"
    );
    
 
    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) 
        console.log( item, loaded, total );
    ;

    var loader = new THREE.GLTFLoader();
    loader.setCrossOrigin( 'anonymous' ); 
    
    
    var scale = 0.01;
    var url = "https://8ad.studio/wp-content/uploads/3D%20Assets/blimp.glb";
    
    loader.load(url, function (data) 
        gltf = data;
        var object = gltf.scene;
        object.scale.set(scale, scale, scale);
        //object.position.y = -5;
        //object.position.x = 4;
        object.castShadow = true;
        object.receiveShadow = true;

        var animations = gltf.animations;
        if ( animations && animations.length ) 
            mixer = new THREE.AnimationMixer( object );
            for ( var i = 0; i < animations.length; i ++ ) 
                var animation = animations[ i ];
                mixer.clipAction( animation ).play();
            
        
        scene.add(object);
    );

    

    renderer = new THREE.WebGLRenderer( antialias: true, alpha: true  );
    renderer.setClearColor( 0x000000, 0 );
    renderer.shadowMap.enabled = true;
    
    controls = new THREE.OrbitControls( camera,);
      controls.rotateSpeed = 0.3;
controls.zoomSpeed = 0.9;

controls.minDistance = 14;
controls.maxDistance = 14;

controls.minPolarAngle = 0; // radians
controls.maxPolarAngle = Math.PI /2; // radians

controls.enableDamping = true;
controls.dampingFactor = 0.05;

var renderCalls = [];
renderCalls.push(function()
  controls.update()
);

    renderer.setSize( width, height );
    renderer.gammaOutput = true;
    document.getElementById('3dmain').appendChild( renderer.domElement );


function animate() 
    requestAnimationFrame( animate );
    if (mixer) mixer.update(clock.getDelta());
    controls.update();
    render();


function render() 
    renderer.render( scene, camera );

【问题讨论】：

【参考方案1】：

您必须在您的应用中包含RGBELoader 才能导入 HDR 纹理，并使用PMREMGenerator 来预处理环境贴图以供 PBR 材质使用。

var gltf = null;
var mixer = null;
var clock = new THREE.Clock();
var controls;
var camera;
var renderer;
init();
animate();

var renderCalls = [];

function render() 
  requestAnimationFrame(render);
  renderCalls.forEach((callback) => 
    callback();
  );

render();


function init() 
  width = window.innerWidth;
  height = window.innerHeight;

  scene = new THREE.Scene();

  var light = new THREE.PointLight(0xffffcc, 20, 200);
  light.position.set(4, 30, 80);
  scene.add(light);

  var light2 = new THREE.AmbientLight(0x20202A, 20, 100);
  light2.position.set(30, -10, 30);
  scene.add(light2);

  camera = new THREE.PerspectiveCamera(60, width / height, 0.01, 10000);
  camera.position.set(0, 3, 10);


  renderer = new THREE.WebGLRenderer(
    antialias: true,
    alpha: true
  );
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1;
  renderer.setClearColor(0x000000, 0);
  renderer.shadowMap.enabled = true;

  window.addEventListener('resize', function() 
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  , false);

  var geometry = new THREE.BoxGeometry(100, 5, 100);
  var material = new THREE.MeshLambertMaterial(
    color: "#707070"
  );


  var manager = new THREE.LoadingManager();
  manager.onProgress = function(item, loaded, total) 
    console.log(item, loaded, total);
  ;

  var scale = 0.01;
  var url = "https://8ad.studio/wp-content/uploads/3D%20Assets/blimp.glb";

  var loader = new THREE.GLTFLoader();
  loader.setCrossOrigin('anonymous');

  const pmremGenerator = new THREE.PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();

  const rgbeLoader = new THREE.RGBELoader();
  rgbeLoader.load('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', function(texture) 

    const envMap = pmremGenerator.fromEquirectangular(texture).texture;

    scene.background = envMap;
    scene.environment = envMap;

    texture.dispose();
    pmremGenerator.dispose();

    loader.load(url, function(data) 
      gltf = data;
      var object = gltf.scene;
      object.scale.set(scale, scale, scale);
      //object.position.y = -5;
      //object.position.x = 4;
      object.castShadow = true;
      object.receiveShadow = true;

      var animations = gltf.animations;
      if (animations && animations.length) 
        mixer = new THREE.AnimationMixer(object);
        for (var i = 0; i < animations.length; i++) 
          var animation = animations[i];
          mixer.clipAction(animation).play();
        
      
      scene.add(object);
    );

  );

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.rotateSpeed = 0.3;
  controls.zoomSpeed = 0.9;

  controls.minDistance = 14;
  controls.maxDistance = 14;

  controls.minPolarAngle = 0; // radians
  controls.maxPolarAngle = Math.PI / 2; // radians

  controls.enableDamping = true;
  controls.dampingFactor = 0.05;

  var renderCalls = [];
  renderCalls.push(function() 
    controls.update()
  );

  renderer.setSize(width, height);
  document.getElementById('3dmain').appendChild(renderer.domElement);


function animate() 
  requestAnimationFrame(animate);
  if (mixer) mixer.update(clock.getDelta());
  controls.update();
  render();


function render() 
  renderer.render(scene, camera);

body 
      margin: 0;

<script src="https://cdn.jsdelivr.net/npm/three@0.127/build/three.js"></script>
<!-- OrbitControls.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.127/examples/js/controls/OrbitControls.js"></script>
<!-- DRACOLoader.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.127/examples/js/loaders/DRACOLoader.js"></script>
<!-- GLTFLoader.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.127/examples/js/loaders/GLTFLoader.js"></script>
<!-- RGBELoader.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.127/examples/js/loaders/RGBELoader.js"></script>

<div id="3dmain">


</div>

该示例将环境映射应用于Scene.environment。但是，您也可以遍历 glTF 对象并将其应用于每个材质的 envMap 属性。

【讨论】：

漂亮！！非常感谢。您应该始终为 HDR 场景设置色调映射。这个场景太亮了。 renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1;

以上是关于如何打开GLTF文件的主要内容，如果未能解决你的问题，请参考以下文章

surfer如何导出三维gltf文件

c4d怎么导入gltf格式？

如何在 C#/.Net 中使用 Forge 将 .SVF 文件转换为 .GLTF

Autodesk Forge 查看器 - GLTF 扩展

如何将 .gltf 文件与其他资产组合；用于 babylonjs 的 bin 和 png 文件

3D max 2014转换gltf