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紋理平鋪實現地面效果
相關文章
- 如何在 ThreeJS 中實現輝光效果JS
- threejs+vue3實現煙花效果JSVue
- ThreeJs-05紋理材質高階操作JS
- ThreeJs-04詳解材質與紋理JS
- 純 CSS 實現斜紋效果CSS
- 使用CSS實現逼真的水波紋點選效果CSS
- 浪起來!使用 drawBitmapMesh 實現模擬水波紋效果
- C# 處理PPT水印(三)—— 在PPT中新增多行(平鋪)文字水印效果C#
- Flutter | 如何實現一個水波紋擴散效果的 WidgetFlutter
- Flutter 實現類似美團外賣店鋪頁面滑動效果Flutter
- ThreeJS 的效果樣例流水管線(五)JS
- 例2.4 使用列表推導式實現巢狀列表的平鋪巢狀
- Item點選水波紋效果
- Android 水波紋效果的探究Android
- Webgl 紋理Web
- 圖形學之紋理後續/WebGL多紋理處理Web
- Unity iOS 使用 ASTC 格式紋理實踐UnityiOSAST
- Threejs實現滴滴官網首頁地球動畫JS動畫
- 直播平臺開發,使用swiper實現輪播效果
- RecyclerView點選新增波紋效果View
- 法線紋理
- 實現聚焦效果
- 紋理最佳化:讓你的紋理也 “瘦” 下來
- Jetapck Compose 去除點選水波紋效果
- iOS動畫-擴散波紋效果iOS動畫
- flutter與unity的碰撞--opengl紋理共享實現flutter與unity介面的融合FlutterUnity
- OpenGL 紋理詳解
- 直播平臺搭建原始碼,bootstrap實現圖片輪播效果原始碼boot
- 直播平臺原始碼,Android自定義View實現呼吸燈效果原始碼AndroidView
- css 實現打分效果CSS
- webgl實現火焰效果Web
- webgl實現故障效果Web
- js實現打字效果JS
- canvas實現波浪效果Canvas
- threejs+tweenjs實現3D粒子模型切換JS3D模型
- 印表機列印出現橫條紋怎麼處理 印表機出現一條一條的橫紋
- 漪漣波紋效果 css3 animationCSSS3
- 如何使用jQuery建立彩色條紋表格效果?jQuery