javascript - Three.js: Renderöi HTML-sivu/DOM-elementti kuution pinnalle?

Yritän muokata Three.js-paketin mukana tulevaa esimerkkitiedostoa canvas_geometry_cube.html ja muuttaa jokaisen kuution pinnan näyttämään HTML-sivua/DOM-elementtiä (mieluiten DOM-elementtiä). Katselin ParticleDOMMaterialia, mutta minulla ei ole aavistustakaan, miten sitä käytetään tai mitä se tekee. Voiko joku auttaa tässä?

Vastaus #1

Päivittääkseni tämän vanhan kysymyksen joistakin viimeaikaisista parannuksista Three.js:ssä ja tulevia lukijoita varten

Three.js tukee nyt itse asiassa CSS3D:tärenderöintitulona, ja siksi voit manipuloida HTML-sivua/DOM-elementtejä käyttämällä CSS 3D -muunnoksia.

Esimerkiksi katso tästä: http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

Vastaus #2

DOMRenderer ei ole täysi 3D-renderöijä, se pystyy vain soveltamaan z-indeksejä ja skaalausta, joten pyörivä kuutio DOMRendererin kautta on poissuljettu.

Voisit käyttää html2canvasia ja soveltaa sitä kubin bitmap-tekstuurina. En ole oikein käyttänyt html2canvasia, mutta demot ovat melko vaikuttavia. Tulokset voivat vaihdella.

Ehkä parempi vaihtoehto projektiisi olisi CSS3:n 3D-transformaatiot. On olemassa kirjasto, joka auttaa tämänkaltaisessa ongelmassa, nimeltään traqball, https://github.com/dirkweber/traqball.js.

Voit katsoa demoa täällä: http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/index.html