Three.js使用THREE.Terrain报无法读取undefined的Linear属性错误

这个错误的核心原因是代码执行时THREE.Terrain对象未被正确注册，你的项目存在3类问题，逐一修复即可：

问题1：引入方式混用+加载顺序错误 #

• 你同时用了两种完全冲突的依赖引入方式：既通过npm安装依赖在JS代码中import，又在HTML中通过script标签引入CDN版本的Three.js和THREE.Terrain
• HTML中脚本加载顺序完全颠倒：你把打包生成的dist/main.js放在最前面加载，此时浏览器还未加载后续的CDN依赖，代码执行时自然找不到THREE.Terrain对象
• 修复方式：二选一保留一种引入模式，禁止混用。如果用npm+打包工具（Vite/Webpack等）的开发模式，直接删掉HTML中两行CDN脚本标签，所有依赖走npm引入；如果要用CDN模式，就卸载npm安装的three和three.terrain.js依赖，删掉所有import语句，直接使用全局THREE对象编写代码。

问题2：npm模式下THREE.Terrain未正确初始化 #

• 你写的import "three.terrain.js"只会执行库文件代码，不会自动把Terrain方法挂载到你引入的THREE实例上，需要手动传入THREE实例完成注册，正确引入写法：

import * as THREE from 'three';
import Terrain from 'three.terrain.js';
// 手动完成Terrain的挂载，对齐官方文档的调用形式
THREE.Terrain = Terrain(THREE);

问题3：代码遗留逻辑错误 #

• 你把立方体创建的相关代码整体注释了，但animate动画函数里还在调用不存在的cube变量做旋转操作，就算Terrain加载成功，这里也会抛出cube is not defined错误，直接删除animate函数中操作cube的两行代码即可。
• 额外注意：你原本设置的相机position.z = 5距离尺寸为1024的地形过近，修复报错后会看不到地形，需要把相机拉到合适位置并对准地形中心。

修复后完整可运行代码 #

JS业务代码 #

import * as THREE from 'three';
import Terrain from 'three.terrain.js';
THREE.Terrain = Terrain(THREE);

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

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

const xS = 63, yS = 63;
const 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,
});
scene.add(terrainScene);

// 调整相机位置到可视范围
camera.position.set(0, 120, 400);
camera.lookAt(0, 0, 0);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

// 自适应窗口大小变化
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

HTML页面代码（npm打包模式） #

<!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>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Michelle Okolie