Question

我刚刚创建了一个示例，该示例使用 THREE.Face3 和 three.js 绘制了一个三角形。

这是我的代码段

var scene, camera, renderer;
var cube;
var controls;

function initScene() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 30;

  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  controls = new THREE.OrbitControls(camera);
  controls.update();

  document.body.appendChild(renderer.domElement);
}

function render() {
  requestAnimationFrame(render);

  renderer.render(scene, camera);
}

function draw() {

  var material = new THREE.MeshStandardMaterial( { color : 0x00cc00, side: THREE.DoubleSide } );

  //create a triangular geometry
  var geometry = new THREE.Geometry();
  geometry.vertices.push( new THREE.Vector3( -5, -5, 0 ) );
  geometry.vertices.push( new THREE.Vector3(  5, -5, 0 ) );
  geometry.vertices.push( new THREE.Vector3(  5,  5, 0 ) );

  //create a new face using vertices 0, 1, 2
  var normal = new THREE.Vector3( 0, 1, 0 ); //optional
  var color = new THREE.Color( 0xffaa00 ); //optional
  var materialIndex = 0; //optional
  var face = new THREE.Face3( 0, 1, 2);

  //add the face to the geometry's faces array
  geometry.faces.push( face );

  //the face normals and vertex normals can be calculated automatically if not supplied above
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

  scene.add( new THREE.Mesh( geometry, material ) );
}

initScene();
draw();
render();

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

我已经在three.js Face3文档中引用了示例代码，我认为示例代码尝试将颜色设置为0x00cc00或0xffaa00，但是示例中三角形的颜色是黑色。

如何更改？

如何更改Three.js THREE.Face3颜色

0 个答案: