Làm cách nào để tạo một đa dòng TextGeometry? Làm thế nào để đặt nó bên trong một hình vuông để nó kết thúc tốt đẹp như văn bản html không bên trong một div?

Tôi đang tạo một số văn bản 3D bằng cách sử dụng WebGL, three.js và THREE.TextGeometry. Nó hoạt động tốt cho đến nay. Tôi có thể tạo một dòng văn bản 3D.Làm cách nào để tạo một đa dòng TextGeometry? Làm thế nào để đặt nó bên trong một hình vuông để nó kết thúc tốt đẹp như văn bản html không bên trong một div?

Bây giờ tôi muốn tạo văn bản nhiều dòng, như đoạn văn ngắn. Tốt hơn, tôi muốn nó quấn tự nhiên khi nó đạt đến biên giới của một hộp/hình chữ nhật đặt nó vào. Tôi muốn có một hành vi tương tự mà tiêu chuẩn HTML văn bản có khi nó bên trong của một div, gói nhiều dòng khi nó đạt đến cạnh của div cha của nó.

Đây là cách tôi đang tạo ra một dòng duy nhất:

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

Làm thế nào tôi có thể làm cho nhiều dòng này? Ngoài ra, làm thế nào tôi có thể đặt này bên trong một hình vuông để nó kết thúc tốt đẹp? Làm cách nào để tạo hình vuông?

Nguồn

2013-08-04 zakdances

API cho three.js khá thấp. Tôi không tin điều này là có thể nói chung. Một cách bạn có thể giải quyết vấn đề này là tạo ra nhiều cá thể TextGeometry, một trường hợp trên mỗi dòng và định vị chúng theo cách thủ công tại các tọa độ y khác nhau.

Nguồn

2013-08-11 10:15:37 disatisfieddinosaur

Nó sẽ có thể tính toán trước kích thước và kerning của mỗi chữ cái, sau đó tính toán có bao nhiêu chữ cái sẽ phù hợp với kích thước của canvas hoặc hình dạng mặt phẳng của bố mẹ? – zakdances

Có, có chức năng canvasText. Xem đoạn trích này từ [tại đây] (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); ' Bạn có thể đặt phông chữ của canvas thành phông chữ bạn sẽ sử dụng cho văn bản 3D. – disatisfieddinosaur

Một phương pháp có thể là draw your text in HTML and render it in the 3D scene. Cách tiếp cận khác sẽ là khởi tạo văn bản, kiểm tra xem nó lớn bao nhiêu và chia nó thành nhiều trường hợp TextGeometry nếu nó lớn hơn chiều rộng mong muốn tối đa của bạn, được bù đắp trên trục y theo chiều cao. Bạn có thể lấy kích thước của hình học với geometry.boundingBox (sau khi gọi geometry.computeBoundingBox()) là THREE.Box3. hộp bounding có min và max tính mà là vectơ biểu diễn đỉnh góc đối diện, vì vậy bạn có thể nhận được kích thước của một hình học dọc theo một trục được bằng cách gọi ví dụ:

geometry.boundingBox.max.x - geometry.boundingBox.min.x

Nguồn

2013-08-13 06:43:35 IceCreamYou

Làm cách nào để tạo một đa dòng TextGeometry? Làm thế nào để đặt nó bên trong một hình vuông để nó kết thúc tốt đẹp như văn bản html không bên trong một div?

Trả lời

Các vấn đề liên quan