【Three.js基础学习】17.imported-models

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

课程回顾:

    如何在three.js 中引入不同的模型?

    1. 格式  (不同的格式)

    https://en.wikipedia.org/wiki/List_of_file_formats#3D_graphics // 请用外网打开

    如果想要加载一个模型,必须根据不同的标准选择格式

    OBJ FBX STL PLY 3DS GLTF

    COLLADA

    1.GLTF (使用这个) 会得到PBR材料 ,是基于物理的渲染材料,转化成网格标准材质

    https://github.com/KhronosGroup/glTF-Sample-Models

    // 将所需要的模型放到静态文件中,这取决与你要用什么

    例如:static/models/Duck

    这里有四个文件 对应格式 gltf ,gltf-binary(二进制),gltf-draco和gltf-embedded(嵌入式)

    我们要知道怎么用,这些格式各有特点,取决于我们的需求,可以利用对方的特点和优势

    2.如何在3D使用?

    使用加载器 ,实时上我们之前使用了加载器,如:纹理加载器,字体加载器等

    import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js

    gltfLoader.load()

    将模型添加到场景中

    scene.add(gltf.scene)

    3.Draco压缩

    Draco 比默认版本更加轻

    压缩应用于缓冲数据,通常是几何体

    Website: https://google.github.io/draco/

    Git repository: https://github.com/google/draco

    必须在GLTF之前实例化它

    为什么更快?

    draco压缩会将一部分js代码放到CPU上执行 使用WebAssembly和工人。

    相当于两个线程一起工作

    setDecoderPath

    4.将DracoLoader实例给予glTFLoader加载器

    setDRACOLoader

    5. 什么时候使用draco版本

    首先要DRACOLoader.js这个类,其次 在静态中把draco文件copy上去(解码器)

    文件更大时候,更适合使用,这样压缩版本使用 文件更小,节约

    6.冻结

    若是一个巨大的几何体,使用WebAssembly和工人时候,会加载好几秒,也就是冻结

    7.animations

    如何处理动画

    要播放动画需要 动画混合器

    new THREE.AnimationMixer()

    8.three.js3D编辑器

    搜索three.js.edito,点击第一个 或者

    https://threejs.org/editor/

    在这个微型在线模型编辑器中,可以将模型文件拖到这里 快速查看模板是否符合自己需要

    Duck.glb


一、代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import * as dat from 'lil-gui'/*** Base*/
// Debug
const gui = new dat.GUI()// Canvas
const canvas = document.querySelector('canvas.webgl')// Scene
const scene = new THREE.Scene()/* Models
*/
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')  // 要将models中的文件放到静态文件中 (注意要将数据放到models下)const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)let mixer = nullgltfLoader.load(// '/models/Duck/glTF/Duck.gltf', // 2.// '/models/FlightHelmet/glTF/FlightHelmet.gltf', // 会遇到将模型放到场景中,显示不全 1. 2.// '/models/Duck/glTF-Draco/Duck.gltf',  // draco 压缩 版本 2.'/models/Fox/glTF/Fox.gltf',  // 实现动画 会动的狐狸(gltf)=>{console.log(gltf)// 这里注意若使用 for of 会造成循环混乱// 1.初级使用, 让我们知道gltf 加载了什么,怎么加载// 所以可以使用white 或者拓展运算符// const children = [...gltf.scene.children]// for(const child of children){//     scene.add(child)// }// 2.当然上面是为了理解,也可以一行代码搞定// scene.add(gltf.scene)// 3.实现狐狸动画mixer = new THREE.AnimationMixer(gltf.scene) // 动画混合器const action = mixer.clipAction(gltf.animations[2]) // 动画剪辑器 clipAction  animations[0] 通过控制台可以看到狐狸关键帧数据,抬腿,摇头等等,action.play() // 开始 同时需要在更新时间时候 更新关键帧gltf.scene.scale.set(0.025,0.025,0.025)scene.add(gltf.scene)},()=>{console.log('progress')},()=>{console.log('error')}
)/*** Floor*/
const floor = new THREE.Mesh(new THREE.PlaneGeometry(10, 10),new THREE.MeshStandardMaterial({color: '#444444',metalness: 0,roughness: 0.5})
)
floor.receiveShadow = true
floor.rotation.x = - Math.PI * 0.5
scene.add(floor)/*** Lights*/
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
scene.add(ambientLight)const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.set(1024, 1024)
directionalLight.shadow.camera.far = 15
directionalLight.shadow.camera.left = - 7
directionalLight.shadow.camera.top = 7
directionalLight.shadow.camera.right = 7
directionalLight.shadow.camera.bottom = - 7
directionalLight.position.set(5, 5, 5)
scene.add(directionalLight)/*** Sizes*/
const sizes = {width: window.innerWidth,height: window.innerHeight
}window.addEventListener('resize', () =>
{// Update sizessizes.width = window.innerWidthsizes.height = window.innerHeight// Update cameracamera.aspect = sizes.width / sizes.heightcamera.updateProjectionMatrix()// Update rendererrenderer.setSize(sizes.width, sizes.height)renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})/*** Camera*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(2, 2, 2)
scene.add(camera)// Controls
const controls = new OrbitControls(camera, canvas)
controls.target.set(0, 0.75, 0)
controls.enableDamping = true/*** Renderer*/
const renderer = new THREE.WebGLRenderer({canvas: canvas
})
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))/*** Animate*/
const clock = new THREE.Clock()
let previousTime = 0const tick = () =>
{const elapsedTime = clock.getElapsedTime()const deltaTime = elapsedTime - previousTimepreviousTime = elapsedTime// Updata mixerif(mixer != null){mixer.update(deltaTime)}// Update controlscontrols.update()// Renderrenderer.render(scene, camera)// Call tick again on the next framewindow.requestAnimationFrame(tick)
}tick()

二、知识点

1.格式以及引用模型

    OBJ FBX STL PLY 3DS GLTF

    COLLADA

 有不同的格式这里使用GLTF

GLTF

对应格式 gltf ,gltf-binary(二进制),gltf-draco和gltf-embedded(嵌入式)

如何使用

   import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js

    gltfLoader.load()

    将模型添加到场景中

    scene.add(gltf.scene)

2.Draco压缩

如何使用

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

const dracoLoader = new DRACOLoader()

dracoLoader.setDecoderPath('/draco/')  // 要将models中的文件放到静态文件中 (注意要将数据放到models下)

3.动画

 new THREE.AnimationMixer() 动画混合器

clipAction 动画剪辑器

play 更新关键帧 同时要配合更新的时间使用

4.效果

1.鸭子关键代码 ,没有用到draco压缩

// modelsconst gltfLoader = new GLTFLoader()gltfLoader.load('/models/Duck/glTF/Duck.gltf', // 2.(gltf)=>{console.log(gltf)//    const children = [...gltf.scene.children]//     for(const child of children){//         scene.add(child)//     }scene.add(gltf.scene)}
)

2.人像

const gltfLoader = new GLTFLoader()
// gltfLoader.setDRACOLoader(dracoLoader)let mixer = nullgltfLoader.load(// '/models/Duck/glTF/Duck.gltf', // 2.'/models/FlightHelmet/glTF/FlightHelmet.gltf', // 会遇到将模型放到场景中,显示不全 1. 2.(gltf)=>{console.log(gltf)//    const children = [...gltf.scene.children]for(const child of gltf.scene.children){scene.add(child)}}
)

会看到加载进去的不完整

const gltfLoader = new GLTFLoader()
// gltfLoader.setDRACOLoader(dracoLoader)gltfLoader.load(// '/models/Duck/glTF/Duck.gltf', // 2.'/models/FlightHelmet/glTF/FlightHelmet.gltf', // 会遇到将模型放到场景中,显示不全 1. 2.(gltf)=>{console.log(gltf)const children = [...gltf.scene.children]for(const child of children){scene.add(child)}// scene.add(gltf.scene) //两种方式都可以}
)

3.draco压缩使用 鸭子

const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/') const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)// let mixer = nullgltfLoader.load('/models/Duck/glTF-Draco/Duck.gltf',  // draco 压缩 版本 2., // 会遇到将模型放到场景中,显示不全 1. 2.(gltf)=>{console.log(gltf)//    const children = [...gltf.scene.children]// for(const child of children){//     scene.add(child)// }scene.add(gltf.scene)}
)

4.狐狸


// models
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/') const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)let mixer = nullgltfLoader.load(// '/models/Duck/glTF/Duck.gltf', // 2.
//    '/models/FlightHelmet/glTF/FlightHelmet.gltf', // 会遇到将模型放到场景中,显示不全 1. 2.
'/models/Fox/glTF/Fox.gltf',  // 实现动画 会动的狐狸(gltf)=>{console.log(gltf)mixer = new THREE.AnimationMixer(gltf.scene) // 动画混合器const action = mixer.clipAction(gltf.animations[2]) // 动画剪辑器 clipAction  animations[0] 通过控制台可以看到狐狸关键帧数据,抬腿,摇头等等,action.play() // 开始 同时需要在更新时间时候 更新关键帧gltf.scene.scale.set(0.025,0.025,0.025)scene.add(gltf.scene)}
)

注意更新时间

const tick = () =>
{const elapsedTime = clock.getElapsedTime()const deltaTime = elapsedTime - previousTimepreviousTime = elapsedTime// Updata mixerif(mixer != null){mixer.update(deltaTime)}// Update controlscontrols.update()// Renderrenderer.render(scene, camera)// Call tick again on the next framewindow.requestAnimationFrame(tick)
}

综合

效果


总结

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

UART编程框架详解

1. UART介绍 UART:通用异步收发传输器(Universal Asynchronous Receiver/Transmitter),简称串口。 调试:移植u-boot、内核时,主要使用串口查看打印信息 外接各种模块 1.1 硬件知识_UART硬件介绍 UART的全称是Unive…

Unity UGUI 之 事件接口

本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本,请注意分别 1.什么是事件接口&…

找实习,三本计算机 > 985文科 ?

2018年3月,大三下学期。 写了一段时间博客以后,竟有人说要内推我。 我说我大三,还没毕业,准备暑假去找实习。 网上认识的朋友建议我去春招实习试试,还有些厂在走流程中,还有机会。 我婉拒了&#xff0c…

Centos 8 配置网络源

备份当前的软件源配置文件: sudo cp -a /etc/yum.repos.d /etc/yum.repos.d.bak 清理原有的 yum 仓库配置信息: sudo rm -f /etc/yum.repos.d/*.repo 获取阿里云的 CentOS 8 源配置: sudo curl -o /etc/yum.repos.d/CentOS-Base.repo ht…

Shell编程之正则表达式与文本处理器2--sed

目录 一、sed 工具 1. 概述 2. sed 原理 3、常用操作选项 3.1 常用选项 3.2 操作命令 4. sed 的使用 5. 具体操作 5.1 打印输出 p 5.1.1 显示范围、单行、指定行输出、指定往后加几行输出 5.1.2 显示奇偶行 5.1.3 将指定内容的行打印出来 5.1.4 只输出行号…

《python程序语言设计》第6章12题 显示字符,使用下面的函数头,编写一个打印字符的函数

def printChars(ch1, ch2, numberPerLine):a ord(ch1)b ord(ch2)count 0for i in range(a, b 1):count 1print(chr(i), end" ")if count % numberPerLine 0:print()printChars("1", "Z", 10)

UDP/TCP协议解析

我最近开了几个专栏,诚信互三! > |||《算法专栏》::刷题教程来自网站《代码随想录》。||| > |||《C专栏》::记录我学习C的经历,看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

FTTransformer,一个很能打的模型

FTTransformer,是一个BERT模型架构在结构化数据集上的迁移变体。和BERT一样,它非常能打。 它可能是少数能够在大多数结构化数据集上取得超过或者匹配LightGBM结果的深度模型。 本范例我们将应用它在来对Covertype植被覆盖数据集进行一个多分类任务。 我们…

k8s通过应用修改yaml文件修改容器时区

通过挂载,把本地的/etc/localtime挂载到容器中: apiVersion: apps/v1 kind: Deployment metadata:name: seb-algorithmsnamespace: jiaoda spec:replicas: 1selector:matchLabels:app: seb-algorithmstemplate:metadata:labels:app: seb-algorithmsspec…

虚幻引擎(Unreal Engine)深入探索与应用实践

目录 引言 虚幻引擎基础 引擎概述 核心组件 安装与配置 准备工作 安装步骤 常见问题 应用实践 游戏开发 影视特效 数字孪生 虚幻引擎中的C示例 如何在虚幻引擎中使用C代码 引言 虚幻引擎(Unreal Engine,简称UE)作为目前游戏开…

Ruoyi-WMS部署

所需软件 1、JDK:8 安装包:https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.htmlopen in new window 安装文档:https://cloud.tencent.com/developer/article/1698454open in new window 2、Redis 3.0 安装包&a…

ZStack Cloud 5.1.8正式发布——GPU运维、物理机硬件监控、克隆云主机网络配置三大亮点简析

云轴科技ZStack Cloud云平台是遵循“简单、弹性、健壮、智能”的“4S”特性的私有云和无缝混合云产品。ZStack Cloud 5.1.8版本正式发布,从用户业务场景和实际需求出发,丰富和完善平台功能,推出一系列重要功能和多项改进,覆盖云主…

Oracle集群RAC磁盘管理命令asmcmd的使用

文章目录 ASM磁盘共享简介ASM磁盘共享的优势ASM磁盘组成ASM磁盘共享的应用场景Asmcmd简介Asmcmd的功能Asmcmd的命令Asmcmd的使用注意事项Asmcmd运行模式交互模式运行非交互模式运行ASMCMD命令分类实例管理命令:文件管理命令:磁盘组管理命令:模板管理命令:文件访问管理命令:…

产线工控安全新纪元:主机加固与防勒索病毒双剑合璧

在这个数字时代,企业面临的最大挑战之一就是如何确保数据的安全。随着勒索病毒等恶意软件的不断进化,传统的安全措施已经难以应对这些新型威胁。深信达公司的MCK主机加固系统,以其独特的内核级签名校验技术和深度学习驱动的业务场景白名单策略…

SpringMVC中的常用注解

目录 SpringMVC的定义 SpringMVC的常用注解 获取Cookie和Session SpringMVC的定义 Spring Web MVC 是基于 Servlet API 构建的原始 Web 框架,从⼀开始就包含在 Spring 框架中。它的正式名称“Spring Web MVC”来⾃其源模块的名称(Spring-webmvc),但它…

[k8s源码]5.自己写一个informer控制器

k8s的informer控制器有一个informer,有一个indexer,还需要一个队列来存储从kubernetes API获取的信息。 初始化自己的informer的结构 type Controller struct {indexer cache.Indexerinformer cache.Controllerqueue workqueue.RateLimitingInterf…

C#基础——类

类 类是一个数据类型的蓝图。构成类的方法和变量称为类的成员,对象是类的实例。类的定义规定了类的对象由什么组成及在这个对象上可执行什么操作。 class 类名 { (访问属性) 成员变量; (访问属性) 成员函数; } 访问属性:public(公有的&…

Python的mouse库防止计算机进入睡眠状态或锁定屏幕

目录 引言 安装 mouse 库 实现步骤 代码解析 注意事项 引言 在工作或娱乐过程中,我们有时会遇到计算机进入睡眠状态或锁定屏幕的情况,这会打断我们的任务.通过编写一个小程序,可以自动移动鼠标,从而防止计算机进入睡眠状态或锁定屏幕.本文将介绍如何使用 Python 的 mouse…

ElasticSearch(四)— 数据检索与查询

一、基本查询语法 所有的 REST 搜索请求使用_search 接口,既可以是 GET 请求,也可以是 POST请求,也可以通过在搜索 URL 中指定索引来限制范围。 _search 接口有两种请求方法,一种是基于 URI 的请求方式,另一种是基于…

python项目通过docker部署到Linux系统并实现远程访问

背景需求:在Windows系统编写了简单的python代码,希望能通过docker打包到Linux Ubuntu系统中,并运行起来,并且希望在本地Windows系统中能通过postman访问。 目录 一、原本的python代码 二、创建一个简单的Flask应用程序 三、创…