Guide for generating an endless floor (skyline) using Three.js

Question

Guide for generating an endless floor (skyline) using Three.js

QUERY:

I recently stumbled upon this intriguing design:

In my code, I have successfully textured the central ground area. However, I am unsure how to extend it all the way up to the horizon like in the reference link.

It appears that the developer of the referenced design encountered some technical constraints and was forced to use a single color for the portion beyond the central floor area.

Can you provide guidance on how I can make my floor stretch to the horizon or create a skyline effect?

SAMPLE 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

Answer 1

Answer №1

One way to create a visually appealing textured plane is by following the example below. This method has no apparent limitations, but if you encounter any errors or issues during implementation, feel free to seek help and update your question with specific details.

// Setting up 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)

// Adding elements to 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)
}

// Functions for rendering

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>

Answer 2

One way to create a visually appealing textured plane is by following the example below. This method has no apparent limitations, but if you encounter any errors or issues during implementation, feel free to seek help and update your question with specific details.

// Setting up 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)

// Adding elements to 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)
}

// Functions for rendering

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>

Guide for generating an endless floor (skyline) using Three.js

Answer №1

Similar questions

Create a CSS popup alert that appears when a button is clicked, rather than using

What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

Utilizing React to retrieve API data and implement search input filtering with autocomplete functionality

Ways to automatically check a checkbox using jQuery

Obtaining the IP address of the client's request

What is the reason that the Angular foreach loop does not allow the use of break or return to exit the loop?

Introduction to Interactive HTML Pinball Game

Can I use Javascript to make changes to data stored in my SQL database?

Gradual disappearance of preloader as the page loads

"Troubleshooting: show() Function Not Functioning Properly

Disabling a clicked button within a repetitive list in React: A step-by-step guide

What is the best way to display an HTML page in the bottom right corner instead of within a div?

What is the process for attaching text or labels to an object, similar to applying decals?

JavaScript Error: Issue detecting two distinct GridView checkboxes

Anticipating the completion of post requests

Employ a directive within a different directive

Reprinting information from my server / overlooked a task

What are the steps involved in manipulating objects within an asynchronous result object?

npm not working to install packages from the package.json file in the project

Retrieving data from a child node using Jsonpath