Pertanyaan Three.JS Terapkan Tekstur ke Bagian Lingkup


EDIT: Saya telah memutuskan bahwa menerapkan tekstur ke bagian bola adalah pendekatan yang benar, tetapi tidak tahu bagaimana menerapkannya. Saya akan membuka pertanyaan baru, tetapi merasa lebih baik untuk anak cucu untuk memperbaiki yang satu ini sehingga orang lain bisa dibantu.

lihat pertanyaan asli di sini...

Saya menggunakan tekstur yang dibuat menggunakan elemen Canvas sebagai gambarnya. Sangat mudah untuk menerapkan tekstur ini ke seluruh bola, tetapi saya mencoba menerapkan tekstur ini hanya ke bagian bola.

Saya bisa mencapai ini dengan meningkatkan ukuran Canvas, membatasi gambar saya dengan ruang transparan. Namun, ini juga meningkatkan ukuran tekstur, ke ukuran yang tidak dapat diterima. Ruang transparan juga membutuhkan memori tekstur dan sebagian besar klien tidak dapat menangani ukuran tekstur yang dibuat ... Terutama ketika saya mencoba membuat tekstur yang sangat kecil dan tinggi; karena semakin kecil dan tinggi res teksturnya, semakin transparan saya harus membungkusnya ...

Anyway, ternyata ada sesuatu yang disebut "UVs" dalam Grafik 3D yang memungkinkan hal seperti itu dilakukan ... Saya tidak yakin bagaimana menerapkan solusi seperti itu di THREEJS.

Ini adalah bagaimana saya membuat Tekstur / Material saya:

scene = new THREE.Scene();

geometry = new THREE.SphereGeometry(500, 50, 50);

texture = new THREE.Texture(document.getElementById('myCanvas'));
texture.needsUpdate = true;
material = new THREE.MeshBasicMaterial({
  map: texture
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Bagaimana saya bisa mengubahnya sehingga tekstur hanya berlaku untuk bagian bola?

Saya telah melihat ini: Bagaimana memetakan gambar tekstur ke bagian bola, atau bagaimana memotong (memotong) persegi panjang permukaan bola?

Tapi pengalaman saya dengan grafik 3d membuat saya tidak bisa mengerti jawabannya ...

Haruskah saya belajar lebih banyak tentang pemrograman Shader sebelum melanjutkan dengan proyek ini?

Saya telah membuat JSFiddle menguraikan masalah ini: http://jsfiddle.net/RCmBU/

Bagaimana saya bisa mengaplikasikan kanvas hitam ke hanya bagian bola yang ditunjukkan oleh titik-titik merah?

Setiap bantuan tentang masalah ini akan sangat dihargai. Terima kasih!


5
2018-01-03 16:18


asal


Jawaban:


Anda mungkin bisa menggunakan model 'tingkat detail' yang berbeda untuk memberikan tekstur terbaik tergantung pada kemampuan klien. Saya tidak tahu apakah ini cocok untuk aplikasi Anda, tetapi mungkin ada baiknya untuk melihatnya:

Contoh LOD


0
2018-01-03 19:24



gunakan 2 kanvas:

1 dari svg ke kanvas

1 dari kanvas ke kanvas yang lebih kecil

EDIT: para uv memutuskan di mana akan ditempatkan pada bola.


0
2018-01-03 19:41