Question

我是Three.JS的新手，我只是想在场景中创建一个三角形，但由于某种原因它没有被渲染。我不确定我做错了什么。这是JSFiddle链接：

/*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个单位。

camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 2000);

您需要做的最后一件事是更改将顶点添加到面的顺序。现在，订单(0, 1, 2)按顺时针顺序创建一个面，其法线向量指向下（-Z），因为Three.js跟在right-hand rule之后。如果您将订单更改为(1, 0, 2)，则顶点为＆＃39;顺序是反向的，面部的法线将指向相机（+ Z），你将能够看到它。

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

更改顶点的替代方法＆＃39;顺序是将材质的side属性更改为THREE.DoubleSide，这样您就可以看到面部的两侧而不仅仅是正常指向相机的那一面：

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

您可以在this JSFiddle中看到代码的工作示例。

Answer 2

我自己相当新。我相信您的三角形已添加，但您的相机位置和相机的相对角度使得您的视图与其平面内联，因此您无法看到它。

此外，三角形所需的变量对函数是私有的，因此无法通过渲染访问，因此这些变量已移至脚本顶部以添加到全局变量空间。

在animate()函数中有一个requestAnimation并递增到三角形位置，以便您可以看到。

＆＃13;

/*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();

＆＃13;

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

＆＃13;

三个JS场景不渲染三角形

2 个答案: