【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…

【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:主机名,域名,…

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

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

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

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

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

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

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

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

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

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

Unity UGUI 之 自动布局组件

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

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

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

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

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

Unity UGUI 之 Mask

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

运算符 、、|、|| 、短路符【|| 、】<< 、>>

》》》&&是逻辑与运算符,|| 是逻辑或运算符 !是逻辑非运算符 逻辑与运算符:全为真(1)即结果为真(1),一个为假即全为假(0) 逻辑或运算符:…

shell循环语句

一, 循环语句 1.for循环语句 读取不同的变量值,用来逐个执行同一组命令 格式 for 变量名 in 取值列表 do 命令序列 done 1.1 列表循环 [rootlocalhost /home]# vim demo32.sh #!/bin/bash for i in {a..c} doecho $i done ~ [rootlocalhost /ho…

数据结构·AVL树

1. AVL树的概念 二叉搜索树虽可以缩短查找的效率,但如果存数据时接近有序,二叉搜索将退化为单支树,此时查找元素效率相当于在顺序表中查找,效率低下。因此两位俄罗斯数学家 G.M.Adelson-Velskii 和E.M.Landis 在1962年发明了一种解…

Pytorch深度学习实践(5)逻辑回归

逻辑回归 逻辑回归主要是解决分类问题 回归任务:结果是一个连续的实数分类任务:结果是一个离散的值 分类任务不能直接使用回归去预测,比如在手写识别中(识别手写 0 − − 9 0 -- 9 0−−9),因为各个类别…

了解Java虚拟机(JVM)

前言👀~ 上一章我们介绍网络原理相关的知识点,今天我们浅浅来了解一下java虚拟机JVM JVM( Java Virtual Machine ) JVM内存区域划分 方法区/元数据区(线程共享) 堆(线程共享) 虚…

iOS object-C 解答算法:找到所有数组中消失的数字(leetCode-448)

找到所有数组中消失的数字(leetCode-448) 题目如下图:(也可以到leetCode上看完整题目,题号448) 光看题看可能有点难以理解,我们结合示例1来理解一下这道题. 有8个整数的数组 nums [4,3,2,7,8,2,3,1], 求在闭区间[1,8]范围内(即1,2,3,4,5,6,7,8)的数字,哪几个没有出现在数组 …

Spring Boot的Web开发

目录 Spring Boot的Web开发 1.静态资源映射规则 第一种静态资源映射规则 2.enjoy模板引擎 3.springMVC 3.1请求处理 RequestMapping DeleteMapping 删除 PutMapping 修改 GetMapping 查询 PostMapping 新增 3.2参数绑定 一.支持数据类型: 3.3常用注解 一.Request…