threejs纹理平铺实现地面效果
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);
分类:
three.js学习笔记
标签:
threejs
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】