本文 gihtub 地址: https://github.com/hua1995116/Fly-Three.js

最近元宇宙的概念很火,并且受到疫情的影响,我们的出行总是受限,电影院也总是关门,但是在家里又没有看大片的氛围,这个时候我们就可以通过自己来造一个宇宙,并在 VR 设备(Oculus 、cardboard)中来观看。

今天我打算用 Three.js 来实现个人 VR 电影展厅,整个过程非常的简单,哪怕不会编程都可以轻易掌握。

想要顶级的视觉盛宴,最重要的肯定是得要一块大屏幕,首先我们就先来实现一块大屏幕。

大屏幕的实现主要有两种几何体,一种是 PlaneGeometry 和 BoxGeometry,一个是平面,一个是六面体。为了使得屏幕更加有立体感,我选择了 BoxGeometry。

老样子,在添加物体之前,我们先要初始化我们的相机、场景和灯光等一些基础的元件。

const scene = new THREE.Scene();

// 相机
const camera = new THREE.PerspectiveCamera(
75,
sizes.width / sizes.height,
0.1,
1000
)
camera.position.x = -5
camera.position.y = 5
camera.position.z = 5
scene.add(camera); // 添加光照
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight) const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(2, 2, -1) scene.add(directionalLight) // 控制器
const controls = new OrbitControls(camera, canvas);
scene.add(camera);

然后来写我们的核心代码,创建一个 5 * 5 的超薄长方体

const geometry = new THREE.BoxGeometry(5, 5, 0.2);
const cubeMaterial = new THREE.MeshStandardMaterial({
color: '#ff0000'
});
const cubeMesh = new THREE.Mesh(geometry, cubeMaterial);
scene.add(cubeMesh);

效果如下:

然后紧接着加入我们的视频内容,想要把视频放入到3d场景中,需要用到两样东西,一个是 html 的 video 标签,另一个是 Three.js 中的视频纹理 VideoTexture

第一步将视频标签放入到 html 中,并设置自定播放以及不让他显示在屏幕中。

...
<canvas class="webgl"></canvas>
<video
id="video"
src="./pikachu.mp4"
playsinline
webkit-playsinline
autoplay
loop
style="display:none"
></video>
...

第二步,获取到 video 标签的内容将它传给 VideoTexture,并且纹理赋给我们的材质。

+const video = document.getElementById( 'video' );
+const texture = new THREE.VideoTexture( video ); const geometry = new THREE.BoxGeometry(5, 5, 0.2);
const cubeMaterial = new THREE.MeshStandardMaterial({
- color: '#ff0000'
+ map: texture
});
const cubeMesh = new THREE.Mesh(geometry, cubeMaterial);
scene.add(cubeMesh);

我们看到皮神明显被拉伸了,这里就出现了一个问题就是纹理的拉伸。这也很好理解,我们的屏幕是 1 : 1 的,但是我们的视频却是 16:9 的。想要解决其实也很容易,要么就是让我们的屏幕大小更改,要么就是让我们的视频纹理渲染的时候更改比例。

第一种方案很简单

通过修改几何体的形状(也及时我们显示器的比例)

const geometry = new THREE.BoxGeometry(8, 4.5, 0.2);
const cubeMaterial = new THREE.MeshStandardMaterial({
map: texture
});
const cubeMesh = new THREE.Mesh(geometry, cubeMaterial);
scene.add(cubeMesh);

第二种方案稍微有点复杂,需要知道一定的纹理贴图相关的知识

图1-1

首先我们先要知道纹理坐标是由 u 和 v 两个方向组成,并且取值都为 0 - 1。通过在 fragment shader 中,查询 uv 坐标来获取每个像素的像素值,从而渲染整个图。

因此如果纹理图是一张16:9 的,想要映射到一个长方形的面中,那么纹理图必要会被拉伸,就像我们上面的视频一样,上面的图为了表现出电视机的厚度所以没有那么明显,可以看一下的图。(第一张比较暗是因为 Three.js 默认贴图计算了光照,先忽略这一点)

我们先来捋一捋,假设我们的图片的映射是按照 图1-1,拉伸的情况下 (80,80,0) 映射的是 uv(1,1 ),但是其实我们期望的是点(80, 80 * 9/16, 0) 映射的是 uv(1,1),所以问题变成了像素点位 (80, 80 * 9/16, 0) 的uv值 如何变成 (80, 80, 0) 的uv 值,更加简单一些就是如何让 80 * 9 / 16 变成 80,答案显而易见,就是 让 80 * 9 / 16 像素点的 v 值 乘以 16 / 9,这样就能找到了 uv(1,1) 的像素值。然后我们就可以开始写 shader 了。

// 在顶点着色器传递 uv
const vshader = `
varying vec2 vUv; void main() {
vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
` // 核心逻辑就是 vec2 uv = vUv * acept;
const fshader = `
varying vec2 vUv; uniform sampler2D u_tex;
uniform vec2 acept; void main()
{
vec2 uv = vUv * acept;
vec3 color = vec3(0.3);
if (uv.x>=0.0 && uv.y>=0.0 && uv.x<1.0 && uv.y<1.0) color = texture2D(u_tex, uv).rgb;
gl_FragColor = vec4(color, 1.0);
}
`

然后我们看到我们画面已经正常了,但是在整体屏幕的下方,所以还差一点点我们需要将它移动到屏幕的中央。

移动到中央的思路和上面差不多,我们只需要注重边界点,假设边界点 C 就是让 80 * ( 0.5 + 9/16 * 0.5 ) 变成 80 ,很快我们也可能得出算是 C * 16/9 - 16/9 * 0.5 + 0.5 = 80

然后来修改 shader,顶点着色器不用改,我们只需要修改片段着色器。

const fshader = `
varying vec2 vUv; uniform sampler2D u_tex;
uniform vec2 acept; void main()
{
vec2 uv = vec2(0.5) + vUv * acept - acept*0.5;
vec3 color = vec3(0.0);
if (uv.x>=0.0 && uv.y>=0.0 && uv.x<1.0 && uv.y<1.0) color = texture2D(u_tex, uv).rgb;
gl_FragColor = vec4(color, 1.0);
}
`

好了,到现在为止,我们的图像显示正常啦~

那么 Three.js 中的 textureVideo 到底是如何实现视频的播放的呢?

通过查看源码(https://github.com/mrdoob/three.js/blob/6e897f9a42d615403dfa812b45663149f2d2db3e/src/textures/VideoTexture.js)源码非常的少,VideoTexture 继承了 Texture ,最大的一点就是通过 requestVideoFrameCallback 这个方法,我们来看看它的定义,发现 mdn 没有相关的示例,我们来到了 w3c 规范中寻找 https://wicg.github.io/video-rvfc/

这个属性主要是获取每一帧的图形,可以通过以下的小 demo 来进行理解

<body>
<video controls></video>
<canvas width="640" height="360"></canvas>
<span id="fps_text"/>
</body> <script>
function startDrawing() {
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d'); var paint_count = 0;
var start_time = 0.0; var updateCanvas = function(now) {
if(start_time == 0.0)
start_time = now; ctx.drawImage(video, 0, 0, canvas.width, canvas.height); var elapsed = (now - start_time) / 1000.0;
var fps = (++paint_count / elapsed).toFixed(3);
document.querySelector('#fps_text').innerText = 'video fps: ' + fps; video.requestVideoFrameCallback(updateCanvas);
} video.requestVideoFrameCallback(updateCanvas); video.src = "http://example.com/foo.webm"
video.play()
}
</script>

通过以上的理解,可以很容易抽象出整个过程,通过 requestVideoFrameCallback 获取视频每一帧的画面,然后用 Texture 去渲染到物体上。

然后我们来加入 VR 代码, Three.js 默认给他们提供了建立 VR 的方法。

// step1 引入 VRButton
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
// step2 将 VRButton 创造的dom添加进body
document.body.appendChild( VRButton.createButton( renderer ) );
// step3 设置开启 xr
renderer.xr.enabled = true;
// step4 修改更新函数
renderer.setAnimationLoop( function () {
renderer.render( scene, camera );
} );

由于 iphone 太拉胯不支持 webXR ,特地借了台安卓机(安卓机需要下载 Google Play、Chrome 、Google VR),添加以上步骤后,就会如下显示:

点击 ENTER XR 按钮后,即可进入 VR 场景。

然后我们我们可以再花20块钱就可以买个谷歌眼镜 cardboard。体验地址如下:

https://fly-three-js.vercel.app/lesson03/code/index4.html

或者也可以像我一样买一个 Oculus 然后躺着看大片

系列其他文章:

Three.js系列: 在元宇宙看电影,享受 VR 视觉盛宴的更多相关文章

  1. Three.js实现脸书元宇宙3D动态Logo

    背景 Facebook 近期将其母公司改名为 Meta,宣布正式开始进军 元宇宙 领域.本文主要讲述通过 Three.js + Blender 技术栈,实现 Meta 公司炫酷的 3D 动态 Logo ...

  2. 从产业链、架构和技术三个层面,看元宇宙与RPA的发展关系

    你可能还不知道,元宇宙也将带动RPA高速发展 一文读懂RPA如何赋能元宇宙,虚拟空间更需要RPA无处不在 三个层面,解读元宇宙如何利好RPA行业发展 从产业链.架构和技术三个层面,看元宇宙与RPA的发 ...

  3. 另一个角度看元宇宙与RPA:人工世界、平行员工与RPA

    另一个角度看元宇宙与RPA:人工世界.平行员工与RPA 从元宇宙到平行员工,人工世界推动的虚实分工利好RPA 机器人是铁打营盘人类是流水兵,未来元宇宙的虚实分工RPA机会巨大 文/王吉伟 元宇宙是平行 ...

  4. Awesome metaverse projects (元宇宙精选资源汇总)

    Awesome Metaverse 关于 Metaverse 的精彩项目和信息资源列表. 由于关于 Metaverse 是什么存在许多相互竞争的想法,请随时以拉取请求.问题和评论的形式留下反馈. We ...

  5. GIS :元宇宙未来发展的有力技术支撑

    摘要:元宇宙是描述未来互联网迭代发展的一个概念,是一个将现实世界和虚拟世界相互融合的一个可感知的持久.共享的3D虚拟空间组成的世界. 本文分享自华为云社区<[云驻共创]元宇宙漫游指南-新一代GI ...

  6. web3.0、比特币、区块链、元宇宙,以及那些待收割的韭菜们!

    前几天看到周星驰在社交账号上招聘web3.0的人才,感觉有必要说说web3.0,当然不是基于技术层面,而是从另一个维度说说web3.0以及其它相关的概念,从而做到如何反欺诈,如何避免被资本割韭菜.想到 ...

  7. Node.js系列-http

    前言: 最近一直忙着公司项目的事,战友们的留言也没空回复,博客也有段时间没有更新了,年底了就是一个的忙啊~~~(ps:同感的也给个赞吧) 现在前端的就是一直地更新一直有新的东西出来,什么ES2015, ...

  8. 元宇宙(metaverse)中文社区-工程实践

    欢迎访问元宇宙中文社区,在这里大家可以提问,回答,分享,诉说,一起构建一个元宇宙社区. 2021年"元宇宙"的这个词的火热程度在业内绝对不亚于疫情,趁着这个热度,本文记录了如何搭建 ...

  9. 乘风破浪,遇见未来元宇宙(Metaverse)之进入元宇宙世界,虚拟数字人行业洞察报告

    正值元宇宙热潮,虚拟数字人兴起 作为⼀个新兴领域,虚拟数字⼈已经引起市场和资本的⾼度关注,截⾄目前据不完全统计,全球范围已有500+虚拟数字人相关项目获得融资,融资总额超10亿美元,并且融资项目和总额 ...

随机推荐

  1. SpringBoot中异常处理

    一.背景 在我们编写程序的过程中,程序中可能随时发生各种异常,那么我们如何优雅的处理各种异常呢? 二.需求 1.拦截系统中部分异常,返回自定义的响应. 比如: 系统发生HttpRequestMetho ...

  2. keil工程当中实现printf重定向串口打印

    之前是完全不知道printf可以重定向设置 最近才发现还有这等好事,可以让printf直接实现串口打印 在网上找了很多资料,终于实现了我想要的效果 原理:printf是通过调用底部的fputc来实现打 ...

  3. 基本命令学习 -(4)链接文件:ln命令

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 前言 在Windows系统中,快捷方式是指向原始文件的一个链接文件,原文件一旦被删除或剪切到其 ...

  4. Linux下高效实用的grep命令

    Linux系统中的grep命令是一种功能强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则 ...

  5. 腾讯tbs 内存泄露

    一.背景 TBS(腾讯浏览服务)是腾讯提供的移动端webview体验的整套解决方案(https://x5.tencent.com/docs/index.html),可以用于移动端加载doc.xls.p ...

  6. 【总结】2022GDOI普及组 没得游记

    因为是线上,所以没得游记 Day -3 学校安排去7班上课,好耶! 上午全是主科,有一节生物 被你七班捧上天了 被你七班造谣说我暴踩Everyone,还传到九班,给我玩阴的是吧 下午模拟赛,初一第一 ...

  7. ELF文件结构

    ELF文件结构 ELF文件的全称是Executable and Linkable Format,直译为"可执行可链接格式",包括目标文件(.o).可执行文件(可以直接运行).静态链 ...

  8. .NET混合开发解决方案13 自定义WebView2中的上下文菜单

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  9. 好客租房4-react的基本使用 方法说明

    2.2方法说明 React.createElement //第二步创建react元素         //参数1:元素名称         //参数2:元素属性         //参数3:元素的子节 ...

  10. 以点类 Point 及平面图形类 Plane 为基础设计三角形类 Triangle

    学习内容:以点类 Point 及平面图形类 Plane 为基础设计三角形类 Triangle 代码示例: import java.util.Scanner; class Point{ private ...