使用threeJS根据点的坐标绘制曲线
使用threeJs来绘制曲线
首先可以看threeJS官网的的曲线示例，链接：CatmullRomCurve3
//Create a closed wavey loop
var curve = new THREE.CatmullRomCurve3( [
new THREE.Vector3( -10, 0, 10 ),
new THREE.Vector3( -5, 5, 5 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 5, -5, 5 ),
new THREE.Vector3( 10, 0, 10 )
] );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
官方的示例中CatmullRomCurve3的构造函数由点数组、曲线是否闭合、曲线类型和张度构成，除数组外其他三个都有默认值，closed为false，curveType为centriipetal，tension为0.5。
上一段代码中的curve.getPoionts方法是将两点之间的线分为多少段，默认值为5，值越大曲线越平滑。
setFromPoints是将上面分段的点设置为几何图形的顶点。
其中点数据可以新建点向量，然后放到数组里，然后构造curve，这里介绍一种从JSON数据读取点数据的方法:
fromJSON ( json : Object ) : Curve使用这个方法可以把数据库的经纬度值转换成坐标值，封装为JSON数据，然后构造出curve画出轨迹，转换方法没写，下面是从json数据中画曲线的代码：
<html>
<head>
<title>title>
<script src="../js/three.js">script>
head>
<body>
<script>
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
var scene = new THREE.Scene();
var p = [];
p.push(new THREE.Vector3( -10, 0 ));
p.push(new THREE.Vector3( -5, 5 ));
p.push(new THREE.Vector3( 0, 0 ));
p.push(new THREE.Vector3( 5, -5));
p.push(new THREE.Vector3( 10, 0 ));
p.push(new THREE.Vector3( - 1, 2 ));
p.push(new THREE.Vector3( - 2, 2 ));
/*
json数据格式
*/
var objson = {
"arcLengthDivisions": 200,//每段分割
"closed": false,//曲线是否闭合
"curveType": "centripetal",//曲线类型
"points":[ [ -10, 0,0], [ -5, 5,0], [ 0, 0,0], [ 5, -5,0], [ 10, 0,0] ],//点数据z轴可以不要
"temsion": 0.5//曲线张度
};
var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
var curve = new THREE.CatmullRomCurve3();
curve.fromJSON(objson);//复制数据
/*
jsonObj = curve.toJSON();
console.log(jsonObj);*/
var points = curve.getPoints(100);//把曲线分为points段
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({
color: 0xF8F8FF
});
var line = new THREE.Line( geometry, material );
scene.add( line );
renderer.render( scene, camera );
renderer.setCl
script>
body>
html>
参考链接https://blog.csdn.net/HelloEarth_/article/details/98598358