本文 gihtub 地址: https://github.com/hua1995116/Fly-Three.js
最近元宇宙的概念很火，并且受到疫情的影響，我們的出行總是受限，電影院也總是關門，但是在家里又沒有看大片的氛圍，這個時候我們就可以通過自己來造一個宇宙，并在 VR 設備（Oculus 、cardboard）中來觀看。
今天我打算用 Three.js 來實現(xiàn)個人 VR 電影展廳，整個過程非常的簡單，哪怕不會編程都可以輕易掌握。
想要頂級的視覺盛宴，最重要的肯定是得要一塊大屏幕，首先我們就先來實現(xiàn)一塊大屏幕。
大屏幕的實現(xiàn)主要有兩種幾何體，一種是 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);
然后來寫我們的核心代碼，創(chuàng)建一個 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);
我們看到皮神明顯被拉伸了，這里就出現(xiàn)了一個問題就是紋理的拉伸。這也很好理解，我們的屏幕是 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 的，想要映射到一個長方形的面中，那么紋理圖必要會被拉伸，就像我們上面的視頻一樣，上面的圖為了表現(xiàn)出電視機的厚度所以沒有那么明顯，可以看一下的圖。（第一張比較暗是因為 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);
}
`
好了，到現(xiàn)在為止，我們的圖像顯示正常啦~
那么 Three.js 中的 textureVideo 到底是如何實現(xiàn)視頻的播放的呢？
通過查看源碼（https://github.com/mrdoob/three.js/blob/6e897f9a42d615403dfa812b45663149f2d2db3e/src/textures/VideoTexture.js）源碼非常的少，VideoTexture 繼承了 Texture ，最大的一點就是通過 **requestVideoFrameCallback 這個方法，**我們來看看它的定義，發(fā)現(xiàn) mdn 沒有相關的示例，我們來到了 w3c 規(guī)范中尋找 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 創(chuàng)造的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 然后躺著看大片文章來源：http://www.zghlxwxcb.cn/news/detail-473498.html
系列其他文章：文章來源地址http://www.zghlxwxcb.cn/news/detail-473498.html
- Three.js系列: 寫一個第一/三人稱視角小游戲
- Three.js系列:造個海洋球池來學習物理引擎
到了這里，關于Three.js系列: 在元宇宙看電影，享受 VR 視覺盛宴的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
