diff --git a/src/components/World/World.js b/src/components/World/World.js index 6377f7b..03106b2 100644 --- a/src/components/World/World.js +++ b/src/components/World/World.js @@ -3,12 +3,11 @@ import { createCamera } from "./components/camera.js"; import { createLights } from "./components/lights.js"; import { createScene } from "./components/scene.js"; -import { createRenderer } from "./systems/renderer.js"; +import { createCube, createTerrain } from "./components/objects/terrain.js"; import { Loop } from "./systems/Loop.js"; import { Resizer } from "./systems/Resizer.js"; import { createControls } from "./systems/controls.js"; - -import createTerrain from "./components/objects/terrain.js"; +import { createRenderer } from "./systems/renderer.js"; // These variables are module-scoped: we cannot access them // from outside the module @@ -61,6 +60,10 @@ class World { scene.add(light, terrain); + const cube = createCube(); + loop.updatables.push(cube); + scene.add(cube); + // Responsive handler const resizer = new Resizer(container, camera, renderer); resizer.onResize = () => { diff --git a/src/components/World/components/objects/terrain.js b/src/components/World/components/objects/terrain.js index 09786a7..7b612d1 100644 --- a/src/components/World/components/objects/terrain.js +++ b/src/components/World/components/objects/terrain.js @@ -1,17 +1,18 @@ import { + BoxGeometry, PlaneGeometry, - MeshStandardMaterial, + MeshLambertMaterial, Mesh, TextureLoader, } from "three"; -export default function createTerrain(props) { +export function createTerrain(props) { const loader = new TextureLoader(); const height = loader.load("img/textures/height.png"); // w h const geometry = new PlaneGeometry(150, 150, 64, 64); - const material = new MeshStandardMaterial({ + const material = new MeshLambertMaterial({ color: props.color, flatShading: true, displacementMap: height, @@ -39,3 +40,13 @@ export default function createTerrain(props) { return plane; } + +export function createCube() { + const geometry = new BoxGeometry(1, 1, 1); + const material = new MeshLambertMaterial({ color: 0xff0000 }); + const cube = new Mesh(geometry, material); + cube.position.set(0, 5, 0); + // eslint-disable-next-line @typescript-eslint/no-empty-function + cube.tick = () => {}; + return cube; +}