3

だから私は THREE.JS を使用していて、三角形を作成しました。しかし、色: 0xFF0000 を指定しても、画面上では黒く表示されます。

これが私のスクリプトです：

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    var geometry = new THREE.Geometry(200,200,200);
    var v1 = new THREE.Vector3(200,0,0);   // Vector3 used to specify position
    var v2 = new THREE.Vector3(-100,0,0);
    var v3 = new THREE.Vector3(0,50,0);   // 2d = all vertices in the same plane.. z = 0

    // Push vertices represented by position vectors
    geometry.vertices.push(v1);
    geometry.vertices.push(v2);
    geometry.vertices.push(v3);

    // Push face, defined with vertices in counter clock-wise order
    geometry.faces.push(new THREE.Face3(0, 2, 1));

    // Create a material and combine with geometry to create our mesh
    var redMat = new THREE.MeshLambertMaterial({color: 0xFF0000});
    var triangle = new THREE.Mesh(geometry, redMat);
    scene.add(triangle);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    renderer.render(scene, camera);

}

私が犯した間違いを見つけていただければ幸いです。私はそれが本当にばかげたことだと確信しています。

4

3 に答える 3

2

パーティーに遅れました...しかし、私の後に来るすべての人のために。ここでの問題は、使用される材料の種類です

変化する

new THREE.MeshLambertMaterial({color: 0xFF0000});

に

new THREE.MeshBasicMaterial({color: 0xFF0000});

そしてそれは赤く表示されます

于 2014-10-25T01:13:45.877 に答える
1

私でさえ、しばらくの間この問題に苦しんできました。私にとっての解決策は、ランバート マテリアルを使用している場合、シーンに環境光を追加することでした。

追加するだけです：

var light = new THREE.AmbientLight(0xffffff);
scene.add(light);
于 2016-12-05T18:29:37.097 に答える
1

computeFaceNormalsジオメトリ オブジェクトに呼び出しを追加してみてください:

geometry.computeFaceNormals();

* https://stackoverflow.com/a/49226898/2154075より

于 2019-11-04T16:27:03.563 に答える