三個JS場景不渲染三角形

Question

我對Three.JS非常陌生，我只是試圖在場景中創建一個三角形，但由於某種原因它沒有被渲染。我不確定我做錯了什麼。這裏是的jsfiddle鏈接：

http://jsfiddle.net/mi496949/qvvzckh2/

/*global THREE, requestAnimationFrame*/ 

var scene, camera, renderer, scene, controls, canvasWidth, canvasHeight; 

canvasWidth = window.innerWidth; 
canvasHeight = window.innerHeight; 

function onWindowResize(event) { 
    'use strict'; 
    camera.aspect = canvasWidth/canvasHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(canvasWidth, canvasHeight); 
} 

function randomColor() { 
    'use strict'; 
    var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + 
    Math.floor(Math.random() * 255) + ',' + 
    Math.floor(Math.random() * 255) + ')'; 

    return (new THREE.Color(color)); 
} 

function init() { 
    'use strict'; 
    var container = document.createElement('div'); 
    document.body.appendChild(container); 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(45, canvasWidth/canvasHeight, 1, 1000); 
    camera.position.set(0, 0, 0); 
    camera.lookAt(scene.position); 

    scene.add(camera); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setClearColor(0xccccff); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(canvasWidth, canvasHeight); 
    container.appendChild(renderer.domElement); 

    window.addEventListener('resize', onWindowResize, false); 
} 

function animate() { 
    'use strict'; 
    renderer.render(scene, camera); 
} 

function createTriangle() { 
    'use strict'; 
    var centerPoint, point1, point2, triangleGeometry, triangle, angle, length1, length2; 

    angle = (2 * Math.PI)/100; 

    length1 = 450; 
    length2 = Math.tan(angle/2) * length1; 

    triangleGeometry = new THREE.Geometry(); 

    triangleGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); 
    triangleGeometry.vertices.push(new THREE.Vector3(-length2, length1, 0)); 
    triangleGeometry.vertices.push(new THREE.Vector3(length2, length1, 0)); 

    triangleGeometry.faces.push(new THREE.Face3(0, 1, 2)); 

    triangle = new THREE.Mesh(triangleGeometry, new THREE.MeshNormalMaterial()); 

    scene.add(triangle); 
} 

init(); 
createTriangle(); 
animate(); 

我事先道歉，如果它原來是一些愚蠢的和簡單的，我錯過了。預先感謝您的任何幫助。

Answer 1

有在你的代碼幾件事情需要加以固定，所以你可以看到三角形：

首先，您需要設置攝像機從三角形的路程。由於您的三角形在XY平面畫，讓我們將其移開Z軸：

camera.position.set(0, 0, 1000); 

然後，你需要增加相機的far屬性，以便您的三角形是相機視錐內。由於相機距離三角形1000個單位，讓我們給它一些空間，然後把2000平面的平面放置在距離2000個單位。

您需要做的最後一件事是更改您將頂點添加到面部的順序。現在順序(0, 1, 2)按順時針順序創建一個面，其法線向下（-Z），因爲Three.js跟在right-hand rule之後。如果將訂單更改爲(1, 0, 2)，則頂點的順序將逆時針旋轉，臉部的法線將指向相機（+ Z），您將能夠看到它。

triangleGeometry.faces.push(new THREE.Face3(1, 0, 2)); 

以改變頂點的順序另一種方法是改變材料THREE.DoubleSide的side屬性，所以你可以看到他的臉的兩側，只是一個不與相機正常指點：

triangle = new THREE.Mesh(triangleGeometry, new THREE.MeshNormalMaterial({side: THREE.DoubleSide})); 

你可以在你的代碼this JSFiddle中看到一個工作示例。

Answer 2

自己相當新。我相信你的三角形是添加的，但是你的相機位置和相機的相對角度是這樣的，你的視圖與它的平面一致，因此你看不到它。

另外，三角形所需的變量對於函數來說是私有的，因此不能被渲染訪問，所以這些變量已被移動到腳本的頂部以添加到全局變量空間。

在animate()函數中有一個請求動畫和增量到三角形的位置，這樣就可以看到。

/*global THREE, requestAnimationFrame*/ 
 

 
var scene, camera, renderer, scene, controls, canvasWidth, canvasHeight; 
 

 
var centerPoint, point1, point2, triangleGeometry, triangle, angle, length1, length2; 
 

 
canvasWidth = window.innerWidth; 
 
canvasHeight = window.innerHeight; 
 

 
function onWindowResize(event) { 
 
    'use strict'; 
 
    camera.aspect = canvasWidth/canvasHeight; 
 
    camera.updateProjectionMatrix(); 
 
    renderer.setSize(canvasWidth, canvasHeight); 
 
} 
 

 
function randomColor() { 
 
    'use strict'; 
 
    var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + 
 
    Math.floor(Math.random() * 255) + ',' + 
 
    Math.floor(Math.random() * 255) + ')'; 
 

 
    return (new THREE.Color(color)); 
 
} 
 

 
function init() { 
 
    'use strict'; 
 
    var container = document.createElement('div'); 
 
    document.body.appendChild(container); 
 

 
    scene = new THREE.Scene(); 
 

 
    camera = new THREE.PerspectiveCamera(45, canvasWidth/canvasHeight, 1, 1000); 
 
    camera.position.set(0, 1000, 0); 
 

 
    camera.lookAt(scene.position); 
 

 
    scene.add(camera); 
 

 
    renderer = new THREE.WebGLRenderer(); 
 
    renderer.setClearColor(0xccccff); 
 
    renderer.setPixelRatio(window.devicePixelRatio); 
 
    renderer.setSize(canvasWidth, canvasHeight); 
 
    container.appendChild(renderer.domElement); 
 

 
    window.addEventListener('resize', onWindowResize, false); 
 
} 
 

 
function animate() { 
 
    'use strict'; 
 

 
    requestAnimationFrame(animate); // added 
 

 
    triangle.rotation.x += 0.01; // added to reveal 
 
    triangle.rotation.y += 0.03; // added to reveal 
 

 
    renderer.render(scene, camera); 
 
} 
 

 
function createTriangle() { 
 
    'use strict'; 
 
    angle = (2 * Math.PI)/100; 
 

 
    length1 = 450; 
 
    length2 = Math.tan(angle/2) * length1; 
 

 
    triangleGeometry = new THREE.Geometry(); 
 

 
    triangleGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); 
 
    triangleGeometry.vertices.push(new THREE.Vector3(-length2, length1, 0)); 
 
    triangleGeometry.vertices.push(new THREE.Vector3(length2, length1, 0)); 
 

 
    triangleGeometry.faces.push(new THREE.Face3(0, 1, 2)); 
 

 
    triangle = new THREE.Mesh(triangleGeometry, new THREE.MeshNormalMaterial()); 
 

 
    scene.add(triangle); 
 
} 
 

 
init(); 
 
createTriangle(); 
 
animate();

<script src="http://threejs.org/build/three.min.js"></script>