7
Tworzę tekst 3D za pomocą WebGL, three.js i THREE.TextGeometry. Jak na razie działa dobrze. Jestem w stanie stworzyć pojedynczą linię tekstu 3D.Jak utworzyć wielowiersz TextGeometry? Jak umieścić go wewnątrz kwadratu, aby owijał się jak tekst html wewnątrz div?
Teraz chcę utworzyć tekst wielowierszowy, na przykład krótki akapit. Najlepiej byłoby, gdyby zawinął się naturalnie, gdy dotrze do granicy pola/prostokąta, w którym go umieścił. Chcę podobne zachowanie, jakie ma standardowy tekst HTML, gdy znajduje się wewnątrz elementu div, zawijając do wielu linii, gdy osiągnie krawędź rodzica div.
Oto jak tworzę pojedynczą linię:
textGeo = new THREE.TextGeometry(
'Hello there. Am I a paragraph? I hope so.',
'size': 30
'height': 2
'font': 'helvetiker'
'weight': 'normal'
'style': 'normal'
bevelThickness: 0.1
bevelSize: 0
bevelEnabled: true
material: 0
extrudeMaterial: 1
)
materialArray = [
new THREE.MeshBasicMaterial({ color: 0xFFFFFF })
new THREE.MeshBasicMaterial({ color: 0x666666, shading: THREE.SmoothShading })
]
textMaterial = new THREE.MeshFaceMaterial(materialArray)
textGeo = new THREE.Mesh(textGeo, textMaterial)
textGeo.position.x = -150
textGeo.rotation.y = de2ra(15)
scene.add textGeo
Jak mogę zrobić to multilinii? Ponadto, jak mogę umieścić to w kwadracie, aby się zawiązał? Jak utworzyć kwadrat?
byłoby możliwe, aby wstępnie obliczyć wielkość i kerningiem każdej litery, a następnie obliczyć, ile liter mieści się w rozmiarze płótna lub geometrii płaszczyzny głównej? – zakdances
Tak, istnieje funkcja canvas measureText. Zobacz ten fragment z [here] (http://www.w3schools.com/tags/canvas_measuretext.asp): 'var c = document.getElementById (" myCanvas ");' 'var ctx = c.getContext ("2d"); '' ctx.font = "30px Arial"; '' var txt = "Hello World" '' ctx.fillText ("width:" + ctx.measureText (txt). width, 10,50) ' ' ctx.fillText (txt, 10,100); ' Możesz ustawić czcionkę płótna jako czcionkę, której chcesz użyć dla tekstu 3D. – disatisfieddinosaur