Javascript 如何在Three.js中创建无限楼层（天际线）？

问题：

var floorTexture = new THREE.ImageUtils.loadTexture( '../../public/assets/grassTile.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var mesh = new THREE.Mesh(floorGeometry, floorMaterial);
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );

所以我遇到了这个：

我有一个中央的地面区域，它已经在我的代码中进行了纹理处理。但我不知道如何让它像链接中看到的那样延伸到地平线

似乎对链接中的内容进行编码的人遇到了某种限制，不得不对超出中心楼层区域的内容使用单一颜色

如何使地板延伸到地平线/创建地平线

---

代码：

var floorTexture = new THREE.ImageUtils.loadTexture( '../../public/assets/grassTile.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var mesh = new THREE.Mesh(floorGeometry, floorMaterial);
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );

---

您可以简单地创建一个巨大的纹理平面。我发现下面的示例没有任何限制。如果您执行了类似的操作并遇到错误/问题，请使用您看到的错误更新您的问题

//准备渲染器
让宽度
让高度
设aspectRatio=function（）{
返回宽度/高度
}
const renderer=new THREE.WebGLRenderer({
反别名：是的，
阿尔法：是的
})
document.body.appendChild（renderer.doElement）
常量摄影机=新的三透视摄影机（32，aspectRatio（），11000）
摄像机。位置。设置（0，10，50）
函数resize（）{
宽度=window.innerWidth
高度=窗内高度
渲染器。设置大小（宽度、高度）
camera.aspect=aspectRatio（）
camera.updateProjectionMatrix（）
}
调整大小（）
window.addEventListener（“调整大小”，调整大小）
const scene=new THREE.scene（）
恒光=新的三方向光（0xffffff，1，无穷大）
灯光位置设置（0,0,1）
摄影机。添加（灯光）
场景.添加（摄影机）
常数太阳=新的三方向光（0xffffcc）
太阳位置集（0,1,0）
场景。添加（太阳）
//填充场景
让geo=新的三个.BoxBufferGeometry（10,10,10）
设mat=新的3.0网格LambertMaterial({
颜色：“红色”
})
设网格=新的三个网格（geo、mat）
场景.添加（网格）
设tex=new THREE.TextureLoader（）.load（“https://upload.wikimedia.org/wikipedia/commons/4/4c/Grass_Texture.png")
tex.各向异性=32
tex.repeat.set（100100）
tex.wrapT=3.0
tex.wrapps=3.wrapping
geo=新的三个平面缓冲几何体（10000，10000）
mat=新的3.0网格LambertMaterial({
地图：特克斯
})
网格=新的三个网格（geo、mat）
网格位置设置（0，-5,0）
mesh.rotation.set（Math.PI/-2,0,0）
场景.添加（网格）
设轴=新的三个向量3（0，1，0）
函数updateCamera（）{
摄像机.位置.应用轴角度（轴，0.01）
}
//渲染功能
函数render（）{
渲染器。渲染（场景、摄影机）
摄影机。注视（场景。位置）
}
让animationLoopId=null
函数animationLoop（）{
animationLoopId=requestAnimationFrame（animationLoop）
updateCamera（）
render（）
}
animationLoop（）

html，
身体{
填充：0；
保证金：0；
溢出：隐藏；
背景：天蓝色；
}

---

这种方法有一个限制/问题：如何防止用户旋转场景以查看平面下方？（我正在使用Orbitcontrols）这将取决于您的鼠标控制器。例如，

OrbitControls

示例可以正确设置最大/最小仰角（/）。最后一件事：将纹理应用于地面时，three.js中的纹理看起来比实际颜色要亮得多。你的例子似乎没有这个问题。这个纹理也有同样的问题吗？我不小心给飞机加了颜色。我已更新代码以使用原始纹理。通过应用灰度

颜色

，可以调整纹理的整体“黑暗度”。例如，如果我将

颜色：0x555555

添加到材质定义中，纹理会变得更暗，因为它与基础颜色混合。奇怪的是，在我的情况下，即使我选择了更“平衡”的颜色，纹理也会立即变得过于饱和。不管怎样，你回答了我的问题：谢谢你：D