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

这篇具有很好参考价值的文章主要介绍了Three.js--》实现图片转3D效果展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

项目搭建

初始化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 ,我们直接导入图片即可:

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

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

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

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

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

// 加载纹理
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,这里就已图片代替了,效果就是鼠标移动图片跟着轻微的移动,如果是已经感受到上面讲解到生成深度图的网站的人应该能理解我说过的话。

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

接下来我们可以给该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>

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

demo做完,给出本案例的完整代码:(获取素材也可以私信博主)文章来源地址https://www.toymoban.com/news/detail-473225.html

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

到了这里,关于Three.js--》实现图片转3D效果展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js--》实现3d地球模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载地球模型 实现光柱效果 添加月球模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借

    2024年02月08日
    浏览(64)
  • Three.js--》实现3d地月模型展示

    目录 项目搭建 初始化three.js基础代码 创建月球模型 添加地球模型 添加模型标签 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建

    2024年02月07日
    浏览(63)
  • Three.js--》实现3d官网模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载飞船模型 实现滚轮滑动切换3D场景 设置星光流动特效 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建

    2024年02月06日
    浏览(58)
  • Three.js--》实现3d圣诞贺卡展示模型

    目录 项目搭建 初始化three.js基础代码 加载环境模型 设置环境纹理 添加水面并设置阴影效果 实现幽灵小球的运动 实现相机切换和文字切屏 实现漫天星星和爱心样式 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起

    2024年02月06日
    浏览(54)
  • Three.js--》实现3d球形机器人模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理 加载机器人模型 添加光阵 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工

    2024年02月07日
    浏览(88)
  • 【js&threeJS】入门three,并实现3D汽车展示厅,附带全码

    首先放个最终效果图:   三维(3D)概念: 三维(3D)是一个描述物体在三个空间坐标轴上的位置和形态的概念。相比于二维(2D)只有长度和宽度的平面,三维增加了高度或深度这一维度 在三维空间中,我们使用三个独立的坐标轴来描述物体的位置。通常使用笛卡尔坐标系

    2024年02月11日
    浏览(104)
  • vue2+three.js实现类似VR、3D全景效果

    效果图: 俩图标是我自己加的前进后退按钮,也是百度了好久,再加上GPT的帮助,才给搞出来。因为需求急,都不看官方文档,百度到一个能跑的demo之后改吧改吧,就先用着了。 下面是代码: 这里 代码有很多用不到的地方和需要优化的地方,我是来不及改了,就先这样吧

    2024年02月15日
    浏览(49)
  • WEB 3D技术 three.js 3D贺卡(1) 搭建基本项目环境

    好 今天 我也是在网上学的 带着大家一起来做个3D贺卡 首先 我们要创建一个vue3的项目、 先创建一个文件夹 装我们的项目 终端执行 vue create 项目名称 例如 我的名字想叫 greetingCards 就是 因为这个名录 里面是全部都小写的 然后 下面选择 vue3 然后按下回车 等待项目创建完成

    2024年01月19日
    浏览(53)
  • 3D数字孪生 - Three.js 项目介绍与基础环境搭建(一)

    根据WMS系统基础仓库数据以及RCS调度坐标系统,生成3D可视化仓库地图,能够实时监控仓库库位坐标、调度任务状态、车辆位置等信息。 社区对于threejs的实战案例太少,于是,花了一个月的时间,手撕了这个需求。此篇重点不会对threejs做深入讲解,毕竟我也是刚上车不到一

    2024年04月11日
    浏览(60)
  • Three.js--》实现3d小岛模型搭建

    目录 项目搭建 初始化three.js基础代码 设置环境背景 设置水面样式 添加天空小岛 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建

    2024年02月05日
    浏览(87)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包