【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://www.mzph.cn/pingmian/50529.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

杭州东网约车管理再出行方面取得的显著成效

随着科技的飞速发展,网约车已成为人们日常出行的重要选择。在杭州这座美丽的城市,网约车服务更是如雨后春笋般蓬勃发展。特别是杭州东站,作为杭州的重要交通枢纽,网约车管理显得尤为重要。近日,沧穹科技郑重宣告已助力…

达梦数据库系列—33.日志总结

目录 1、SQL日志 SQL 日志开启 SQL日志分析 2、Redo日志 3、归档日志 联机配置归档 手动配置归档 归档信息的查看 清理归档日志 4、闪回 查看闪回功能状态 开启闪回 闪回查询 5、其他事件日志 数据库实例日志 DMAP进程日志 数据库备份日志 dmwatcher日志 dm…

[Python][字典]详细讲解

目录 0.什么是字典?1.创建字典2.查找key3.新增/修改元素4.删除元素5.遍历字典元素6.取出所有 key 和 value7.合法的key类型 0.什么是字典? 字典是一种存储键值对(K-V)的结构 但是key不能重复 以C/C的视角看,就是map注意: 一个字典…

【STM32本科毕业设计】基于STM32的多功能MP3播放器设计

目录 一. 概述二. 系统硬件设计2.1 整体设计思路2.2 硬件器件的选择2.2.1 MP3解码芯片选择 2.2.2 收音机芯片选择2.2.3 温度传感器选择2.2.4 彩灯驱动芯片选择2.2.5 音效处理芯片选择2.2.6 EEPROM芯片选择2.2.7 功率放大芯片选择2.2.8 电源芯片选择2.2.9 人机交互设备选择 2.3 …

Django学习第一天(如何创建和运行app)

前置知识: URL组成部分详解: 一个url由以下几部分组成: scheme://host:port/path/?query-stringxxx#anchor scheme:代表的是访问的协议,一般为http或者ftp等 host:主机名,域名,…

让数组有序的最少交换次数

Trick : 让数组有序的最少交换次数 Problem One 1224. 交换瓶子 - AcWing题库 有 N 个瓶子,编号 1∼N,放在架子上。 比如有 5 个瓶子: 2 1 3 5 4要求每次拿起 2 个瓶子,交换它们的位置。 经过若干次后,使得瓶子的序号…

Spring Security学习笔记(二)Spring Security认证和鉴权

前言:本系列博客基于Spring Boot 2.6.x依赖的Spring Security5.6.x版本 上一篇博客介绍了Spring Security的整体架构,本篇博客要讲的是Spring Security的认证和鉴权两个重要的机制。 UsernamePasswordAuthenticationFilter和BasicAuthenticationFilter是…

梧桐数据库:数据库技术中表之间的连接算法详解

在数据库技术中,表之间的连接(Join)是一个非常重要的操作,用于从多个表中检索相关数据。不同的连接算法有不同的性能特征,选择合适的连接算法可以显著提升查询效率。下面详细介绍几种常见的连接算法: 1. 嵌…

IPython的主要作用

IPython是一个功能强大的Python交互式shell,相比默认的Python shell,它提供了诸多增强功能和便利性,使得Python编程变得更加高效和愉悦。以下是对IPython的详细解析,包括其功能、组件、安装方法、使用方法以及一些高级功能。 IPy…

如何让LLM准确地输出一个json

这一直是一个难题&#xff0c;因为LLM具有很大的不确定性&#xff0c;而且如果你用过&#xff0c;你一定会看到类似于以下的输出情况: 啰嗦的输出 AI:好的&#xff0c;以下是对问题的json输出: json {"score":"yes" } <eos>形式错误 AI:{score:ye…

【JVM基础05】——组成-能不能解释一下方法区?

目录 1- 引言&#xff1a;方法区概述1-1 方法区是什么&#xff1f;(What)1-2 为什么用方法区&#xff1f;方法区的作用 (Why) 2- ⭐核心&#xff1a;详解方法区(How)2-1 能不能解释一下方法区&#xff1f;2-2 元空间内存溢出问题2-3 什么是常量池&#xff1f;2-4 运行时常量池 …

SAP PP学习笔记31 - 计划运行的步骤2 - Scheduling(日程计算),BOM Explosion(BOM展开)

上一章讲了计划运行的5大步骤中的前两步&#xff0c;计算净需求和计算批量大小。 SAP PP学习笔记30 - 计划运行的步骤1 - Net requirements calculation 计算净需求(主要讲了安全库存要素)&#xff0c;Lot-size calculation 计算批量大小-CSDN博客 本章继续讲计划运行的后面几…

360:从安全卫士到智能生活——一个科技巨头的成长之路

自2005年成立以来&#xff0c;360公司&#xff0c;全称北京奇虎科技有限公司&#xff0c;已经成为中国乃至全球科技领域的一股不可忽视的力量。从最初的互联网安全服务提供商&#xff0c;到如今涉足智能硬件、云计算、大数据、人工智能等领域的多元化科技公司&#xff0c;360的…

**卷积神经网络典型CNN**

LeNet&#xff1a;最早用于数字识别的CNN AlexNet&#xff1a;2012年ILSVRC比赛冠军&#xff0c;远超第二名的CNN&#xff0c;比LeNet更深&#xff0c;用多层小卷积叠加来替换单个的大卷积 ZF Net&#xff1a;2013ILSVRC冠军 GoogleNet&#xff1a;2014ILSVRC冠军 VGGNet&a…

Unity UGUI 之 自动布局组件

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

【头歌】Hive表DDL操作(一)答案

本专栏已收集头歌大数据所有答案 以供参考 第1关&#xff1a;Create/Alter/Drop 数据库 答案 复制点击测评 代码块&#xff1a; #********* Begin *********# echo " CREATE DATABASE IF NOT EXISTS test1 LOCATION /hive/test1WITH DBPROPERTIES(creatorJohn,date2019-…

容器化部署革新:Mojo模型的自定义动态配置

容器化部署革新&#xff1a;Mojo模型的自定义动态配置 在当今快速发展的机器学习领域&#xff0c;Mojo模型代表了一种高效、灵活的模型部署方式。容器化部署作为一种流行的技术&#xff0c;能够为模型提供一个轻量级、可移植的运行环境。本文将探讨如何在Mojo模型中实现模型的…

【Node.js入门精要】从零开始的开发之旅

说明文档&#xff1a;Node.js 教程_w3cschool 概念 Node.js 是一个开源、跨平台的 JavaScript 运行时环境&#xff0c;基于 Chrome 的 V8 引擎构建&#xff0c;专为构建高性能和可扩展的网络应用程序而设计的服务端语言。它采用事件驱动、非阻塞 I/O 模型&#xff0c;能够处理大…

GB28181摄像头管理平台WVP视频平台SQL注入漏洞复现 [附POC]

文章目录 GB28181摄像头管理平台WVP视频平台SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 GB28181摄像头管理平台WVP视频平台SQL注入漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内…

Unity UGUI 之 Mask

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