three.js 第八节 - gltf加载器、解码器


// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入hdr加载器(专门加载hdr的)
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 导入解码器(在node_modules/three/examples/jsm/libs/draco这里,但是,我们需要把draco文件夹复制到pbulic文件夹种)
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'//#region
const scence = new THREE.Scene()const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置相机位置
camera.position.set(5, 2, 2)
// camera.lookAt(0, 0, 0)const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
document.body.appendChild(renderer.domElement)
//#endregion// -----------------------------------------------------------------
// -----------------------------------------------------------------// 实例化gltf加载器const gltfLoader = new GLTFLoader()gltfLoader.load(// 模型路径'../public/assets/model/Duck.glb', // (这个模型是没有经过压缩的,所以不需要使用解码器)// 加载完成的回调gltf => {console.log('gltf-Duck=', gltf)scence.add(gltf.scene)})// 实例化解码器dracoconst dracoLoader = new DRACOLoader()// 设置draco路径dracoLoader.setDecoderPath('../public/draco/') // 这里的路径必须进入draco文件夹中【../public/draco/】,否则报错// 设置gltf加载器的解码器gltfLoader.setDRACOLoader(dracoLoader)gltfLoader.load(// 模型路径/*因为`city.glb`是压缩过的,不使用解码器的话就会报错:Error: THREE.GLTFLoader: No DRACOLoader instance provided.所以,就需要解压缩咯*/'../public/assets/model/city.glb',// 加载完成的回调gltf => {console.log('gltf-city=', gltf)scence.add(gltf.scene)})// 加载环境贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('../public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {// 设置球形贴图,否则环境贴图就像一个背景图片似的envMap.mapping = THREE.EquirectangularReflectionMapping// 设置环境贴图scence.environment = envMap
})// 场景fog
scence.fog = new THREE.Fog(0x999999, 0.1, 50) // 参数一:雾的颜色灰色;从0.1米到50米处雾会越来越浓// 指数fog
// scence.fog = new THREE.FogExp2(0x999999, 0.1) // 参数一:雾的颜色灰色;参数二:雾变浓的速度// 给场景scence一个背景颜色(场景的背景色最好是雾的颜色一致),查看雾的效果会更好
scence.background = new THREE.Color(0x999999)// -----------------------------------------------------------------
// -----------------------------------------------------------------//#region
// 添加世界坐标辅助器,红色-X轴; 绿色-Y轴; 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05// 每一帧根据控制器更新画面
function render() {// 如果,需要控制器带有阻尼效果,或者自动旋转等效果,就需要加入`controls.update()`controls.update()// `requestAnimationFrame`:在屏幕渲染下一帧画面时,触发回调函数来执行画面的渲染requestAnimationFrame(render)renderer.render(scence, camera)
}
render()
//#endregion

在这里插入图片描述

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

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

相关文章

npm全局安装依赖指定存放文件目录

引言 学校机房,每次默认在c盘装完 电脑关机重启都得重新安装,十分麻烦 1-创建依赖安装/缓存目录 2-打开终端输入设置安装目录位置的命令 npm set cache \你创建的缓存文件目录\ npm set prefix \你创建的global全局安装依赖文件目录\至此以后npm -g 依…

自动驾驶仿真Carla -ACC功能测试

我将详细说明如何使用Carla进行ACC(自适应巡航控制)测试,确保每个步骤贴合实际的Carla自动驾驶仿真标准,并提供相应的代码示例。 使用Carla进行ACC测试的步骤: 1. 环境设置和启动Carla 首先,确保你已经安装…

巴鲁夫MacroBuilder2.0.0.0软件巴鲁夫和使用手侧

巴鲁夫MacroBuilder2.0.0.0软件巴鲁夫和使用手侧

Linux下多进程访问同一个共享库处理流程

两个测试程序实现调用同一个SO库: ​​​​​​​ #include <stdio.h> #include "a/a.h" #include <unistd.h> int main() { int a = 4,b = 5; sum(a, b); int ret = get(); printf("ret=%d\n", ret); sleep(100)…

数据库新技术【分布式数据库】

文章目录 第一章 概述1.1 基本概念1.1.1 分布式数据库1.1.2 数据管理的透明性1.1.3 可靠性1.1.4 分布式数据库与集中式数据库的区别 1.2 体系结构1.3 全局目录1.4 关系代数1.4.1 基操1.4.2 关系表达式1.4.3 查询树 第二章 分布式数据库的设计2.1 设计策略2.2 分布设计的目标2.3…

【Linux】基础IO_2

文章目录 六、基础I/O2. 系统文件I/O磁盘的存储结构 未完待续 六、基础I/O 2. 系统文件I/O 磁盘的存储结构 系统中不是所有对文件都是打开的状态&#xff0c;大部分的文件都是没有被打开的。这些文件一般都被存储在磁盘当中。磁盘通过柱面&#xff0c;扇面&#xff0c;扇区确…

Android 屏幕旋转 处理 AsyncTask 和 ProgressDialog 的最佳方案

初始化数据 */ private void initData(Bundle savedInstanceState) { if (savedInstanceState ! null) mDatas savedInstanceState.getStringArrayList(“mDatas”); if (mDatas null) { mLoadingDialog new LoadingDialog(); mLoadingDialog.show(getFragmentMana…

Renesas MCU使用定时器之实现1ms定时中断

目录 概述 1 软硬件介绍 1.1 软件版本信息 1.2 硬件介绍 2 FSP配置项目 2.1 项目参数配置 2.2 配置定时器参数 3 功能实现 3.1 软件架构实现 3.2 实现功能函数 4 测试 概述 本文主要介绍使用Renesas MCU定时器之实现1ms定时中断功能&#xff0c;文中介绍使用FSP配…

理解 iOS 开发中的 NS_ENUM 和 NS_OPTIONS

在开发 iOS 应用程序时&#xff0c;理解 NS_ENUM 和 NS_OPTIONS 的使用至关重要&#xff0c;因为它们在定义和管理枚举和选项方面起着重要作用。在本文中&#xff0c;我们将深入探讨 NS_ENUM 和 NS_OPTIONS 之间的区别、使用场景以及如何有效地实现它们。 NS_ENUM NS_ENUM 用…

对兼容各操作系统的Anki选择题模板的更新——提供更方便的笔记修改功能

2021年当我想做一个兼容各操作系统的Anki选择题模板的时候&#xff0c;到处搜索茧中网&#xff0c;根本找不到相关内容&#xff0c;直到偶然在github上看到Simon Lammer的Anki持久化模块&#xff0c;才算真正实现。现在再在茧中网上搜索兼容各种操作系统的Anki选择题模板&#…

Android蓝牙开发(一)之打开蓝牙和设备搜索

private BluetoothManager bluetoothmanger; private​ BluetoothAdapter bluetoothadapter; /** 判断设备是否支持蓝牙 */ bluetoothmanger (BluetoothManager) getSystemService(Context.BLUETOOTH_SERVICE); bluetoothadapter bluetoothmanger.getAdapter(); if (bl…

web中间件漏洞-Jenkins漏洞-弱口令、反弹shell

web中间件漏洞-Jenkins漏洞-弱口令、反弹shell Jenkins弱口令 默认用户一般为jenkins/jenkins 使用admin/admin123登陆成功 Jenkins反弹shell 格式为 println"命令".execute().text 在/tmp目录中生成shell.sh文件&#xff0c;并向其中写入反弹shell的语句 new…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 局域网中的服务器个数(200分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…

keepalived高可用,nginx+keepalived+apache架构的实现

目 录 一、概述&#xff1a; 二、实验架构图如图所示&#xff1a; 三、实验环境&#xff1a; 四、实现效果&#xff1a; 五、实验解析及步骤&#xff1a; 六、具体实现&#xff1a; 6.1 先关闭防火墙和核心防护&#xff1a;两条命令&#xff1a; 6.2 后端apache服务…

头歌资源库(16)分苹果

一、 问题描述 二、算法思想 首先&#xff0c;我们可以初始化一个数组apple来记录每个孩子分配的苹果数量&#xff0c;将所有元素初始化为1&#xff0c;表示每个孩子至少分配到一个苹果。 然后&#xff0c;从左到右遍历评分数组ratings&#xff0c;判断当前孩子的评分与前一个…

文件操作<C语言>

导言 平时我们在写程序时&#xff0c;在运行时申请内存空间&#xff0c;运行完时内存空间被收回&#xff0c;如果想要持久化的保存&#xff0c;我们就可以使用文件&#xff0c;所以下文将要介绍一些在程序中完成一些文件操作。 目录 导言 文件流 文件指针 文件的打开与关闭 …

Android进程间通信 Messenger详解

//这里服务端Service是运行在单独的进程中的 android:process“:other” class MessengerService : Service() { private lateinit var mMessenger: Messenger override fun onBind(intent: Intent): IBinder { log(TAG, “onBind~”) //传入Handler实例化Messenger mMes…

Golang | Leetcode Golang题解之第174题地下城游戏

题目&#xff1a; 题解&#xff1a; func calculateMinimumHP(dungeon [][]int) int {n, m : len(dungeon), len(dungeon[0])dp : make([][]int, n 1)for i : 0; i < len(dp); i {dp[i] make([]int, m 1)for j : 0; j < len(dp[i]); j {dp[i][j] math.MaxInt32}}dp[…

mysql数据库切换成kingbase(人大金仓)数据库时遇到的字段不存在问题

一、问题描述 mysql数据库切换成国产数据库人大金仓&#xff08;kingbase&#xff09;数据库的遇到的字段不存在的问题,根本原因其实是没有找到相对应的表&#xff0c;报错示例如下图所示&#xff1a; 二、问题解决 1、如果所有的表都发生上述的错误&#xff0c;kingbase的…

基于matlab的不同边缘检测算子的边缘检测

1 原理 1.1 边缘检测概述 边缘检测是图像处理和计算机视觉中的基本问题&#xff0c;其目的在于标识数字图像中亮度变化明显的点。这些变化通常反映了图像属性的重要事件和变化&#xff0c;如深度不连续、表面方向不连续、物质属性变化和场景照明变化等。边缘检测在特征提取中…