顯示具有 ThreeJS 標籤的文章。 顯示所有文章
顯示具有 ThreeJS 標籤的文章。 顯示所有文章
2023-03-14

[ThreeJS] 噴水粒子

›
要完成這個效果有三個問題要解決 自然的粒子分布 粒子的拋物線移動 粒子的擴散效果 我採用簡單的方式達成 用亂數產生分段的粒子團 用二次貝茲曲線建立拋物線 用粒子團的放大產生擴散效果 因為我用簡單的亂數分布粒子，粒子團會有立方體現...
1 則留言:
2023-03-07

[ThreeJS] 單次動畫

›
/* 單次動畫 */ function animateOnce(mixer, prop, dur, values) { /* 停止 & 清除 先前的動畫 */ mixer.stopAllAction(); mixer.uncacheRoot(...

[ThreeJS] 用 SVG 貼圖顯示中文

›
HTML <div id="Container"></div> <div id="LabelTpl" style="display:none;"> <svg x...

[ThreeJS] 解決陰影造成的條紋

›
 會出現條紋現象是因為雙面材質，只要設置為單面材質就可以解決。 /* 載入模型 */ new THREE.GLTFLoader().load('Model.glb', function (gltf) { const model = gltf.sc...

[ThreeJS] DragControls 拖移出現異常的原因

›
 需要進行拖移的模型其[原點]最好設置在[幾何中心] 因為拖移出現異常，我為了解決這個問題，認真看 DragControls 的原始碼，所有處理拖移的邏輯都相當周全，基本上不應該出現異常現象。 在用 console.log 查看拖移的座標數值時，才發現原來是模型的[原點]設置...

[ThreeJS] 載入壓縮過 GLTF 檔

›
/* 解壓縮 lib 載入器 * https://threejs.org/docs/#examples/en/loaders/DRACOLoader * https://google.github.io/draco/ */ const dracoLoader = new ...
2023-03-03

[ThreeJS] 材質發黑是因為金屬屬性

›
剛開始接觸 ThreeJS 時，被材質發黑這個問題，困擾很久，一直沒找到問題點，不管怎麼增加 HemisphereLight 都無效，用了四個方向 DirectionalLight 才呈現能接受的效果。 後來才發現問題點是金屬屬性 (metalness)，因為金屬有鏡面效果會映...