three.js加载gltf模型

最新推荐文章于 2024-09-02 17:27:54 发布

bcbobo21cn

最新推荐文章于 2024-09-02 17:27:54 发布

阅读量639

点赞数

分类专栏： web前端 GIS 文章标签： javascript 前端 gltf

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/130275764

版权

GIS 同时被 2 个专栏收录

166 篇文章 21 订阅

订阅专栏

web前端

150 篇文章 1 订阅

订阅专栏

这段代码展示了如何在HTML页面中使用three.js库和GLTFLoader.js模块来加载gltf格式的3D模型。两个不同的HTML结构尝试导入模型，但似乎都没有成功。加载过程包括创建场景，实例化GLTFLoader，然后加载并添加模型到场景中。

摘要由CSDN通过智能技术生成

基本代码如下；

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>gltf 示例</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
  <script src="three.js-dev/build/three.js"></script>
  <script src="three.js-dev/examples/jsm/loaders/GLTFLoader.js"></script>

</head>
 
<body>
  <script>
 
var scene = new THREE.Scene();
const loader = new GLTFLoader();

loader.load( 'lfbz.glb', function ( gltf ) {
  console.log('控制台查看加载gltf文件返回的对象结构',gltf);
  console.log('gltf对象场景属性',gltf.scene);
  // 返回的场景对象gltf.scene插入到threejs场景中
  scene.add( gltf.scene );
})
 
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>gltf 示例444</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>

  <script type="module">

import {} from "three.js-dev/build/three.js";
import { GLTFLoader } from "three.js-dev/examples/jsm/loaders/GLTFLoader.js";
 
var scene = new THREE.Scene();
const loader = new GLTFLoader();

loader.load( 'lfbz.glb', function ( gltf ) {
  console.log('控制台查看加载gltf文件返回的对象结构',gltf);
  console.log('gltf对象场景属性',gltf.scene);
  // 返回的场景对象gltf.scene插入到threejs场景中
  scene.add( gltf.scene );
})
 
  </script>

</head>
 
<body>

</body>
</html>

它有2个目录，js和jsm，下面都有GLTFLoader.js；

没加载出来；有时间继续；