Рендеринг настраиваемой геометрии в Three.js

Question

Я пытаюсь нарисовать квадрат между четырьмя вершинами в пространстве, используя three.js. Я написал следующий код, но он не работает:

var a = { x:10, 
      y:10} 
var b = {x:50, 
      y:50} 

var geometry = new THREE.Geometry(); 
geometry.vertices.push(new THREE.Vector3(a.x, a.y, 2)); 
geometry.vertices.push(new THREE.Vector3(b.x, b.y, 2)); 
geometry.vertices.push(new THREE.Vector3(b.x, b.y - 60, 2)); 
geometry.vertices.push(new THREE.Vector3(a.x, a.y, 2)); 
geometry.faces.push(new THREE.Face3(0,1,2)); 
geometry.computeFaceNormals(); 
var material = new THREE.MeshBasicMaterial({ color: "0xff1100"}); 
var mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

, где я делаю ошибку? Кстати, для рендеринга квадроциклов я могу использовать Face4 или мне нужно использовать Face3? Есть ли хороший источник для изучения функций webgl в одном месте? Документация Three.js очень хорошо организована и завершена.

Answer 1

Квадраты больше не поддерживаются. Вы должны использовать два Face3 с, например, так:

var a = { x:10, 
      y:10 } 
var b = { x:50, 
      y:50 } 

var geometry = new THREE.Geometry(); 

geometry.vertices.push(new THREE.Vector3(a.x, a.y, 2)); 
geometry.vertices.push(new THREE.Vector3(b.x, a.y, 2)); 
geometry.vertices.push(new THREE.Vector3(b.x, b.y, 2)); 
geometry.vertices.push(new THREE.Vector3(a.x, b.y, 2)); 

geometry.faces.push(new THREE.Face3(0, 1, 2)); // counter-clockwise winding order 
geometry.faces.push(new THREE.Face3(0, 2, 3)); 

geometry.computeFaceNormals(); 
geometry.computeVertexNormals(); 

Совет: установить material.side = THREE.DoubleSide так что обе стороны вашей геометрии визуализации. Вы можете установить его обратно на THREE.FrontSide, когда вы уверены, что ваша геометрия верна.

Для получения консультации по обучению three.js и WebGL см Learning WebGL and three.js

Three.js R.70