Plain Terrain in ThreeJS

Question

Я пытаюсь нарисовать плоскость местности при использовании модели ThreeJS, но она не работает.

Вот мой самолет код создания:

var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshBasicMaterial({ 
     color: 0x0000ff 
    })); 
plane.overdraw = true; 
this.scene.add(plane); 

Довольно прямо вперед. На самом деле я просто скопировал его с какого-то сайта.

Это, как я инициализировать сцену и камеры:

this.camera = 
     new THREE.PerspectiveCamera(
     45, // view angle 
     width/height, // aspect 
     0.1, // near 
     10000); // far 

    this.scene = new THREE.Scene(); 

    // add the camera to the scene 
    this.scene.add(this.camera); 

    // the camera starts at 0,0,0 
    // so pull it back 
    this.camera.position.z = 800; 
    this.camera.position.y = -100; 

У меня также есть шар радиуса 20 в центре. Это хорошо.

Что мне не хватает?

Answer 1

Камера смотрит на «заднюю поверхность» самолета.

Самолет имеет две стороны, но только один видна.

Два решения:

1) Переместите камеру, чтобы посмотреть на "передней грани" плоскости:

this.camera.position.y = 100; 

2) Или активировать doubleSided флаг:

plane.doubleSided = true;