javascript - 如何在 Three.js 中创建无限的地板(天际线)？

Question

问题:

所以我遇到了这个:

https://skin-tracker.com/pubg/outfit?no=000000000000000000000000000&set=1&char=1

我的代码中已经有中央地面区域的纹理。但我不知道如何使其延伸到地平线，如链接中所示。

对您在链接中看到的内容进行编码的人似乎遇到了某种限制，必须对超出中央地板区域的区域使用单一颜色。

如何让我的地板延伸到地平线/创建天际线？

<小时/>

代码:

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 );

Answer 1

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

// prepare the renderer

let WIDTH
let HEIGHT
let aspectRatio = function() {
  return WIDTH / HEIGHT
}

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
})
document.body.appendChild(renderer.domElement)

const camera = new THREE.PerspectiveCamera(32, aspectRatio(), 1, 1000)
camera.position.set(0, 10, 50)

function resize() {
  WIDTH = window.innerWidth
  HEIGHT = window.innerHeight
  renderer.setSize(WIDTH, HEIGHT)
  camera.aspect = aspectRatio()
  camera.updateProjectionMatrix()
}
resize()

window.addEventListener("resize", resize)

const scene = new THREE.Scene()

const light = new THREE.DirectionalLight(0xffffff, 1, Infinity)
light.position.set(0, 0, 1)
camera.add(light)

scene.add(camera)

const sun = new THREE.DirectionalLight(0xffffcc)
sun.position.set(0, 1, 0)
scene.add(sun)

// populate the scene

let geo = new THREE.BoxBufferGeometry(10, 10, 10)
let mat = new THREE.MeshLambertMaterial({
    color: "red"
})
let mesh = new THREE.Mesh(geo, mat)
scene.add(mesh)

let tex = new THREE.TextureLoader().load("https://upload.wikimedia.org/wikipedia/commons/4/4c/Grass_Texture.png")
tex.anisotropy = 32
tex.repeat.set(100, 100)
tex.wrapT = THREE.RepeatWrapping
tex.wrapS = THREE.RepeatWrapping
geo = new THREE.PlaneBufferGeometry(10000, 10000)
mat = new THREE.MeshLambertMaterial({
  map: tex
})
mesh = new THREE.Mesh(geo, mat)
mesh.position.set(0, -5, 0)
mesh.rotation.set(Math.PI / -2, 0, 0)
scene.add(mesh)


let axis = new THREE.Vector3(0, 1, 0)
function updateCamera() {
  camera.position.applyAxisAngle(axis, 0.01)
}

// rendering functions

function render() {
  renderer.render(scene, camera)
  camera.lookAt(scene.position)
}

let animationLoopId = null

function animationLoop() {
  animationLoopId = requestAnimationFrame(animationLoop)
  updateCamera()
  render()
}

animationLoop()

html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: skyBLue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.js"></script>