javascript - 3D 线有时会消失

Question

我正在根据数据构建 3d 折线图

这里是代码Demo

生成行的代码部分是

     parentTransform = new THREE.Object3D();
            var _color = d3.scale.category10();
            for (var i = 5; i > 0; i--) {
                var material = new THREE.LineBasicMaterial({
                    // color: 0x0000ff,linewidth: 30
                     color: _color(i), linewidth: 50
                });
                var PI2 = Math.PI * 2;

                var geometry = new THREE.Geometry();
                var k = -10;
                    for (var j = 0; j < 80; j=j+10) {
                        var _x = j;
                        var _y = (Math.floor(Math.random() * (50 - 10 + 1)) + 10);
                        var _z = i*5;

                        geometry.vertices.push(new THREE.Vector3(_x,_y,_z));
                        var _point = new THREE.SphereGeometry(0.8);
                        var material = new THREE.MeshBasicMaterial( {color: _color(i)} );
                        var sphere = new THREE.Mesh( _point, material );
                        sphere.position.set(_x,_y,_z);
                        parentTransform.add( sphere );
                    };           
                var line = new THREE.Line(geometry, material);
                line.material.linewidth = 2;
                parentTransform.add(line);
            };
            scene.add( parentTransform );

有时当我开始旋转/缩放线消失..只有点停留在那里

我还想添加 3 轴墙，有什么帮助吗？ 我有 d3.js 的经验和 Three.js 的新经验，所以 非常欢迎任何帮助

Answer 1

您在两个位置定义变量 material，因此您将 MeshBasicMaterial 而不是 LineBasicMaterial 传递给 THREE。行构造函数。

三.js r.71