Question

我正在尝试向AxisHelper项目添加three.js。我这样添加：

axes = new THREE.AxisHelper(100);
scene.add(axes);

它被添加了，但它没有着色它是纯白色，因此很难看到。我怎样才能使它成为常规颜色？

JSFiddle

＆＃13;

var container;
var camera, scene, axis, renderer;

init();
animate();


function init() {
  container = document.getElementById('container');

  // Camera
  camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -500, 1000);
  camera.position.x = 200;
  camera.position.y = 100;
  camera.position.z = 200;

  // Scene
  scene = new THREE.Scene();

  // Axis
  axes = new THREE.AxisHelper(100);
  scene.add(axes);

  // Grid
  var size = 500,
    step = 50;
  var geometry = new THREE.Geometry();
  for (var i = -size; i <= size; i += step) {
    geometry.vertices.push(new THREE.Vector3(-size, 0, i));
    geometry.vertices.push(new THREE.Vector3(size, 0, i));
    geometry.vertices.push(new THREE.Vector3(i, 0, -size));
    geometry.vertices.push(new THREE.Vector3(i, 0, size));
  }
  var material = new THREE.LineBasicMaterial({
    color: 0x000000,
    opacity: 0.2
  });
  var line = new THREE.LineSegments(geometry, material);
  scene.add(line);


  // Cubes
  var geometry = new THREE.BoxGeometry(50, 50, 50);
  var material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    overdraw: 0.5
  });
  var cube = new THREE.Mesh(geometry, material);

  cube.scale.y = 1;
  cube.position.x = 0;
  scene.add(cube);

  // Lights
  var ambientLight = new THREE.AmbientLight(Math.random() * 0x10);
  scene.add(ambientLight);
  var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
  directionalLight.position.x = Math.random() - 0.5;
  directionalLight.position.y = Math.random() - 0.5;
  directionalLight.position.z = Math.random() - 0.5;
  directionalLight.position.normalize();
  scene.add(directionalLight);
  var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
  directionalLight.position.x = Math.random() - 0.5;
  directionalLight.position.y = Math.random() - 0.5;
  directionalLight.position.z = Math.random() - 0.5;
  directionalLight.position.normalize();
  scene.add(directionalLight);

  // Render
  renderer = new THREE.CanvasRenderer();
  renderer.setClearColor(0xf0f0f0);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);


  // Events
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.left = window.innerWidth / -2;
  camera.right = window.innerWidth / 2;
  camera.top = window.innerHeight / 2;
  camera.bottom = window.innerHeight / -2;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}


function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var timer = Date.now() * 0.0001;
  camera.position.x = Math.cos(timer) * 200;
  camera.position.z = Math.sin(timer) * 200;
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}

＆＃13;

<div id="container"></div>

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>

<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/renderers/Projector.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/renderers/CanvasRenderer.js"></script>

＆＃13;

Answer 1

您可以CanvasRenderer正确渲染AxisHelper的彩色轴，如下所示：

var axes = new THREE.AxisHelper( 100 );

axes.geometry = new THREE.Geometry().fromBufferGeometry( axes.geometry );

scene.add( axes );

CanvasRenderer有一个错误，当几何体为BufferGeometry时，无法正确渲染顶点颜色。以上是解决方法。

three.js r.82

AxisHelper没有显示有色

JSFiddle

1 个答案: