Aframe VR曲面とテキスト

Aframe APIは曲面画像をサポートしています。しかし、湾曲した画像のほかに、私は曲がったテキストや平面を作りたいと思っています。誰かがこれを行う方法を私を助けることができますか？Aframe VR曲面とテキスト

エンティティを作成する必要があると思いますが、どのプロパティを設定する必要があるのかわかりません。

2017-07-13 Cees Mandjes

私は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>

このexample glitch I made for full answer

https://aframe-curved-text.glitch.me/

を参照してください。

出典

2017-07-18 22:00:03 ngokevin

答えて

関連する問題