【THREE.JS】网页中的炫酷3D

news2024/9/21 13:54:35

在这里插入图片描述

web3d

    • 一、前言
      • 粒子特效
      • 二维漫画
      • 可视化
      • 后期处理
    • 二、项目使用流程
      • 2.1 项目结构
      • 2.2 基本使用
      • 2.3 项目模板
      • 2.4 技术栈
    • 三、基础动画
      • 3.1 THREE.Clock
      • 3.2 GASP
    • 四、照相机
      • 8.1 正交相机
      • 8.2 透视相机
      • 4.3 相机控制器
    • 五、画布和全屏
    • 六、几何体
    • 七、Debug UI
    • 八、纹理贴图
      • 8.1 mipmapping
      • 8.2 放大滤镜
      • 8.3 缩小滤镜
      • 8.3 UV贴图
        • 资源推荐
    • 纹理、材质、灯光
    • 九、阴影
      • 9.1 灯光阴影
      • 9.2 烘焙阴影
      • 9.3 阴影跟随
    • 十、粒子效果
      • 9.3 阴影跟随
    • 十、粒子效果
  • 官网链接：[数字孪生开发平台](http://101.132.190.14/)

一、前言

概述：基于WebGL的三维引擎，目前是国内资料最多、使用最广泛的三维引擎，可以制作一些3D可视化项目

在这里插入图片描述

目前随着元宇宙概念的爆火，THREE技术已经深入到了物联网、VR、游戏、数据可视化等多个平台。

最近一段时间主要对之前学习three.js的总结和记录，记录只对自己觉得重要的部分记录，其他的可以参考别的平台资源。

在这里插入图片描述

目前作品的相关展示平台已上线：VR_Team作品展示平台，欢迎大家查看。

项目开源地址：web3d-product，下面为一部分的网页的作品展示。

粒子特效

在这里插入图片描述

在线预览：粒子平面墙

在这里插入图片描述

在线预览：迷失太空

在这里插入图片描述

在线预览：粒子海浪

在这里插入图片描述

在线预览：银河系

二维漫画

在这里插入图片描述

在线预览：漫画-蜘蛛侠

可视化

在这里插入图片描述

在线预览：电脑主机拆解

后期处理

在这里插入图片描述

在线预览：后期处理-虚幻花朵

二、项目使用流程

2.1 项目结构

在这里插入图片描述

功能说明

  • public文件夹：存放一些独立的案例界面（html格式），不需要依赖，可以直接运行在网页
    • assets存在依赖的资源
    • Basic：基础界面
    • Comic：二维漫画
    • Particles：粒子效果
    • Processing：后期chuli
    • Visualization：可视化
  • src
    • views：功能主界面

2.2 基本使用

//安装依赖
npm i
//运行项目
npm run dev

2.3 项目模板

12

该模板集成最简单的一个three.js环境，在此基础上可以自行搭建。

2.4 技术栈

前端：vue + three.js + js

三、基础动画

在这里插入图片描述

概述：本质就是在render()函数不断渲染的过程中调用动画，每一帧不断增加目标体的位置，以此循环

体验地址：基础动画

3.1 THREE.Clock

// 时间动画
let clockAnimate=()=>{
const elapsedTime=clock.getElapsedTime()

cube.position.x = Math.cos(elapsedTime)
cube.position.y=Math.sin(elapsedTime)
}

3.2 GASP

https://github.com/greensock/GSAP

// gasp动画
let gsapAnimate=()=>{
	gsap.to(cube.position, { x: 5, duration: 3, delay:1})
}

四、照相机

8.1 正交相机

在这里插入图片描述

参数(属性)含义
left渲染空间的左边界
right渲染空间的右边界
top渲染空间的上边界
bottom渲染空间的下边界
nearnear属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值0.1
farfar属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。 默认值1000
let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000);
scene.add(camera);
camera.position.set(100, 200, 100);

8.2 透视相机

在这里插入图片描述

参数含义默认值
fovfov表示视场，所谓视场就是能够看到的角度范围，人的眼睛大约能够看到180度的视场，视角大小设置要根据具体应用，一般游戏会设置60~90度45
aspectaspect表示渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比window.innerWidth/window.innerHeight
nearnear属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。0.1
farfar属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小，会有部分场景看不到1000
let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(150, 100, 300);
camera.lookAt(scene.position);

注意

  • 相机的fov视口是上下的，不是左右
  • 向左移动相机，我们的场景会向右移动

4.3 相机控制器

概述：通过鼠标控制相机的移动、旋转、缩放以此实现场景物体的控制

导包

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

应用

const controls = new OrbitControls(camera, renderer.domElement)

自旋转

在这里插入图片描述

controls.autoRotate = true

必须在render函数调用update实时更新才奏效

五、画布和全屏

2

像素比：将一个像素分成若干个n*n的像素，这样的话显示会更加清晰，一般来说像素比为2就够了

// 自适应屏幕
let onWindowsResize = () => {

    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(window.devicePixelRatio)
}

//双击全屏
let onWindowsScreen = () => {
    let isFullScreen = document.fullscreenElement
    if (!isFullScreen) {
    	renderer.domElement.requestFullscreen()
    } else {
    	document.exitFullscreen()
    }
}
let expandFunction = () => {
    window.addEventListener('resize', onWindowsResize)
    window.addEventListener('dblclick', onWindowsScreen)
}

六、几何体

在这里插入图片描述

概述：几何体由一个个顶点粒子构成，每个粒子包含了位置、uv贴图（3d=>2d坐标对应）等，三个顶点形成一个面，在three.js中。物体由一个个三角形面构成。

BufferGeometry：是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。目前，three.js的物体都用上了Buffer，可以直接调用，一些顶点可以使用这个。

在这里插入图片描述

演示链接：三角形

let createBufferTriangle = () => {
    const count = 50
    for (let i = 0; i < count; i++) {
        const pointsArray = new Float32Array(9)
        for (let j = 0; j < 9; j++) {
            pointsArray[j] = (Math.random() - 0.5) * 5
        }

        const geometry = new THREE.BufferGeometry()
        const material = new THREE.MeshBasicMaterial({
            color: new THREE.Color(
                Math.random(),
                Math.random(),
                Math.random(),
            ),
            opacity: Math.random(),
            transparent: true,
            // wireframe:true
        })
        geometry.setAttribute('position', new THREE.BufferAttribute(pointsArray, 3))
        // geometry.attributes.position = new THREE.BufferAttribute(pointsArray, 3)
        const triangle = new THREE.Mesh(geometry, material)
        scene.add(triangle)

    }
}

七、Debug UI

dat.gui：https://github.com/dataarts/dat.gui 样式好看，动画有点不流畅

lil-gui：https://lil-gui.georgealways.com/ 动画流畅，官方案例用的多

八、纹理贴图

8.1 mipmapping

mip映射(mipmapping)是一种技术，它包括一次又一次地创建半个较小版本的纹理，直到得到1x1纹理。
所有这些纹理变化都会发送到GPU，GPU将自动选择最合适的纹理版本。所有的这些都已经由THREE.js和GPU处理，但是我们可以选择不同的过滤算法

在这里插入图片描述

8.2 放大滤镜

概述：原本的贴图大小大于要渲染的大小，如缩放物体，应用这个

在这里插入图片描述

8.3 缩小滤镜

概述：原本的贴图大小小于要渲染的大小，如缩放物体，应用这个

在这里插入图片描述

当纹理的minFilter属性使用NearestFilter时，我们可以不需要再mip映射了，可以通过以下代码为纹理停用mipmapping，使得GPU不再处理mip映射

//如果不在乎远处物品效果如失真之类的，纹理的minFilter属性使用 NearestFilter时可以停用mipmapping以获得更好性能，根据实际项目而定
colorTexture.generateMipmaps = false

参考链接：https://threejs.org/docs/index.html#api/zh/constants/Textures

参考链接：https://blog.csdn.net/weixin_43990650/article/details/121595334

8.3 UV贴图

参考链接：https://www.bilibili.com/read/cv15999592

掘金：https://juejin.cn/post/7101209181822124069

资源推荐

  • www.poliigon.com
  • https://3dtextures.me/
  • www.arroway-textures.ch/

纹理、材质、灯光

这部分可以参考网上的资料，这里不做过多讲解

https://blog.csdn.net/weixin_43990650/article/details/121595334

九、阴影

9.1 灯光阴影

四步走

灯光cast=>球体cast=>平面receive=>renderer设置

在这里插入图片描述

概述：灯光利用照相机渲染出shadow map贴到场景中，得到阴影

简单例子

//直射光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(directionalLight)

directionalLight.position.set(2, 2, -1)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.width = 1024
directionalLight.shadow.mapSize.height = 1024
directionalLight.shadow.camera.near = 1
directionalLight.shadow.camera.far = 6
directionalLight.shadow.camera.top = 2
directionalLight.shadow.camera.right = 2
directionalLight.shadow.camera.bottom = - 2
directionalLight.shadow.camera.left = - 2

directionalLight.shadow.radius = 10

//只是实体化的工具，参数修改上面的
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(directionalLightCameraHelper)
directionalLightCameraHelper.visible = false

注意：

  • 只有平行光、点光源和聚光灯支持阴影
  • 平行光是正交相机、其他的是透视相机，可以通过调节角度

9.2 烘焙阴影

在这里插入图片描述

概述：提前在blender渲染好阴影，这个不会变化，关闭渲染器阴影投射就行

9.3 阴影跟随

在这里插入图片描述

概述：在小球下面放置具有阴影贴图的平面，关闭渲染器阴影，跟随小球运动改变透明度

renderer.shadowMap.enabled = false

十、粒子效果

概述：粒子可以被用来创建星星、烟雾、雨滴、灰尘、火焰等等。我们可以使用合理的帧速率来创建数千个粒子。每个粒子都是由始终面向摄影机的平面（俩个三角形）组成的

参考链接：https://blog.csdn.net/weixin_43990650/article/details/121736698

101801718.png" alt=“6” style=“zoom:50%;” />

概述：提前在blender渲染好阴影，这个不会变化，关闭渲染器阴影投射就行

9.3 阴影跟随

在这里插入图片描述

概述：在小球下面放置具有阴影贴图的平面，关闭渲染器阴影，跟随小球运动改变透明度

renderer.shadowMap.enabled = false

十、粒子效果

概述：粒子可以被用来创建星星、烟雾、雨滴、灰尘、火焰等等。我们可以使用合理的帧速率来创建数千个粒子。每个粒子都是由始终面向摄影机的平面（俩个三角形）组成的

在这里插入图片描述

官网链接：数字孪生开发平台

本项目由`江苏海洋大学计算机工程学院VR_Team106完成，欢迎加入!!!

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

关于IcmpSendEcho2的使用和回调问题

关于IcmpSendEcho2的使用和回调问题

由于我的需求是短时间内ping多台机子&#xff0c;所以需要异步执行&#xff0c;微软提供的例子是同步方式的&#xff0c;根据微软官方提供的icmpSendEcho2 函数的信息 &#xff0c;我需要定义一个空的宏PIO_APC_ROUTINE_DEFINED &#xff0c;定义完之后&#xff0c;编译又出现…
阅读更多...
Java基础:回调函数

Java基础:回调函数

因为在看Android代码的时候发现了许多关于回调函数的知识, 所以去了解了一下. 对于我来说不太好懂, 因为我觉得看的那些博文的讲法对我来说很绕, 所以我在理解了之后想写一篇关于回调函数的博文来给和我一样理解能力稍差的人一点帮助. 回调函数的作用其实就是将需要这个功能的调…
阅读更多...
【JavaGuide面试总结】Redis篇·中

【JavaGuide面试总结】Redis篇·中

【JavaGuide面试总结】Redis篇中1.Redis 单线程模型了解吗&#xff1f;2.Redis6.0 之后为何引入了多线程&#xff1f;3.Redis 是如何判断数据是否过期的呢&#xff1f;4.过期的数据的删除策略了解么&#xff1f;5.Redis 内存淘汰机制了解么&#xff1f;6.什么是 RDB 持久化&…
阅读更多...
【Python+Appium】自动化测试框架

【Python+Appium】自动化测试框架

目录&#xff1a;导读 appium简介 设计思路 测试框架设计 测试框架目录结构 测试框架思维导图 测试结果展示 appium简介 Appium 是一个开源的、跨平台的测试框架&#xff0c;可以用来测试 Native App、混合应用、移动 Web 应用&#xff08;H5 应用&#xff09;等&#xf…
阅读更多...
Spring之依赖注入源码解析

Spring之依赖注入源码解析

Spring之依赖注入源码解析 依赖注入原理流程图&#xff1a; https://www.processon.com/view/link/5f899fa5f346fb06e1d8f570 Spring 中有几种依赖注入的方式&#xff1f; 首先分为两种&#xff1a; 1、手动注入 2、自动注入 1、手动注入 在 XML 中定义 Bean 时&#xff0c…
阅读更多...
Gartner 再度预测2023低代码趋势，真的会赚钱吗？

Gartner 再度预测2023低代码趋势，真的会赚钱吗？

2023年&#xff0c;从业者对低代码的发展充满了想象&#xff0c;人们认为&#xff0c;未来低代码的商业价值不可估量。 此话并非空穴来风。据Gartner的最新报告显示&#xff0c;到2023年&#xff0c;超过70%的企业将采用低代码作为他们发展战略的关键目标之一&#xff1b;到202…
阅读更多...
训练自己的中文word2vec（词向量）--skip-gram方法

训练自己的中文word2vec（词向量）--skip-gram方法

训练自己的中文word2vec&#xff08;词向量&#xff09;–skip-gram方法 什么是词向量 ​ 将单词映射/嵌入&#xff08;Embedding&#xff09;到一个新的空间&#xff0c;形成词向量&#xff0c;以此来表示词的语义信息&#xff0c;在这个新的空间中&#xff0c;语义相同的单…
阅读更多...
双塔多目标MVKE

双塔多目标MVKE

MVKE&#xff1a;Mixture of Virtual-Kernel Experts for Multi-Objective User Profile Modeling MVKE论文中是给用户打tag标记&#xff0c;构建用户画像。使用的也是经典的双塔模型&#xff0c;另外在双塔的基础上面叠加了ctr和cvr的多个目标。但是论文最大的创新点是在用户…
阅读更多...
基于龙芯 CPU 的气井控制器的软件设计（三）

基于龙芯 CPU 的气井控制器的软件设计（三）

4.1 系统软件的总体设计 基于龙芯 CPU 的气井控制器的设计需要开发测试硬件模块的测试软件&#xff0c;主要对 RTC 模块、存储器模块、4G 通信、以太网通信、UART 串口以及 AI 模块进行了驱动程序和 应用程序设计。将各个模块设计为不同的任务&#xff0c;龙芯 RTU 软件设计流程…
阅读更多...
Redis 监听过期的key（KeyExpirationEventMessageListener）

Redis 监听过期的key（KeyExpirationEventMessageListener）

目录一、简介二、maven依赖三、编码实现3.1、application.properties3.2、Redis配置类3.3、监听器3.4、服务类3.5、工具类四、测试4.1、测试类4.2、单实例4.3、多实例结语一、简介 本文今天主要是讲Redis中对过期key的监听&#xff0c;可能很多小伙伴不会&#xff0c;或者使用会…
阅读更多...
day15_常用类

day15_常用类

今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、作业 二、代码块[了解] 三、API 四、Object 五、包装类 六、数学和随机 零、 复习昨日 抽象接口修饰符abstractinterface是不是类类接口属性正常属性没…
阅读更多...
Leetcode(每日一题)——1139. 最大的以 1 为边界的正方形

Leetcode(每日一题)——1139. 最大的以 1 为边界的正方形

摘要 1139. 最大的以 1 为边界的正方形 一、以1为边界的最大正方形 1.1 动态规划 第530题需要正方形所有网格中的数字都是1&#xff0c;只要搞懂动态规划的原理&#xff0c;代码就非常简洁。而这题只要正方形4条边的网格都是1即可&#xff0c;中间是什么数字不用管。 这题…
阅读更多...
Hive的安装与配置

Hive的安装与配置

一、配置Hadoop环境先看看伪分布式下的集群环境有没有错误的情况&#xff1a;输入命令&#xff1a;start-all.sh jps查看伪分布式的所有进程是否完善二、解压并配置HiveHive压缩包→ https://pan.baidu.com/s/1eOF_ICZV8rV-CEh3nX-7Xw 提取码: m31e 复制这段内容后打开百度网盘…
阅读更多...
逆向 xx音乐 aversionid

逆向 xx音乐 aversionid

逆向 xx音乐 aversionid 版本 7.2.0 版本 7.22.0 第一步&#xff0c;charles 抓包 目标字段 aversionid 加固平台 com.stub.StubApp 360加固s.h.e.l.l.S 爱加密com.secneo.apkwrapper.ApplicationWrapper 梆梆加固com.tencent.StubShell.TxAppEntry 腾讯加固 第二步&…
阅读更多...
【网络编程】Java快速上手InetAddress类

【网络编程】Java快速上手InetAddress类

概念 Java具有较好的网络编程模型/库&#xff0c;其中非常重要的一个API便是InetAddress。在Java.net 网络编程中中有许多类都使用到了InetAddress 这个类代表一个互联网协议&#xff08;IP&#xff09;地址。 IP地址是一个32&#xff08;IPV4&#xff09;位或128&#xff08;…
阅读更多...
求职季哪种 Python 程序员能拿高薪？

求职季哪种 Python 程序员能拿高薪？

本文以Python爬虫、数据分析、后端、数据挖掘、全栈开发、运维开发、高级开发工程师、大数据、机器学习、架构师这10个岗位&#xff0c;从拉勾网上爬取了相应的职位信息和任职要求&#xff0c;并通过数据分析可视化&#xff0c;直观地展示了这10个职位的平均薪资和学历、工作经…
阅读更多...
02 Context的使用

02 Context的使用

对于 HTTP 服务而言&#xff0c;超时往往是造成服务不可用、甚至系统瘫痪的罪魁祸首。 context 标准库设计思路 为了防止雪崩&#xff0c;context 标准库的解决思路是&#xff1a;在整个树形逻辑链条中&#xff0c;用上下文控制器 Context&#xff0c;实现每个节点的信息传递…
阅读更多...
Package ‘oniguruma‘, required by ‘virtual:world‘, not found

Package ‘oniguruma‘, required by ‘virtual:world‘, not found

一、操作系统环境 OS版本信息&#xff1a;Rocky Linux 9.1 PHP版本&#xff1a;8.0.26 安装的依赖&#xff1a; dnf -y install libXpm-devel libXext-devel gmp gmp-devel libicu* icu* net-snmp-devel libpng-devel libjpeg-devel freetype-devel libxslt-devel sqlite…
阅读更多...
真正意义上的数字零售，最为重要的一点就是要回归零售本身

真正意义上的数字零售，最为重要的一点就是要回归零售本身

互联网浪潮的退却并未真正将人们的思维带离互联网的牢笼&#xff0c;相反&#xff0c;越来越多的人依然在用互联网式的眼光看待后互联网时代的事物。尽管这样一种做法可以在一定程度上取得一定的效果&#xff0c;但是&#xff0c;如果仅仅只是用互联网思维来揣度这一切&#xf…
阅读更多...
基于虚拟机机的代码保护技术

基于虚拟机机的代码保护技术

虚拟机保护技术是基于x86汇编系统的可执行代码转换为字节码指令系统的代码&#xff0c;以达到保护原有指令不被轻易逆向和篡改的目的。 字节码&#xff08;Byte-code&#xff09;是一种包含执行程序&#xff0c;由一序列 op 代码/数据对组成的 &#xff0c;是一种中间码。字节是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023