web 端的 VR (1)

簡單地解釋一下我們是如何在計算機上看到 3D 效果的。

005.JPG

1 向量
2 面
3 fragment
首先我們在 3D 世界裡需要形狀，那麼 shape 是怎麼來的呢？我們幾個向量點（第一個階段），這些點組合在一起就組成了面（面），我之前是一名優秀的建模師，其實 3dmax 我們使用應用提供建工具，即使建立的是四邊形，其實也是由兩個三角面組成的。所以我們在計算機中所有幾何圖形和幾何體都是由三角形組成的，這是有理論根據的，感興趣大家可以自己查一些資料深入研究，這裡就簡單介紹，然後就是我們面的 shader 了，不要簡單理解為上色，shader 還具有一些材質特性，例如玻璃材質對光的折射和反射和金屬是不同的。

大家可能著急了，你不是要講web 3D 嗎？趕緊上程式碼演示 magic demo。其實現在我在研究 vue 程式碼，現在越來越發現 coding 不算事，重要的是我們知道應用該怎麼做。

006.JPG

scene-de-theatre.jpg

我們要作為 3D，要做 VR 基本就是搭建 3D 場景。我們需要大家 sence 也就是舞臺，我們角色和道具都放到我們舞臺上，他們都是 mesh 形式出現。然後我們需要攝像機來從遠從近，從不同角度來觀察我們的舞臺。最後我們 webGL 這些渲染到我們的螢幕上。

th.jpg

var scene = new THREE.Scence()
var camera = new THREE.PerspectiveCamera(...)
var render = new THREE.WebGLRenderer()

var box = new THREE.Mesh(...)
scence.add(box)

requestAnimationFrame(function render(){
  renderer,render(scene, camera)
requestAnimationFrame(render)
})

20120824035714387.jpg

讓後想象一下我們要拍攝一個加勒比海盜，我們道具有一條船，船上有一位船長還有一個桌子。桌子和船長是跟隨船一起運動的。桌子上會有鐵球，跟隨桌子一起運動

• ship
  • captain
  • table
    • ball

<three-scene>
  <three-camera position="0 1.6 5" rotation="0 45 0">
</three-camera>
<three-mesh position="0 0 -5">
  <three-geometry type="box"></three-geometry>
<three-material type="basic" color="0x00ff00"></three-material>
</three-mesh>
</three-scene>

（待續）