具有png圖像的3D動畫
[英]3D Animation with png image
問題描述
我嘗試使用HTML5 / JS / CSS為小圖像制作動畫。 它應該沿z軸旋轉。 我知道如何使用x- / y軸執行此操作，但z軸似乎有所不同。
我找不到有關如何執行此操作的很好的教程文檔。
如果有人可以給我一些提示，那就太好了！
到目前為止謝謝！
2 個解決方案
解決方案1
1 2012-07-20 08:31:21
我認為您最感興趣的是3D渲染功能。 WebGL可以為您提供幫助。
有很多教程可以幫助您開始使用webGL。 這很簡單，這是您需要執行的一般步驟。
- 使用webGL初始化畫布
- 創建一個新的gl紋理
- 加載圖像並綁定到紋理
- 創建基本的四邊形並在使用精美的新紋理進行渲染時對其進行紋理化
- 在3D空間中旋轉四邊形
- 渲染！
這里有太多代碼無法詳細描述如何執行此操作。 查看教程，如果還有其他問題，請回來。
祝好運！
解決方案2
0 2012-12-10 03:40:00
HTML：
<html>
<body>
<div id="rotated">
HelloWorld
</div>
</body>
</html>
CSS：
#rotated {
height:200px;
width:100px;
background-color:red;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
為了在3維空間中旋轉對象，可以使用HTML5 CSS3d變換。 確保添加上面顯示的“ preserve-3d”渲染樣式，否則對象將顯示3d對象的二維表示。
如果要在javascript中更改該樣式，則為：
document.getElementById('rotated').style['webkitTransform'] = 'rotateZ(45deg)';
document.getElementById('rotated').style['mozTransform'] = 'rotateZ(45deg)';
document.getElementById('rotated').style['transform'] = 'rotateZ(45deg)';
已經有很多CSS3d教程。 確保您使用的是最新版本的支持CSS3d的瀏覽器，例如firefox或chrome。
Three.js-在3D球體周圍應用紋理（2D png圖像）顯示為黑色
[英]Three.js - Applying a texture( 2D png image ) around 3D sphere appears black
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.