图形化开发（六）03-Three.js之导入模型——glTF格式文件导入，3D模型的使用 & vs code之glTF Tools插件的使用方法

最新推荐文章于 2023-12-10 10:35:16 发布
最新推荐文章于 2023-12-10 10:35:16 发布
阅读量7k 收藏 35
点赞数 4
分类专栏： 可视化 工具 文章标签： vscode html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/120253615
版权
工具 同时被 2 个专栏收录
163 篇文章 6 订阅
订阅专栏
可视化
130 篇文章 77 订阅
订阅专栏

图形化开发（六）03-Three.js之导入模型——glTF格式文件导入，3D模型的使用 & vs code之glTF Tools插件的使用方法

glTF格式文件导入

glTF格式的3D格式文件是官方推荐的使用的格式，这种格式的文件我们可以在sketchfab官网下载，这是一个国外比较知名的模型网站。

loader地址：

https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js

下载地址：

https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount

  1. 首先，将GLTFLoader加载器插件引入到页面，插件在官方包的地址/examples/js/loaders/，一些文件的导入插件都在这一个文件夹内，大家有兴趣可以研究一下：

    <script src="../js/loaders/GLTFLoader.js"></script>

  2. 然后创建一个加载器：

    var loader = new THREE.GLTFLoader();

  3. 使用加载器去加载模型，并调节一下模型大小在场景内展示：

    loader.load('../js/models/gltf/scene.gltf', function (gltf) {
    gltf.scene.scale.set(.1,.1,.1);
    scene.add(gltf.scene);
});

只要碰到loader，一定要使用dev server

3D模型使用步骤

实例文件夹

在这里插入图片描述

1、下载GLTFLoader.js文件，并在index.html文件中进行引入

https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>我的第一个Three.js案例</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="draw()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script> 
<script src="./gltfloader.js"></script>
    <!-- control.js  控制视角旋转的插件 -->    
<script src="./control.js"></script>
<script src="http://www.wjceo.com/lib/js/libs/stats.min.js"></script>
<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>
<script src="./index.js"></script> 
</body>
</html>
2、打开模型地址，进行选择模型

https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount

3、选中一个进入，进行下载

在这里插入图片描述

下载的3D模型文件

在这里插入图片描述

vs code之Live Server插件的使用方法
1、安装

在这里插入图片描述

2、找到scene.gltf模型文件后，右击并点击列表的【Preview 3D Model】

在这里插入图片描述

3、在创建模型initModel中，加载外部的gltf文件：

使用加载器去加载模型，并调节一下模型大小在场景内展示：

loader.load('../js/models/gltf/scene.gltf', function (gltf) {
    gltf.scene.scale.set(.1,.1,.1);
    scene.add(gltf.scene);
});

只要碰到loader，一定要使用dev server

index.js

var renderer, camera, scene, gui, stats, ambientLight, directionalLight, control;

function initRender() {
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    //告诉渲染器需要阴影效果
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
    document.body.appendChild(renderer.domElement);
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 100, 200);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
}

function initScene() {
    scene = new THREE.Scene();
}

function initGui() {
    //声明一个保存需求修改的相关数据的对象
    gui = {};
    var datGui = new dat.GUI();
    //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
}

function initLight() {
    ambientLight = new THREE.AmbientLight("#111111", 20); // 环境光  
    scene.add(ambientLight);
    directionalLight = new THREE.DirectionalLight("#ffffff", 100); // 太阳
    directionalLight.position.set(40, 60, 10);
    directionalLight.shadow.camera.near = 1; //产生阴影的最近距离
    directionalLight.shadow.camera.far = 400; //产生阴影的最远距离
    directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
    directionalLight.shadow.camera.right = 50; //最右边
    directionalLight.shadow.camera.top = 50; //最上边
    directionalLight.shadow.camera.bottom = -50; //最下面
    //这两个值决定生成阴影密度 默认512
    directionalLight.shadow.mapSize.height = 1024;
    directionalLight.shadow.mapSize.width = 1024;
    //告诉平行光需要开启阴影投射
    directionalLight.castShadow = true;
    scene.add(directionalLight);
}

function initModel() {
    //底部平面
    var planeGeometry = new THREE.PlaneGeometry(100, 100);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: '#fff',
        side: THREE.DoubleSide
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.y = -.1;
    plane.receiveShadow = true; //可以接收阴影
    scene.add(plane);


    // 创建gltf加载器
    var loader = new THREE.GLTFLoader();
    loader.load('./3d/scene.gltf', function (gltf) {
        gltf.scene.scale.set(50, 50, 50);
        scene.add(gltf.scene);
    });
}

function initStats() {
    stats = new Stats();
    document.body.appendChild(stats.dom);
}

function initControl() {
    control = new THREE.OrbitControls(camera, renderer.domElement);
}

function render() {
    control.update();
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    //更新控制器
    render();
    //更新性能插件
    stats.update();
    requestAnimationFrame(animate);
}

function draw() {
    initGui();
    initRender();
    initScene();
    initCamera();
    initLight();
    initModel();
    initStats();
    initControl();
    animate();
    renderer.setClearColor('rgb(135,206,250)', 1.0);
    window.onresize = onWindowResize;
}
4、直接本地打开index.html文件，会存在跨域问题

在这里插入图片描述

5、通过dev server进行打开

在这里插入图片描述

附

因为是感光材料，可以修改属性，改变效果

index.js

function initLight() {
    ambientLight = new THREE.AmbientLight("#111111", 20); // 环境光  
    scene.add(ambientLight);
    directionalLight = new THREE.DirectionalLight("#ffffff", 100); // 太阳
}
viceen
关注
  • 4
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【three.js】如何加载外部gltf模型
qq_38196449的博客
06-16 189
你在three.js官方文件的**examples/jsm/loaders/**目录下，可以找到一个文件，这个文件就是three.js的一个扩展库，专门用来加载gltf格式模型加载器。
ThreeJs加载gltf模型
weixin_43269207的博客
02-25 2189
模型下载地址：https://sketchfab.com GLFT模型导入：上面模型解压后整个文件存放在public文件夹下。不要只放glft文件。不然会报Float32Array 。 var loader = new GLTFLoader(); loader.load( "/static/model/city/scene.gltf", function (gltf) { console.log("gltf", gltf); .
threejs 中的加载器
yinge0508的博客
09-21 248
threejs 中的加载器
GLTFLoader.js
04-16
GLTFLoader.js
VSCode查看gltf文件（glTF Tools插件）
fengjinghong的博客
03-24 3880
需要安装插件：glTF Tools 参考文章： 在打开的gltf文件中点击鼠标右键，然后选择如下图的按钮，即可打开预览。
10 Loaders加载模型到Three.js
现在学习也不晚
10-08 1万+
现在市面上的3D模型有上百种，每一种的格式都有不同的用途，不同的功能和复杂程度。尽管Three.js提供了很多的加载器，但选择正确的格式和工作流程将在以后节省时间和成本。而且某些格式难以使用，效率低下或者目前还未完全支持。 推荐使用的模型格式 官方推荐我们使用的3D模型的格式为glTF，由于glTF专注于传输，因此它的传输和解析的速度都很快。glTF模型功能包括：网格，材质，纹理，蒙皮，骨...
three.js GLTFLoader学习案例
最新发布
12-31
帮助更多希望入门three.js的朋友学习 gltf 与 glb应用技术
three.js加载gltf模型
09-17
在本文中，我们将深入探讨如何使用three.js库加载GLTF（GL Transmission Format）模型，并结合Vue.js框架构建一个完整的Web应用程序。GLTF是一种开放标准的3D资产交换格式，广泛用于WebGL和WebVR场景，因为它能高效...
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Three.js导入gltf模型案例，配天空盒，配背景音，结构清晰，可运行
08-11
运用Three.js导入gltf模型案例仿照人工智能绘画工具效果制作，AI概念图生成器 Disco Diffusion，输入关键词：星空下的向日葵花海，巨大的向日葵就开在山后，背后是万星璀璨的星空。把给出的 Prompts（提示/描述）由...
gltfviewer.zip_gltf viewer_gltf 模型下载_gltf格式_gltf模型下载_制作gltf网页
07-14
《gltfviewer.zip&mdash;&mdash;开启gltf模型的网页展示之旅》 gltf（GL Transmission Format）是一种高效、轻量级的3D模型格式，它旨在为Web平台提供一种标准化的方式来传输和显示3D内容。gltf格式被广泛接受，因为它能够...
three-gltf-viewer:使用three.js在WebGL中对glTF 2.0模型进行拖放预览
04-28
glTF查看器使用three.js和拖放界面在WebGL中预览glTF 2.0模型。 查看者：快速开始npm installnpm run devglTF 2.0资源已知的问题 Safari中有限的拖放支持。
threejs中添加GLTF模型
伪成年的博客
03-23 3477
1、引入GLTF加载器 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; 2、加载模型 getGltfModel(){ const loader = new GLTFLoader(); loader.load( '模型绝对位置.../model/Unity2GLTF.gltf', function ( gltf ) { let root = gltf.scene this.scene.add( root
Threejs——十、关于 gltf 模型的介绍、引入方法以及设置属性添加功能（结尾附代码）
NanChen的博客
07-11 5583
前端推荐使用 Blender 三维建模软件，模型推荐使用 gltf 或者 glb 文件。 后续会更新 Blender 的使用方法glTF（GL Transmission Format）是一种用于传输和加载 3D 模型的开放标准格式。它是由 Khronos Group 开发的，旨在提供一种轻量级、高效、可扩展的 3D 模型格式，以便在 Web 和移动设备等平台上实现快速加载和渲染。glTF 格式支持包括几何体、材质、纹理、动画和场景等多种 3D 模型元素，并且可以使用 JSON 格式进行序列化和压缩，从而减少
threejs加载.gltf文件(模型加载全流程)
u014291990的博客
12-10 3469
本节课，以gltf格式为例，给大家讲解加载外部三维模型的整个过程。场景、光源、渲染器、相机控件等前面说过基础代码，本节课不专门讲解，主要是把下面三部，给大家全流程演示一遍。
glTF模型相关操作
谢公屐的博客
07-31 730
glTF模型相关操作
Three.js基础入门系列（九）--导入3D模型
热门推荐
技术专家
03-25 1万+
先来学习今天的知识——Three.js导入3D模型 复杂的3D模型（比如制作一个飞机模型）一般都是用第三方建模工具生成，然后加载到Three.js中。 01 常用建模制作工具 3Dmax 链接地址：https://www.autodesk.com.cn/products/3ds-max/overview?referrer=%2Fproducts%2F3ds-max%2Foverview 最常见的3D建模软件，广泛应用于广告、影视、工业设计、建筑设计、三维动画、多媒体制作、
threeJS加载gltf模型
mmiaoChong的博客
12-12 6919
threeJS加载GLTF模型初体验主要代码模型网站 主要代码 import * as THREE from 'three' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' export default { name: 'Index', data() { re
Three.js的THREE.LOD如何加载gltf模型
qq_34144750的博客
12-03 819
这样，就可以在Three.js中使用THREE.LOD加载gltf模型了。
uniapp开发微信小程序使用three.js引入3d模型gltf格式得怎么使用
07-11
在UniApp中使用Three.js和引入3D模型（gltf格式）需要经过以下步骤： 1. 在UniApp项目中安装Three.js库。可以通过npm安装，使用以下命令： ``` npm install three ``` 或者直接将Three.js库文件拷贝到项目中。 2. 在Vue页面中引入Three.js库。可以在需要使用的页面的`&lt;script&gt;`标签中添加以下代码： ```javascript import * as THREE from &#39;three&#39; ``` 3. 创建一个渲染器和场景，并将渲染器添加到页面中的Canvas中。可以在Vue页面的`&lt;script&gt;`标签的`onLoad`方法中添加以下代码： ```javascript onLoad() { this.renderer = new THREE.WebGLRenderer({canvas: this.$refs.canvas}) this.scene = new THREE.Scene() } ``` 其中，`this.$refs.canvas`是指向页面中Canvas元素的引用，确保Canvas元素已经正确定义。 4. 加载并添加3D模型到场景中。在Vue页面的`&lt;script&gt;`标签的`onLoad`方法中添加以下代码： ```javascript onLoad() { // ... const loader = new THREE.GLTFLoader() loader.load(&#39;path/to/model.gltf&#39;, (gltf) =&gt; { this.scene.add(gltf.scene) }) } ``` 其中，`path/to/model.gltf`是你要加载的3D模型的路径。 5. 渲染场景。在Vue页面的`&lt;script&gt;`标签的`onReady`方法中添加以下代码： ```javascript onReady() { function animate() { requestAnimationFrame(animate) // 在这里更新和渲染场景中的内容 this.renderer.render(this.scene, this.camera) } animate() } ``` 确保相机（camera）已经定义并添加到场景中。 这些步骤将帮助你在UniApp中使用Three.js和引入3D模型（gltf格式）。记得根据你的具体需求进行相应的调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值