Three.js--》实现图片转3D效果展示

news2024/11/19 3:37:02

目录

项目搭建

初始化three.js基础代码

加载图片纹理

设置着色器

今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用 。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：

<template>
  <!-- 3D图片效果 -->
  <Image3DEffect></Image3DEffect>
</template>

<script setup>
import Image3DEffect from './components/Image3DEffect.vue';
</script>

<style lang="less">
  *{
    margin: 0;
    padding: 0;
  }
</style>

初始化three.js基础代码

three.js开启必须用到的基础代码如下：

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

// 设置相机
const camera = new THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(0,0,5)

初始化渲染器：

// 渲染器
let renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth,window.innerHeight)

监听屏幕大小的改变，修改渲染器的宽高和相机的比例：

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

设置渲染函数： 

// 创建渲染函数
const render = () => {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

ok，写完基础代码之后，接下来开始具体的Demo实操。 

加载图片纹理

这里通过TextureLoader加载各图片纹理文件，图片资源大家可以随便在网上找一个就行，如果想要图片资源的朋友可以在这个网站找找看：https://pixabay.com/zh/ ，在加载图片纹理时，我们还要加载器深度图。

Depth Map（深度图）是一种图像格式，它记录了每个像素距离相机的距离信息。深度图可以用来表示三维场景中物体的距离，是3D渲染中常用的图像格式之一。

在图形渲染管线中，深度图通常用于实现深度测试和阴影计算。深度测试是指在将三维物体渲染到屏幕上时，比较每个像素的深度值（即该像素距离相机的距离），如果一个像素前面有另一个像素，则只显示前面的像素，从而保证渲染顺序的正确性。而阴影计算则是通过比较光源与物体之间的深度值，确定每个像素是否被遮挡（即在阴影中）。

生成深度图的网站：LeiaPix Converter | Depth Animations ，我们直接导入图片即可：

我们可以对深度图片的相关样式进行修改：

最后点击Depath Map  下载深度图片即可。

// 加载纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load("/images/woman.jpg")
const depthTexture = textureLoader.load("/images/woman_depth.jpg")

设置着色器

着色器（Shader）是一种在图形渲染管线中运行的程序，它可以对渲染过程中的顶点、像素等进行各种计算和处理，从而实现各种复杂的渲染效果。

着色器通常分为两种类型：顶点着色器和片元着色器。顶点着色器是用来计算顶点的位置、法线、纹理坐标等信息，并将其传递给片元着色器进行处理；片元着色器则是用来计算每个像素（片元）的颜色值，通常根据纹理、灯光、材质等信息进行计算，并输出最终颜色值到屏幕上。

// 创建屏幕
const geomery = new THREE.PlaneGeometry(19.2,12.8)
// 创建鼠标对象
const mouse = new THREE.Vector2()
// 设置着色器材质
const material = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uTexture: { value: texture },
    uDepthTexture: { value: depthTexture },
    uMouse: { value: mouse }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D uTexture;
    uniform sampler2D uDepthTexture;
    uniform vec2 uMouse;
    varying vec2 vUv;
    uniform float uTime;
    void main() {
      vec4 color = texture2D(uTexture, vUv);
      vec4 depth = texture2D(uDepthTexture, vUv);
      float depthValue = depth.r;
      float x = vUv.x + (uMouse.x+sin(uTime))*0.01*depthValue;
      float y = vUv.y + (uMouse.y+cos(uTime))*0.01*depthValue;
      vec4 newColor = texture2D(uTexture, vec2(x, y));
      gl_FragColor = newColor;
    }
  `,
})
const plane = new THREE.Mesh(geomery,material)
scene.add(plane)

最后我们设置渲染函数和监听事件：

// 设置渲染函数
const render = () =>{ 
  material.uniforms.uMouse.value = mouse;
  material.uniforms.uTime.value = performance.now() / 1000;
  requestAnimationFrame(render)
  renderer.render(scene,camera)
} 
render()

// 设置鼠标移动监听事件
window.addEventListener("mousemove", (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

动态图的文件太大上传不了glf，这里就已图片代替了，效果就是鼠标移动图片跟着轻微的移动，如果是已经感受到上面讲解到生成深度图的网站的人应该能理解我说过的话。

接下来我们可以给该3D背景图添加点文字：

<template>
  <div class="canvas-container" ref="screenDom"></div>
  <div class="content">
    <h1>学习更多前端技术</h1>
    <h2>请关注亦世凡华、</h2>
  </div>
</template>

<style lang="less">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.canvas-container {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.content{
  position: fixed;
  top: 40%;
  left: 20%;
}
.content h1 {
  color: rgb(255, 247, 0);
  font-size: 40px;
  margin-bottom: 30px;
}
</style>

demo做完，给出本案例的完整代码：（获取素材也可以私信博主）

<template>
  <div class="canvas-container" ref="screenDom"></div>
  <div class="content">
    <h1>学习更多前端技术</h1>
    <h2>请关注亦世凡华、</h2>
  </div>
</template>

<script setup>
import * as THREE from 'three'
import { ref,onMounted } from 'vue'

let screenDom = ref(null);
// 设置场景
const scene = new THREE.Scene()
// 设置相机
const camera = new THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(0,0,5)
// 渲染器
let renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth,window.innerHeight)
onMounted(()=>{
  screenDom.value.appendChild(renderer.domElement);
})

// 监听屏幕大小变化
window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

// 加载纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load("/images/woman.jpg")
const depthTexture = textureLoader.load("/images/woman_depth.jpg")

// 创建屏幕
const geomery = new THREE.PlaneGeometry(19.2,12.8)
// 创建鼠标对象
const mouse = new THREE.Vector2()
// 设置着色器材质
const material = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uTexture: { value: texture },
    uDepthTexture: { value: depthTexture },
    uMouse: { value: mouse }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D uTexture;
    uniform sampler2D uDepthTexture;
    uniform vec2 uMouse;
    varying vec2 vUv;
    uniform float uTime;
    void main() {
      vec4 color = texture2D(uTexture, vUv);
      vec4 depth = texture2D(uDepthTexture, vUv);
      float depthValue = depth.r;
      float x = vUv.x + (uMouse.x+sin(uTime))*0.01*depthValue;
      float y = vUv.y + (uMouse.y+cos(uTime))*0.01*depthValue;
      vec4 newColor = texture2D(uTexture, vec2(x, y));
      gl_FragColor = newColor;
    }
  `,
})
const plane = new THREE.Mesh(geomery,material)
scene.add(plane)

// 设置渲染函数
const render = () =>{ 
  material.uniforms.uMouse.value = mouse;
  material.uniforms.uTime.value = performance.now() / 1000;
  requestAnimationFrame(render)
  renderer.render(scene,camera)
} 
render()

// 设置鼠标移动监听事件
window.addEventListener("mousemove", (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.canvas-container {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.content{
  position: fixed;
  top: 40%;
  left: 20%;
}
.content h1 {
  color: rgb(255, 247, 0);
  font-size: 40px;
  margin-bottom: 30px;
}
</style>

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

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

相关文章

逻辑推理与集合

逻辑推理与集合

逻辑推理与集合是同一个过程的不同展示方式&#xff0c;这两者具有不同的特点。 逻辑推理通常是一种思维过程、语言文本的形式。 而集合则很容易采用一种可视化的方式进行展示&#xff0c;并且集合很容易进行交集、并集、补集、差集等计算。 把语言的逻辑推理过程转换为集合…
阅读更多...
0602-指针和数组

0602-指针和数组

数组名 数组名是一个地址常量&#xff0c;不允许赋值。它表示数组首元素的地址。 指针操作数组元素 指针访问数组 指针类型变量\常量1等同于指针保存的内存地址sizeof(指针指向的数据类型)。 2个相同类型的指针相减&#xff0c;得到的结果是2个指针的偏移量。其中偏移单位…
阅读更多...
STL模型转有限元网格

STL模型转有限元网格

随着计算机图形学、硬件和3D打印技术的发展&#xff0c;基于曲面三角网格的图形渲染及其文件格式越来越流行。 在有限元分析&#xff08;FEA&#xff09;中&#xff0c;工程师有时会得到基于三角形网格的几何文件&#xff08;如STL文件等&#xff09;并进行后续分析。 由于曲面…
阅读更多...
华为OD机试真题 Java 实现【检查是否存在满足条件的数字组合】【2022Q4 100分】

华为OD机试真题 Java 实现【检查是否存在满足条件的数字组合】【2022Q4 100分】

一、题目描述 给定一个正整数数组&#xff0c;检查数组中是否存在满足规则的数字组合 规则&#xff1a;A B 2C 二、输入描述 第一行输出数组的元素个数。 接下来一行输出所有数组元素&#xff0c;用空格隔开。 三、输出描述 如果存在满足要求的数&#xff0c;在同一行…
阅读更多...
【MySQL】不允许你不会SQL语句之DDL

【MySQL】不允许你不会SQL语句之DDL

目录 前言&#xff1a; 一.DDL数据库语句 1.1语句讲解 1.2总结 二.DDL表语句 2.1语句讲解 2.2总结 三.DDL字段语句 3.1语句讲解 3.2总结 四.MySQL数据类型 五.结尾 前言&#xff1a; 在从零到一入门MySQL一篇中&#xff0c;我们对数据库已经有了一定的了解&#xf…
阅读更多...
Linux 设备树手动反编译 dtb 生成 源文件dts

Linux 设备树手动反编译 dtb 生成 源文件dts

验证平台 win10 64 位 VMware Workstation Pro 16 ubuntu 20.04 dtc 工具&#xff1a; 来自 linux-6.3.5 中的 scripts/dtc/ 安装 dtc 工具 其实可以通过安装 dtc 软件包&#xff0c;但不建议这么做&#xff0c;最好通过编译Linux 最新的内核&#xff0c;获取这个 dtc 工具…
阅读更多...
利用Web Serial API实现Vue与单片机串口通信

利用Web Serial API实现Vue与单片机串口通信

一、Web Serial API介绍 Web Serial API 是一项 Web 技术&#xff0c;用于在浏览器中访问串行端口设备&#xff08;如 Arduino、传感器等&#xff09;并与之通信。它提供了一组 JavaScript 接口&#xff0c;使得 Web 应用程序可以通过 USB 串行端口连接到硬件设备&#xff0c;并…
阅读更多...
华为OD机试真题 Java 实现【报数游戏】【2022Q4 100分】

华为OD机试真题 Java 实现【报数游戏】【2022Q4 100分】

一、题目描述 100个人围成一圈&#xff0c;每个人有一个编码&#xff0c;编号从1开始到100。他们从1开始依次报数&#xff0c;报到为M的人自动退出圈圈&#xff0c;然后下一个人接着从1开始报数&#xff0c;直到剩余的人数小于M。请问最后剩余的人在原先的编号为多少&#xff…
阅读更多...
【JavaSE】Java基础语法(四十五)：TCP UDP 全解

【JavaSE】Java基础语法(四十五)：TCP UDP 全解

文章目录 1. TCP发送数据2. TCP接收数据【应用】3. TCP程序练习4. TCP程序文件上传练习【应用】5. UDP发送数据6. UDP接收数据【应用】7. UDP通信程序练习【应用】8. UDP三种通讯方式 1. TCP发送数据 Java中的TCP通信 Java对基于TCP协议的的网络提供了良好的封装&#xff0c;使…
阅读更多...
chatgpt赋能python：Python删除文件目录

chatgpt赋能python：Python删除文件目录

Python删除文件目录 Python是一种高级编程语言&#xff0c;广泛应用于开发各种类型的应用程序。Python的许多功能使其成为开发者的首选编程语言之一。在这篇文章中&#xff0c;我们将讨论如何使用Python删除文件和目录。 文件和目录的区别 在开始之前&#xff0c;让我们了解…
阅读更多...
16_Linux内核启动流程

16_Linux内核启动流程

目录 链接脚本vmlinux.Ids Linux内核入口stext mmap_switched函数 start_kernel函数 rest_init函数 init进程 链接脚本vmlinux.Ids 要分析Linux启动流程,同样需要先编译一下Linux源码,因为有很多文件是需要编译才会生成的。首先分析Linux内核的连接脚本文件arch/arm/kem…
阅读更多...
【Python】Python系列教程-- Python3 字符串（十一）

【Python】Python系列教程-- Python3 字符串（十一）

文章目录 前言Python3 字符串Python 访问字符串中的值Python 字符串更新Python 转义字符Python 字符串运算符Python 字符串格式化Python三引号f-stringUnicode 字符串Python 的字符串内建函数 前言 往期回顾&#xff1a; Python系列教程–Python3介绍&#xff08;一&#xff…
阅读更多...
计算机网络-网络层1.0

计算机网络-网络层1.0

传输单位 网络层将分组从源端传到目的端&#xff0c;为分组交换网上的不同主机提供通信服务&#xff0c;传输单位为数据报 路由器 完成路由选择和分组转发 路由选择&#xff1a;按照分布式算法&#xff0c;根据从相邻路由器所得到的的关于整个网络拓扑的变化情况&#xff0…
阅读更多...
操作系统第二章​练习题

操作系统第二章​练习题

第一部分 教材习题&#xff08;P84&#xff09; 1、什么是前趋图&#xff1f;为什么要引入前趋图&#xff1f;​ 前趋图:是用于描述程序段或进程之间执行的先后顺序的有向无循环图。 引入的原因:为了更好的描述程序的顺序和并发执行的情况。 试画出下面4条语句的前趋图&#…
阅读更多...
LeetCode 2559 统计范围内的元音字符串数

LeetCode 2559 统计范围内的元音字符串数

LeetCode 2559 统计范围内的元音字符串数 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/count-vowel-strings-in-ranges/description/ 博主Github&#xff1a;https://github.com/GDUT-Rp/LeetCode 题目&#xff1a;…
阅读更多...
Vue3小兔鲜：组合式写法入门

Vue3小兔鲜：组合式写法入门

Vue3&#xff1a;组合式写法入门 Date: May 11, 2023 认识Vue3 1. Vue3组合式API体验 通过 Counter 案例 体验Vue3新引入的组合式API <script> export default {data(){return {count:0}},methods:{addCount(){this.count}} } </script><script setup> imp…
阅读更多...
【JavaSE】Java基础语法(四十四)：XML解析

【JavaSE】Java基础语法(四十四)：XML解析

文章目录 1. 概述2.标签的规则3. 语法规则【应用】4. xml解析【应用】 1. 概述 万维网联盟(W3C) 万维网联盟(W3C)创建于1994年&#xff0c;又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。 建立者&#xff1a; Tim Berners-Lee (蒂姆伯纳斯李)。 是Web技术领域…
阅读更多...
【分布族谱】高斯分布和逆高斯分布的关系

【分布族谱】高斯分布和逆高斯分布的关系

文章目录 高斯分布逆高斯分布简介通过高斯分布构造逆高斯分布 高斯分布 正态分布&#xff0c;又称Gauss分布&#xff0c;其概率密度函数入下图所示 正态分布 N ( μ , σ ) N(\mu, \sigma) N(μ,σ)受到期望 μ \mu μ和方差 σ 2 \sigma^2 σ2的调控&#xff0c;其概率密度函…
阅读更多...
基于SpringBoot+Vue的医疗服务系统设计与实现

基于SpringBoot+Vue的医疗服务系统设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下…
阅读更多...
Qt for Android环境配置(联合Android Studio)

Qt for Android环境配置(联合Android Studio)

目录 1.安装JDK2.安装Android Studio并下载必要组件3.安装QtCreator并配置 Official Doc 1.安装JDK Oracle JDK Download 配置环境变量&#xff1a; 2.安装Android Studio并下载必要组件 Android Studio Download 下图中&#xff0c;31.0.0是当前Qt必需的&#xff0c;3…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023