threejs學習筆記 3

2022-07-16 12:51:09 字數 666 閱讀 7670

點選canvas區域,可以停止方塊的轉動,再次點選開啟轉動。

這次的練習主題是貼紋理,不再是簡單的放個顏色了。

1)紋理的實現是通過material實現的,具體**如下:

var mapurl = "a.png",

map = three.imageutils.loadtexture(mapurl),

material = new three.meshphongmaterial(),

geometry = new three.cubegeometry(1,1,1),

cube = new three.mesh(geometry,material);

2)render接收乙個引數antialias,實現抗鋸齒。具體**如下:

renderer = new three.webglrenderer();

我開啟了抗鋸齒,但實際上效果並不明顯,我猜也許和我的顯示卡太差有關係吧。

3) three.imageutils.loadtexture是用來實現載入的,在載入完成以前,紋理不會顯示出來,顯示成黑色,我猜估計隱式地做了個image.onload的監聽。在實際案例時,我想最好先做個loader載入器,先把載入完成。

threejs學習筆記 材質

meshbasematerial 網格基礎材質 meshbasematerial 網格基礎材質 是一種非常簡單的材質,這種材質不會考慮光照的影響。使用這種材質網格備渲染成簡單的平面多邊形,可以用它賦予幾何體一種簡單的顏色,並且可以顯示幾何體的線框。meshdepthmaterial 網格深度材質 m...

threejs學習筆記 10

1 webgl的原生介面是不帶陰影功能的,而threejs對陰影做了封裝,簡單設定幾個引數就可以實現陰影了。renderer.shadowmapenabled true light.castshadow true cubemesh.castshadow true plane.receiveshado...

threejs學習筆記 6

1 cylindergeometry類是用於設定圓柱的,接收上截面直徑 下截面直徑 高度 截面數 是否封頂蓋這幾個引數。但事實上,如果將截面數設定為乙個比較小的數字,比如3 4之類的,就完全看不出是個圓柱了!只有將截面數設得比較大時,才像個圓柱。如果將上截面直徑設為0,可以成為乙個錐體。是否封蓋這個...