2015-06-18 56 views
-1

我想在我的应用程序中绘制一个图形。我正在试图绘制一个有4点需要按行连接的图。我尝试了很多libralies,如canvasXpress ..但无法找到解决方案。如何在XYZ轴上绘制三维图形jquery

我曾尝试过这么多。

http://jsfiddle.net/rohitghatol/tn9sm/

var render = function(){ 
renderer.render(scene,camera); 
} 
render(); 
$("#container").append(renderer.domElement); 

现在我要画4点与连接线。

我没有得到如何缩放和绘制图中的线条。

+1

分享你的研究可以帮助大家行。告诉我们你试过了什么,以及它为什么不符合你的需求。这表明你已经花时间去尝试帮助自己,它使我们避免重申明显的答案,最重要的是它可以帮助你得到更具体和相关的答案!另请参阅[如何问](http://stackoverflow.com/questions/how-to-ask) – Cerbrus

+0

我已添加链接。请参阅。 @Cerbrus – DreamCoder

+0

我实际上是新手。对不起。我没有得到如何给缩放和绘制点@Vidya G – DreamCoder

回答

0

我找到了使用Three.Js JavaScript库的解决方案。这是片段。 我曾经使用下面的代码来创建网格助手,它的工作。

var gridXZ = new THREE.GridHelper(100, 10); 
    gridXZ.setColors(new THREE.Color(0x939393), new THREE.Color(0xbdbdbd)); 
    gridXZ.position.set(100, -.1, 100); 
    scene.add(gridXZ); 

    var gridXY = new THREE.GridHelper(100, 10); 
    gridXY.position.set(100, 100, 0); 
    gridXY.rotation.x = Math.PI/2; 
    gridXY.setColors(new THREE.Color(0x0066FF), new THREE.Color(0xCCE0F9)); 
    scene.add(gridXY); 

    var gridYZ = new THREE.GridHelper(100, 10); 
    gridYZ.position.set(0, 100, 100); 
    gridYZ.rotation.z = Math.PI/2; 
    gridYZ.setColors(new THREE.Color(0xCC9900), new THREE.Color(0xF5EBCC)); 
    scene.add(gridYZ); 

并绘制线我画采用三个d点

// Line one 
    material = new THREE.LineBasicMaterial({ 
     color: 0x000000 
    }); 


    geometry = new THREE.Geometry(); 
    geometry.vertices.push(
     new THREE.Vector3(x1, y1, z1), 
     new THREE.Vector3(x2, y2, z2) 
    ); 

    line = new THREE.Line(geometry, material); 
    scene.add(line);