Vue3-TypeScript-Threejs:导入外部的glb格式3D模型

一、直接上代码,在vue3-typescript-threejs 项目 导入外部的glb格式3D模型

极简代码,快速理解

<template>
    <div ref="container"></div>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import * as THREE from 'three';
  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
  const container:any = ref(null);

  // glb模型路径,需要放在public目录下
  const url = "../../../public/3d/chair.glb";

    onMounted(() => {
        const loader: any = new GLTFLoader();
        
        // 创建场景
        const scene: any = new THREE.Scene();

        // glb 模型文件路径

        loader.load(
        url,
        (gltf: any) => {
            // 成功加载模型后执行的操作
            const model = gltf.scene;
            // 将模型添加到场景中
            scene.add(model);
        },
        (xhr: any) => {
            // 模型加载过程中执行的操作
            console.log(`30${(xhr.loaded / xhr.total) * 100}% 已加载`);
        },
        (error: any) => {
            // 模型加载失败执行的操作
            console.error(`34模型加载失败:${error}`);
        }
        );

    });
  
  </script>
  

二、直接上代码,在vue3-typescript-threejs 项目 导入外部的glb格式3D模型,展示在页面上

<template>
    <div></div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  import * as THREE from "three";
  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
  
  export default defineComponent({
    mounted() {
      // 创建场景
      const scene = new THREE.Scene();

      const url = "../../../public/3d/chair.glb";
  
      // 创建相机
      const camera = new THREE.PerspectiveCamera(
        135,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      // 添加环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);
  
      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
  
      // 加载 glb 格式的 3D 模型
      const loader = new GLTFLoader();
      loader.load(
        url,
        (gltf) => {
          // 加载成功后的回调函数
          const model = gltf.scene;
          model.scale.set(0.8, 0.8, 0.8); // 缩小模型
          const box = new THREE.Box3().setFromObject(model);
          const center = box.getCenter(new THREE.Vector3());
          model.position.sub(center); // 将模型位置移到原点处
          scene.add(model);
        },
        (xhr) => {
          // 加载过程中的回调函数
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        (error) => {
          // 加载失败的回调函数
          console.error("Failed to load model", error);
        }
      );
  
      // 渲染场景
      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
  
      animate();
    },
  });
  </script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>

blender软件展示效果

导入后展示效果 ,应该是没有导入材质、贴图,后续完善后更新本文

三、过程记录

记录一、vue3项目,3D模型需要放在public目录下,否则找不到文件404

确认.glb文件的路径是否正确。
如果你使用的是相对路径,确保相对路径与 Vue3 项目中public目录下的文件路径一致。

记录二、GLTFLoader导入模型 和 three/examples/jsm/loaders/GLTFLoader 导入模型有什么区别

------AI回答一---------

GLTFLoader 是 Three.js 官方提供的加载 glTF 格式模型的模块,它已经集成在了 Three.js 中,可以直接使用。而 three/examples/jsm/loaders/GLTFLoader 是 Three.js 官方提供的一个案例,它是基于 GLTFLoader 开发的,同时也是 Three.js 的模块。

它们的主要区别在于:

1、GLTFLoader 是 Three.js 核心库的一部分,所以它的稳定性和兼容性更高。而 three/examples/jsm/loaders/GLTFLoader 是一个案例,可能更新不及时或者不被支持的情况较多。

2、GLTFLoader 是一个基础模块,只提供了最基本的 glTF 模型加载功能。而 three/examples/jsm/loaders/GLTFLoader 是在 GLTFLoader 基础上开发的,提供了一些更高级的功能,例如模型的动画、材质等。

总体来说,GLTFLoader 适合基础需求,而 three/examples/jsm/loaders/GLTFLoader 适合高级需求。但是,需要注意的是,如果使用 three/examples/jsm/loaders/GLTFLoader,需要将其引入到项目中,增加项目的体积。

--------AI回答二------

GLTFLoader导入模型和three/examples/jsm/loaders/GLTFLoader导入模型的区别如下:

作用不同 。GLTFLoader主要是用来载入.gltf/.glb格式的3D模型文件,three/examples/jsm/loaders/GLTFLoader主要是用来载入.obj格式的3D模型文件。
使用方式不同 。GLTFLoader的使用方式为:先新建一个GLTFLoader对象,然后调用该对象的load()方法,传入模型文件的路径,即可载入模型。three/examples/jsm/loaders/GLTFLoader的使用方式为:先新建一个GLTFLoader对象,然后传入一个配置对象进行初始化,再调用该对象的parse()方法,传入需要解析的obj模型数据,即可解析模型。

记录三、webgl threejs 引入glb模型后可以通过鼠标旋转模型吗

是的,通过Three.js和WebGL,您可以轻松地在网页上使用鼠标旋转GLB模型。

待补充

记录四、threejs 引入 glb模型,材质 和 贴图需要单独引入吗

-------AI回答一-------

在Three.js中引入GLB模型时,模型的材质和贴图会自动被加载。如果您在模型中定义了纹理和材质,Three.js会自动加载它们。如果您需要单独加载材质或贴图,可以使用Three.js的加载器来加载它们,然后将它们应用到您的模型中。

--------AI回答二--------

在Three.js中,引入GLB模型后,材质和贴图通常需要单独引入。

在Three.js中,GLB模型是一种二进制格式的3D模型文件,包含了模型的几何形状、材质和贴图等数据。当使用GLB模型时,通常需要将材质和贴图单独引入,以实现模型的完整呈现。

对于材质,可以在Three.js中创建材质对象,并将材质应用到模型上。例如,可以使用THREE.MeshBasicMaterial、THREE.MeshLambertMaterial等基本材质类型,或者使用THREE.ShaderMaterial等自定义材质类型。

对于贴图,可以在Three.js中使用TextureLoader对象加载贴图文件,并将贴图设置到材质的map属性中。例如,可以使用THREE.TextureLoader加载一张图片,并将其设置为模型的贴图。

四、欢迎交流指正

五、参考链接

WebGl-Blender:建模 / 想象成形 / 初识 Blender-CSDN博客

WebGL-Vue3-TS-Threejs:基础练习 / Javascript 3D library / demo-CSDN博客

WebGL:基础练习 / 简单学习 / demo / canvas3D-CSDN博客

canvas:理解canvas / 基础使用 / 实用demo-CSDN博客

webpack 导入 three.js,引入模型glb/gltf 404_喵咪那个汪~的博客-CSDN博客

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux应用层点亮硬件的LED灯

一 应用层操作硬件的两种方法 应用层想要对底层硬件进行操控&#xff0c;通常可以通过两种方式&#xff1a; /dev/目录下的设备文件&#xff08;设备节点&#xff09;&#xff1b;/sys/目录下设备的属性文件。 具体使用哪种方式需要根据不同功能类型设备进行选择&#xff0c;通…

人工智能与充电技术:携手共创智能充电新时代

人工智能与充电技术&#xff1a;携手共创智能充电新时代 摘要&#xff1a;本文探讨了人工智能与充电技术的结合及其在未来充电设施领域的应用。通过分析智能充电系统的技术原理、优势以及挑战&#xff0c;本文展望了由人工智能驱动的充电技术为未来电动交通带来的巨大变革与机…

No202.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

Leetcode—4.寻找两个正序数组的中位数【困难】

2023每日刷题&#xff08;二十九&#xff09; Leetcode—4.寻找两个正序数组的中位数 直接法实现代码 int mid, mid1, mid2; bool findmid(int n, int k, int x) {if(n % 2 1) {if(k n / 2) {mid x;return true;}} else {if(k n / 2 - 1) {mid1 x;} else if(k n / 2) {…

3DMAX渲染AO图的三种方法

3DMAX渲染AO图的三种方法 使用Mental Ray渲染AO 1. 我为这个演示制作了一个非常简单的场景。该场景包含一个茶壶、一个盒子和一个球体。我还应用了一些材质&#xff0c;并将渲染引擎设置为Mental Ray。 2. 我还在场景中添加并定位了几个泛光灯。 3. 我选择了Mental Ra…

主题讲座:全球增材制造现状与未来(暨香港科技大学广州|智能制造学域2024博士学位全额奖学金项目)

时间&#xff1a;2023 年11月16日&#xff08;星期四&#xff09;14:30 地点&#xff1a;合肥工业大学 学术会议中心三楼报告厅 主讲嘉宾&#xff1a;陈模军 助理教授 https://facultyprofiles.hkust-gz.edu.cn/faculty-personal-page/CHEN-Mojun/mjchen 报名表直达&#xff1…

数字化时代,企业如何增加产品销售额

2023作为提振消费年&#xff0c;国民宏观经济环境正在复苏&#xff0c;而数字化技术的进步也使消费者的购买方式发生了翻天覆地的变化&#xff0c;对于企业而言&#xff0c;应该如何顺势而上增加产品销售额&#xff0c;成为其成功的关键。 今天媒介盒子就来和大家聊聊企业如何…

DVWA - 3

文章目录 XSS&#xff08;Dom&#xff09;lowmediumhighimpossible XSS&#xff08;Dom&#xff09; XSS 主要基于JavaScript语言进行恶意攻击&#xff0c;常用于窃取 cookie&#xff0c;越权操作&#xff0c;传播病毒等。DOM全称为Document Object Model&#xff0c;即文档对…

笔试题之指针和数组的精讲

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

谁输了,就往衣服里面倒水,欲望秀场与亲密的操控,当一位女博士生成为主播

在澎湃新闻上&#xff0c;读到香港大学博士生王怡霖的一篇自述文章。 为了研究秀场直播&#xff0c;她跟一家公会签约&#xff0c;当了秀场主播。 感谢王怡霖&#xff0c;愿意做这样的研究&#xff0c;为我们提供了解社会现实的一个观察视角。 三年主播体验观察下来&#xff0c…

SPI协议详解

SPI协议详解 文章目录 SPI协议详解前言一、SPI是什么&#xff1f;二、通信原理SPI 通信的 4 种工作模式 总结 前言 好久没写这种协议了&#xff0c;最近正好需要用到&#xff0c;便详细的复习一下。 一、SPI是什么&#xff1f; SPI是串行外设接口&#xff08;Serial Periphe…

25.4 MySQL 函数

1. 函数的介绍 1.1 函数简介 在编程中, 函数是一种组织代码的方式, 用于执行特定任务. 它是一段可以被重复使用的代码块, 通常接受一些输入(参数)然后返回一个输出. 函数可以帮助开发者将大型程序分解为更小的, 更易于管理的部分, 提高代码的可读性和可维护性.函数在编程语言…

苍穹外卖-day10

苍穹外卖-day10 课程内容 Spring Task订单状态定时处理WebSocket来单提醒客户催单 功能实现&#xff1a;订单状态定时处理、来单提醒和客户催单 订单状态定时处理&#xff1a; 来单提醒&#xff1a; 客户催单&#xff1a; 1. Spring Task 1.1 介绍 Spring Task 是Spring框…

剑指 Offer 07. 重建二叉树

title: 剑指 Offer 07. 重建二叉树 tags: 二叉树递归 categories:算法剑指 Offer 题目描述 输入某二叉树的前序遍历和中序遍历的结果&#xff0c;请构建该二叉树并返回其根节点。 假设输入的前序遍历和中序遍历的结果中都不含重复的数字。 示例 1: Input: preorder [3,9,…

人工智能与新能源电动车的融合——技术创新引领未来交通革命

人工智能与新能源电动车的融合——技术创新引领未来交通革命 摘要&#xff1a;本文探讨了人工智能与新能源电动车领域的技术融合&#xff0c;分析了其在智能驾驶、电池技术、充电设施等方面的应用与创新。文章指出&#xff0c;这两大技术的结合将重塑交通产业&#xff0c;为我…

PTE-RS 练习(二)

目录 内容分漏多漏少没有什么关系 Write Essay 感知比记忆强的多 记住骨干&#xff0c;剩下脑补 套上有含义的帽子 &#xff0c; 套上了信息就会很牢固 谁在说&#xff0c;为什么会说这句话 听不懂那个文本如何处理 要产生表达欲 会分为很多的块 做好意群分割…

第一百七十二回 SegmentedButton组件

文章目录 1. 概念介绍2. 使用方法2.1 SegmentedButton2.2 ButtonSegment 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"SearchBar组件"相关的内容&#xff0c;本章回中将 介绍SegmentedButton组件.闲话休提&#xff0c;让我们一起Tal…

【C++】类和对象(4)--析构函数

一 概念 通过前面构造函数的学习&#xff0c;我们知道一个对象是怎么来的&#xff0c;那一个对象又是怎么没呢的&#xff1f; 析构函数&#xff1a;与构造函数功能相反&#xff0c;析构函数不是完成对对象本身的销毁&#xff0c;局部对象销毁工作是由编译器完成的。而对象在销…

数据库操作入门:PyMongo 和 MongoDB 的基本用法

MongoDB MongoDB是一种流行的NoSQL数据库&#xff0c;它将数据存储在类似JSON的文档中&#xff0c;使数据库非常灵活和可扩展 PyMongo Python需要一个MongoDB驱动程序来访问MongoDB数据库。在本教程中&#xff0c;我们将使用MongoDB驱动程序 “PyMongo”。建议使用PIP来安装…

清理mac苹果电脑磁盘软件有哪些免费实用的?

苹果电脑是一款非常流行的操作系统设备&#xff0c;其稳定性和性能一直备受用户的喜爱。然而&#xff0c;随着时间的推移&#xff0c;我们使用电脑的过程中可能会发现磁盘上存储的数据越来越多&#xff0c;这不仅占用了宝贵的硬盘空间&#xff0c;还可能导致电脑运行变慢。因此…