# Graphically challenged dev needs artistic suggestions on floor improvement?

**URL:** <https://discourse.threejs.org/t/graphically-challenged-dev-needs-artistic-suggestions-on-floor-improvement/40683>\
**Category:** Questions\
**Tags:** art\
**Created:** [July 24, 2022, 9:17pm UTC](https://discourse.threejs.org/t/graphically-challenged-dev-needs-artistic-suggestions-on-floor-improvement/40683 "2022-07-24T21:17:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [July 24, 2022, 9:17pm UTC](https://discourse.threejs.org/t/graphically-challenged-dev-needs-artistic-suggestions-on-floor-improvement/40683/1 "2022-07-24T21:17:19Z")

</div>

For the longest time I have been using the default floor that came with the example I used as a starting point, a simple checkerboard used in “repeat” mode (see screenshot).

Now I’m hoping to do something at least markedly better, but I don’t have a lot of time so it has to be fast and easy to implement.

Note: as I said in another thread, I love HDRI images but I always have the same problems with them:

- They always appear quite diffuse and out of focus compared to the main scene
- They don’t shift perspective when the camera moves around my main scene, which just “feels really weird”

So I prefer even something as simple as just a better graphic but I’ll take anything that makes the world look better than it does now. Ideas?

Here is the current code I have that creates the floor using the checkerboard graphic:

```nohighlight
    // FLOOR
    // server/public/images/three-js-simple/checkerboard.jpg
    let floorTexture = new THREE.ImageUtils.loadTexture('/images/three-js-simple/checkerboard.jpg');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(15, 15);
    let floorMaterial = new THREE.MeshBasicMaterial({map: floorTexture, side: THREE.DoubleSide});
    let floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    let floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.position.z = -350; // -450;
    floor.rotation.x = Math.PI / 2;
    g_ThreeJsScene.add(floor);

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/9/f9848bcc0c9f05b2aabdd2de39a16e04938997bb.jpeg)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 24, 2022, 11:59pm UTC](https://discourse.threejs.org/t/graphically-challenged-dev-needs-artistic-suggestions-on-floor-improvement/40683/2 "2022-07-24T23:59:55Z")

</div>

you can bend hdri’s around, it’s called floor projection, the problem you noticed when shifting the view around goes away. makes for some interesting scenes. i believe the implementation you see in the sandboxes below is being merged into threejs, and if not you find the full code here: [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#environment)

example 1: [Envmap ground projection - CodeSandbox](https://codesandbox.io/s/envmap-ground-projection-q48jgy)

example 2: [Ground projected envmaps + lamina - CodeSandbox](https://codesandbox.io/s/0c5hv9)

there’s also the possibility to render the environment instead of just displaying a hdri. resolution in that case is up to you and you can present whatever you want.

another thing you could add is reflections. everything looks better if it reflects: [SSR Test - CodeSandbox](https://codesandbox.io/s/ssr-test-8pbw1f) the library for that is called “screen-space-reflections” on github/npm.

---

<div class="post-metadata">

**Author:** ![MeJayEss](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Post date:** [July 25, 2022, 4:42am UTC](https://discourse.threejs.org/t/graphically-challenged-dev-needs-artistic-suggestions-on-floor-improvement/40683/3 "2022-07-25T04:42:10Z")

</div>

How about something simple? What do you think of this?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/f/5f949c78e8b0ab6d8b2afa8b2ac08e78a048ad40.jpeg)