Question

我正在尝试使用EdgesHelper类绘制一堆多维数据集的边缘。我正在关注this example，但我无法在我的演示中重现效果：

Demo = function(dom, width, height, n){
  this.dom = dom;

  this.width = width;
  this.height = height;

  this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false});
  this.renderer.setSize(width, height );
  this.renderer.autoClear = false;

  this.camera = new THREE.PerspectiveCamera(60, width/height, 1, 1000);

  this.scene = new THREE.Scene();
  this.light = new THREE.PointLight(0x8844ff, 5, 100);
  this.scene.add(this.light);

  var geometry = new THREE.CubeGeometry(5, 5, 5);
  var material = new THREE.MeshLambertMaterial();

  for (var i = 0; i < n; i ++) {
    var mesh = new THREE.Mesh(geometry, material);

    mesh.position.x = Math.random()*200 - 100;
    mesh.position.y = Math.random()*200 - 100;
    mesh.position.z = Math.random()*200 - 100;
    mesh.rotation.x = Math.random();
    mesh.rotation.y = Math.random();

    this.scene.add(mesh);

    var edges = new THREE.EdgesHelper(mesh, 0xffffff);
    edges.material.linewidth = 2;

    this.scene.add(edges);
  }

  this.dom.appendChild(this.renderer.domElement);
};

Demo.prototype = {

  dom: null,

  width: 0,
  height: 0,

  renderer: null,

  scene: null,
  camera: null,
  light: null,
  objects: null,

  update: function(t) {
    this.camera.lookAt(this.scene.position);

    this.light.position.x = Math.sin( t * 5 ) * 100;
    this.light.position.z = Math.cos( t * 5 ) * 100;

    this.renderer.render(this.scene, this.camera);      
  }

}

此代码仅输出两条垂直线。当我删除行this.scene.add(edges);时，正确显示了多维数据集。这有什么问题？

Answer 1

检查此工作小提琴链接...在代码中进行更改.... three.jsr69 http://jsfiddle.net/ebeit303/grr308Lx/116/

var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false});
renderer.setSize(width, height );
renderer.autoClear = true;
document.body.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(60, width/height, 1, 1000);

var scene = new THREE.Scene();
var light = new THREE.PointLight(0xffffff, 5, 100);
scene.add(light);

var geometry = new THREE.CubeGeometry(5, 5, 5);
var material = new THREE.MeshLambertMaterial({color:0xff0000});

for (var i = 0; i < 10; i ++) {
var mesh = new THREE.Mesh(geometry, material);

mesh.position.x = 28-(7*i);
mesh.position.y = Math.random()*20-(1*i);
mesh.position.z = -59;//Math.random()*20 - 100;
mesh.rotation.x = Math.random();
mesh.rotation.y = Math.random();

scene.add(mesh);

var edges = new THREE.EdgesHelper( mesh, 0x0000ff);
edges.material.linewidth = 2;

scene.add(edges);}

function animate() {
requestAnimationFrame(animate);

renderer.render(scene, camera);

}
animate();

Answer 2

请试试这个 - 它在我这边工作得很好。

//this.scene.add(mesh);//Comment here.
var body = new THREE.Mesh(geometry, material);
var edges = new THREE.EdgesHelper(body , '#C0C0C0');
this.scene.add(edges);

Answer 3

请试试这个 - 它在我这边工作得很好。

//this.scene.add(mesh);//Comment here.
var body = new THREE.Mesh(geometry, material);
var edges = new THREE.EdgesHelper(body , '#C0C0C0');
this.scene.add(edges);

EdgesHelper不起作用

3 个答案: