三个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>