3つの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単位離れているので、それに何かの部屋を与えて、far飛行機を2000台離れた場所に置きましょう。

最後に行う必要があるのは、頂点を顔に追加した順番を変更することです。今すぐ注文(0, 1, 2)は時計回りに顔を作成し、法線ベクトルはright-hand ruleの後にThree.jsが続くため、下向き（-Z）になります。順序を(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()関数の中の三角形の位置にrequestAnimationとincrementがあります。

/*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>