const geometry = new THREE.PlaneGeometry(20000, 20000);
//紋理貼圖載入器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法載入影像,返回一個紋理物件Texture
const renderer = new THREE.WebGLRenderer();
const texture = texLoader.load("./static/wh.jpg", () => {
renderer.render(scene, camera);
});
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv兩個方向紋理重複數量
texture.repeat.set(200, 200); //注意選擇合適的陣列數量
const material = new THREE.MeshLambertMaterial({
// 設定紋理貼圖:Texture物件作為材質map屬性的屬性值
map: texture, //map表示材質的顏色貼圖屬性
});
const mesh = new THREE.Mesh(geometry, material);
// 旋轉矩形平面
mesh.rotateX(-Math.PI / 2);
// mesh.scale.set(0.2, 0.2, 0.2);
const group = new THREE.Group();
group.add(mesh);
scene.add(group);
threejs紋理平鋪實現地面效果
相關文章
- 淺析實現平鋪排列多個View的效果View
- threejs+vue3實現煙花效果JSVue
- 如何在 ThreeJS 中實現輝光效果JS
- 純 CSS 實現斜紋效果CSS
- Android水波紋效果實現Android
- jquery實現的背景圖鋪滿全屏效果jQuery
- 如何用canvas實現大波紋灌水效果Canvas
- Android 圖片平鋪實現方式Android
- 使用CSS實現逼真的水波紋點選效果CSS
- css實現螺紋動態進度條效果CSS
- C# 處理PPT水印(三)—— 在PPT中新增多行(平鋪)文字水印效果C#
- css3和jQuery實現的點選出現波紋效果CSSS3jQuery
- css3實現的滑鼠懸浮出現輻射波紋效果CSSS3
- 浪起來!使用 drawBitmapMesh 實現模擬水波紋效果
- Android 設定主題實現點選波紋效果Android
- Flutter 實現類似美團外賣店鋪頁面滑動效果Flutter
- Flutter | 如何實現一個水波紋擴散效果的 WidgetFlutter
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS平鋪背景圖片實現百分比圖表CSS
- 例2.4 使用列表推導式實現巢狀列表的平鋪巢狀
- ThreeJS 的效果樣例流水管線(五)JS
- Webgl 紋理Web
- IOS 平鋪圖片iOS
- Item點選水波紋效果
- Threejs實現滴滴官網首頁地球動畫JS動畫
- 圖形學之紋理後續/WebGL多紋理處理Web
- Unity iOS 使用 ASTC 格式紋理實踐UnityiOSAST
- 法線紋理
- 直播平臺開發,使用swiper實現輪播效果
- 模組圖片平鋪、拉伸
- RecyclerView點選新增波紋效果View
- Android 水波紋效果的探究Android
- iOS動畫-擴散波紋效果iOS動畫
- 水紋效果(Water)源程式. (轉)
- 紋理優化:讓你的紋理也 “瘦” 下來優化
- 實現聚焦效果
- flutter與unity的碰撞--opengl紋理共享實現flutter與unity介面的融合FlutterUnity
- Unity安卓共享紋理Unity安卓