軟體技術-WebVR-AFrame文字的實現

WebVR Three.js · 發表 2019-04-05 22:00:27

摘要：歡迎關注我的專欄( つ•̀ω•́)つ【人工智慧通識】 Three.js Three.js是一款用於網頁3D效果的框架，它可以在網頁內實現非常炫酷的效果。官方網站點此進入 Three.js官網包含了很多效果驚人的3D網站。 ...

歡迎關注我的專欄( つ•̀ω•́)つ【人工智慧通識】

Three.js

Three.js是一款用於網頁3D效果的框架，它可以在網頁內實現非常炫酷的效果。

官方網站點此進入

Three.js官網包含了很多效果驚人的3D網站。

Aframe.js

Aframe.js是一款開源的網頁3DVR技術解決方案，開源用html標記的方法快速搭建具有3DVR功能的網站頁面。

官方網站點此進入

快速上手Aframe.js

首先，需要引入 script 指令碼(或者從文末下載到本地使用)：

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>

然後需要在 body 中新增場景單元 a-scene 標記:

<a-scene></a-scene>

然後再向場景裡面新增一個盒子 a-box ：

<a-scene>
<a-box color="red"></a-box>
</a-scene>

這時候預覽頁面，你需要用滑鼠按住向下旋轉視角，在下面就能看到一個紅色矩形。

因為預設情況的攝像機是在原點人的高度位置（0，1.6，0）的。你可以新增一個攝像機 a-camera 標記，用 position 屬性來移動它：

<a-scene>
<a-box color="red"></a-box>
<a-entity>
<a-camera position="0 0 5"></a-camera>
</a-entity>
</a-scene>

我們複製幾個 box ，移動一下位置，也可以新增一個球體 a-sphere ：

<a-scene>
<a-box color="red" position="2 00"></a-box>
<a-sphere color="green" radius="1"></a-sphere>
<a-box color="blue" position="-2 00"></a-box>
<a-entity>
<a-camera position="0 0 3"></a-camera>
</a-entity>
</a-scene>

預設情況會有一個照亮整個世界的環境光和一個來自左上方模擬太陽的燈光，我們可以手工新增一個燈光 a-light ，這時候預設兩個燈光就會自動關閉：

<a-scene>
<a-box color="white" position="2 00"></a-box>
<a-sphere color="white" radius="1"></a-sphere>
<a-box color="white" position="-2 00"></a-box>
<a-entity>
<a-camera position="0 0 3"></a-camera>
</a-entity>
<a-light type="point" position="2 5 3"distance="20" color="#FFCC00" intensity="1"></a-light>
<a-light type="ambient" position="2 5 3"color="#00CCFF" intensity="0.6"></a-light>
</a-scene>

這時候可能很難理解燈光和物體之間的關係，你可以按快捷 ctrl+alt+i 開啟Aframe的監視器來檢視，它看起來很像是一個三維軟體的介面，左鍵按住拖拽旋轉，右鍵按住拖拽移動，滾輪放縮。

我們新增一個灰色的天空 a-sky ，再給幾何體新增一些材質 material 屬性。

<a-scene>
<a-sky color="gray"></a-sky>
<a-box position="2 00" material="color:red;opacity:0.3;side:double"></a-box>
<a-sphereradius="1" material="metalness:0.65;color:white"></a-sphere>
<a-box color="#CCC" position="-2 00" material="color:green;opacity:0.3;side:double;blending:additive"></a-box>
<a-entity>
<a-camera position="0 0 3"></a-camera>
</a-entity>
<a-light type="point" position="2 8 5"distance="20" color="#FFCC00" intensity="1.5"></a-light>
<a-light type="ambient"color="#00CCFF" intensity="0.6"></a-light>
</a-scene>

在這裡 opacity 指透明， metalness 指金屬性質，影響高光強度和大小， blending 表示混合模式，加亮或減暗，如果需要發光則要 emissiveIntensity:100;emissive:red; 聯合使用。

Aframe.js中的文字

Aframe.js中的文字有三種實現形式：

3D立體文字。需要結合 aframe-text-geometry-component.js 然後在 text-geometry 屬性設定使用，官方說明點這裡
使用SDF影象文字格式，這也是預設的文字屬性text即可實現。它是把可能用到的文字打包成一個圖片，然後在3D裡面拼接圖片中的文字使用，可以參考這個示例檔案。
實時元素圖片文字。它是把網頁div元素實時截圖再放到3D場景裡面，需要 aframe-html-shader.js 並在 material 屬性中指定 shader:html;target:#label-1; 才能使用，這裡的 #target 是指要轉成圖片的元素id。

上圖的頁面可以參考這個連結

下面是它的程式碼：

<!DOCTYPE html>
<!-- saved from url=(0052)https://aframe.io/aframe/examples/showcase/anime-UI/ -->
<html class="a-fullscreen">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HourCode</title>
<script src="/js/aframe-master.min.js"></script>
<script src="/js/aframe-text-geometry-component.min.js"></script>
<script src="/js/aframe-html-shader.min.js"></script>
</style>

<body>




<a-scene renderer="colorManagement: true;" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="">
<!-- 素材 -->
<a-assets>
<a-asset-item id="optimerBoldFont" src="/font/optimer_bold.typeface.json"></a-asset-item>
<a-asset-item id="engine" src="/3d/engine.glb"></a-asset-item>
<a-mixin id="image" geometry="height: 2; width: 2"></a-mixin>
<a-mixin id="toggleAnimation" animation="property: visible; from: false; to: true; dur: 1" visible="false">
</a-mixin>
<audio id="blip1" src="/sound/321103__nsstudios__blip1.wav"></audio>
<audio id="blip2" src="/sound/321104__nsstudios__blip2.wav"></audio>
</a-assets>

<!-- 背景環境模型 -->
<a-entity position="0 0 -3">
<a-gltf-model src="#engine" rotation="90 0 0" scale="18 18 18" gltf-model=""></a-gltf-model>
</a-entity>

<!-- 選單 -->
<a-entity position="-4 0 -6" scale="2 2 2" rotation="0 0 0">
<a-box id="Train" material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable"
color="pink"></a-box>
<a-box id="Train" scale="1.25 1.25 1.25"
material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable" color="pink">
</a-box>
<a-entity material="metalness: 0.85;;color:#ff88ff" position="-0.4 -0.08 0"
text-geometry="value:SHOW; font: #optimerBoldFont;height:0.1;size:0.2" color="#333333"></a-entity>
<a-entity scale="8 8 8" position="0 1.2 0" text="color: #ffccff; font:dejavu; align: center;value: SHOW">
</a-entity>
</a-entity>

<a-entity position="0 0 -6" scale="2 2 2" rotation="0 0 0">
<a-box id="Train" material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable"
color="blue"></a-box>
<a-box id="Train" scale="1.25 1.25 1.25"
material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable" color="blue">
</a-box>
<a-entity material="metalness: 0.85;;color:#88ff88" position="-0.4 -0.08 0"
text-geometry="value:TRAIN; font: #optimerBoldFont;height:0.1;size:0.2" color="#333333"></a-entity>
<a-entity scale="8 8 8" position="0 1.2 0" text="color: #ccccff; font:dejavu; align: center;value: TRAIN">
</a-entity>
</a-entity>

<a-entity position="4 0 -6" scale="2 2 2" rotation="0 0 0">
<a-box id="Train" material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable"
color="green"></a-box>
<a-box id="Train" scale="1.25 1.25 1.25"
material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable" color="green">
</a-box>
<a-entity material="metalness: 0.85;color:#88ff88" position="-0.4 -0.08 0"
text-geometry="value:LEARN; font: #optimerBoldFont;height:0.1;size:0.2"></a-entity>
<a-entity scale="8 8 8" position="0 1.2 0" text="color: #ccffcc; font:dejavu; align: center;value: LEARN">
</a-entity>
</a-entity>


<!-- 標籤文字 -->

<div id='labels' style="display:none">
<div id="label-1" style="position: absolute;color: #ffaaff;font-size: 100px;font-weight: bold">表演臺</div>
<div id="label-2" style="position: absolute;color: #aaaaff;font-size: 100px;font-weight: bold">訓練場</div>
<div id="label-3" style="position: absolute;color: #aaffaa;font-size: 100px;font-weight: bold">學習營</div>
</div>

<a-entity>
<a-entity geometry="primitive: plane" position="-4 -2 -6" scale="0.5 0.5 0.5"
material="shader:html;target:#label-1;transparent:true;ratio:height;fps:1;"> </a-entity>
<a-entity geometry="primitive: plane" position="0 -2 -6" scale="0.5 0.5 0.5"
material="shader:html;target:#label-2;transparent:true;ratio:height;fps:1;side:double;"> </a-entity>
<a-entity geometry="primitive: plane" position="4 -2 -6" scale="0.5 0.5 0.5"
material="shader:html;target:#label-3;transparent:true;ratio:height;fps:1;side:double;"> </a-entity>
</a-entity>


<!-- 攝像機 -->
<a-entity position="0 0 0" rotation="0 0 0">
<a-camera position="0 0 0" near="0.1" camera="" rotation="" look-controls="" wasd-controls=""></a-camera>
</a-entity>

<!-- 燈光 -->
<a-light id="left" type="point" color="#ff00ec" distance="10" decay="1" position="-2 2 -4" intensity="10"
animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light=""></a-light>

<a-light id="right" type="point" color="#ffff00" distance="20" decay="4" position="4 0 -8" intensity="16"
animation="property: light.intensity; from: 0; to: 20; delay: 500; dur: 500" light=""></a-light>

<a-light id="top" type="point" color="#00a0ff" distance="10" decay="2" position="0 2 -10" intensity="10"
animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light=""></a-light>

<a-light id="bot" type="point" color="#3fff00" distance="10" decay="2" position="-2 -5 -10" intensity="10"
animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light=""></a-light>

<a-light id="farright" type="point" color="#ff4400" distance="14" decay="6" position="-5 4 -12" intensity="1"
animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light=""></a-light>

<a-light id="farleft" type="point" color="#0000ff" distance="20" decay="6" position="5 0 -12" intensity="2"
animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light=""></a-light>

<a-light id="env" type="point" color="#00aaff" distance="20" decay="6" position="0 0 0" intensity="10"
animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light=""></a-light>
<!-- <a-light type="ambient" intensity="1" color="#00" light=""></a-light> -->

<!-- 啟動聲效 -->
<a-entity sound="autoplay: true; src: #blip1"></a-entity>
<a-entity sound="autoplay: true; src: #blip2"></a-entity>

</a-scene>


<audio controls="controls" style="display: none;"></audio>
</body>

<script>
var tmr=setInterval(function(){
if (document.querySelector("canvas")){
setTimeout(()=>{
document.querySelector("#labels").style.display="block"
},1500)
clearInterval(tmr)
}
},100)
</script>

</html>

你可以訪問頁面連結 http://syc.10knet.com/ 然後另存為本地頁面，以此來獲得全部相關的素材資源和js檔案。

歡迎關注我的專欄( つ•̀ω•́)つ【人工智慧通識】

每個人的智慧新時代

如果您發現文章錯誤，請不吝留言指正；

如果您覺得有用，請點喜歡；

如果您覺得很有用，歡迎轉載~

END