0

I found a procedural generation library for threejs

Link: https://github.com/IceCreamYou/THREE.Terrain

I am following the tutorial given in the ReadMe.md file but I keep getting this error: Cannot read properties of undefined (reading 'Linear')

I am using three js through npm and also downloaded this through npm. This is what my code looks like

index.html

import * as THREE from 'three';
import "three.terrain.js"

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

/*const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); 
*/

var xS = 63, yS = 63;
terrainScene = THREE.Terrain({
    easing: THREE.Terrain.Linear,
    frequency: 2.5,
    heightmap: THREE.Terrain.DiamondSquare,
    material: new THREE.MeshBasicMaterial({color: 0x5566aa}),
    maxHeight: 100,
    minHeight: -100,
    steps: 1,
    xSegments: xS,
    xSize: 1024,
    ySegments: yS,
    ySize: 1024,
});
// Assuming you already have your global scene, add the terrain to it
scene.add(terrainScene);

camera.position.z = 5; 

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <script src="dist/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three.terrain.js/build/THREE.Terrain.min.js"></script>
  </body>
</html>

Any help would be greatly appreciated

Thank you in advance!

Michelle Okolie
  • 11
  • 2
  • What happens if you use the r130 version of three.js as mentioned in the README? At least, I did not get an `undefined` error if I use ``. – G Wimpassinger Jun 10 '22 at 22:56

1 Answers1

0

I think you used Terrain inside Terrain so it is the error because Terrain inside Terrain is not defined so it says Cannot read properties of undefined

Mohammad Ali
  • 301
  • 1
  • 11