javascript - How to create an infinite floor (skyline) in Three.js? - Stack Overflow

admin管理员组

文章数量:1357268

QUESTION:

So I came across this:

;set=1&char=1

I have the central ground area which is textured already in my code. But I have no idea how to make it extend up to the horizon like seen in the link.

It seems the person who coded what you see in the link hit some kind of limitation and had to use a single color for what extends beyond the central floor area.

How can I make my floor extend to the horizon/ create a skyline ?

---

CODE:

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

QUESTION:

So I came across this:

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

I have the central ground area which is textured already in my code. But I have no idea how to make it extend up to the horizon like seen in the link.

It seems the person who coded what you see in the link hit some kind of limitation and had to use a single color for what extends beyond the central floor area.

How can I make my floor extend to the horizon/ create a skyline ?

---

CODE:

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

• javascript
• three.js

Share Improve this question Follow asked Oct 8, 2018 at 15:04 TheProgrammerTheProgrammer 1,50944 gold badges3030 silver badges5454 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can simply create an enormous textured plane. I found no limitations with the example below. If you implement something like this and encounter errors/problems, update your question with the errors you're seeing.

// 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/wikipedia/mons/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./ajax/libs/three.js/97/three.js"></script>

本文标签： javascriptHow to create an infinite floor (skyline) in ThreejsStack Overflow