0
A
回答
1
我會用https://github.com/mayognaise/aframe-html-shader來創建曲線文本。彎曲的文字是部分圓柱體,其材質在內部呈現使用repeat: -1 1
。
HTML着色器使用我們可以用於文本的HTML爲我們創建一個紋理,然後將該紋理應用到圓柱體。不幸的是,我們必須手動應用repeat: -1 1
,因爲該選項未公開。粗糙的想法...
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-html-shader.min.js">
</head>
<body>
<script>
AFRAME.registerComponent('update-repeat', {
dependencies: ['material'],
init: function() {
var texture = this.el.components.material.material.map;
texture.repeat = new THREE.Vector2(-1, 1);
texture.needsUpdate = true;
}
});
</script>
<div id="texture" style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden">
<p style="position: relative; top: 20px; font-size: 72px">HELLO HELLO</p>
<p style="position: relative; top: 20px; font-size: 48px">curvy text</p>
</div>
<a-scene>
<a-entity geometry="primitive: cylinder; radius: 2; segmentsRadial: 48; thetaLength: -160; openEnded: true"
material="shader: html; target: #texture; side: double; width: 500; height: 300; transparent: true" update-repeat position="0 0 -4" rotation="0 -90 0"></a-entity>
<a-sky color="#FAFAFA"></a-sky>
</a-scene>
</body>
</html>
相關問題
- 1. VR for matlab,MS excel和3D曲線
- 2. 自動在aframe中進入vr模式,無需點擊vr按鈕
- 3. [aframe]如何在aframe中顯示中文字符?
- 4. 試圖用nunjucks和aframe模板創建動態曲線。
- 5. AFRAME:如何把THREE.LineBasicMaterial在AFRAME
- 6. DICOM - 隱VR字典
- 7. 使用Aframe和Angular 2
- 8. iPhone中的Ionic2和Aframe
- 9. SDL曲面和BMP
- 10. Aframe - 使用Google Cardboard設置?
- 11. Aframe資產卸載
- 12. 旋轉和扭曲變形的文字
- 13. CORS爲AFRAME
- 14. 通過A-Frame的VR模式按鈕隱藏頁面元素
- 15. 谷歌VR在iOS上查看側面
- 16. 面料彎曲文字間距/字距問題
- 17. AFRAME loadin .dae動態
- 18. Aframe和Angular2模型不會加載
- 19. 反應,和/ AFRAME對象分配錯誤
- 20. AFrame擴展組件和覆蓋
- 21. aframe /動畫:如何暫停和恢復?
- 22. a-frame點擊時VR旋轉框
- 23. 適用於Samsung Gear VR的Google VR SDK?
- 24. 當Web頁面導入爲HTML模板時,框架Web VR可防止從引導滾動
- 25. 紋理AFRAME對象
- 26. 隨機Aframe環境
- 27. aframe動畫與OBJ
- 28. 縮放Aframe模型
- 29. AFrame刪除紋理
- 30. 我可以將Google街景視圖嵌入AFrame嗎?