Question

我正在从数据构建三维折线图

这是代码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

您在两个地方定义变量@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { #header { height: 768px; } }，因此您将material而不是MeshBasicMaterial传递给LineBasicMaterial构造函数。

three.js r.71

3D线有时会消失

1 个答案: