使用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数据中画曲线的代码：

<!DOCTYPE html>
<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

使用threeJS根据点的坐标绘制曲线相关推荐

b样条曲面绘制 opengl_CAD制图软件中如何利用EXCEL输入坐标绘制曲线？
当在使用浩辰CAD制图软件绘制图纸的过程中,经常要绘制由多个坐标点连接成的曲线时,有什么方便快捷的方法吗?那当然是有的.利用EXCEL表格保存数据并与CAD制图软件巧妙地结合起来,就能很容易地画出曲线 ...
matlab球坐标曲线,matlab绘制曲线subplotsphere球面坐标绘制饼图
实验报告实验名称:实验一MATLAB初步一.实验目的与要求: 1. 了解MATLAB的特点: 2. 熟悉MATLAB环境和命令窗口 3．熟悉常用命令的使用方法,尤其是帮助命令: 4．掌握MATLA ...
android 坐标图绘制曲线,Android艺术之画一条平滑的曲线
前言说的是曲线,其实想法是来自一个曲线图的需求.图表这种东西,项目开发中也不少见,大多情况找个通用的开源框架改改就得了(老板们别打我),然而通用赶不上脑洞,要做交互和视觉比较特别的图表时,还是自己造 ...
android中在代码中动态布按钮和画板局并绘制曲线
绘图面板基类继承View package com.mytest.myapplication.Utility;import android.graphics.Color; import android. ...
android 动态绘制布局,Android代码和绘制曲线中按钮和绘图板的动态布局
时间: 2019年1月11日本文向您介绍Android代码中的按钮和绘图板的动态布局和绘制曲线,主要包括示例android 动态绘制曲线,应用技巧,基本知识和知识android 动态绘制曲线,包括A ...
matlab曲线已知y求x,已知X、Y用MATLAB绘制曲线
已知X.Y坐标数值,如何用MATLAB绘制曲线 2008-12-03 10:46:19| 分类:默认分类|字号订阅横轴为X坐标纵轴为Y坐标最佳答案 plot(x,y,'s') s为可选参数具体可 ...
c#样条曲线命令_C# chart控件绘制曲线
标签: 在.NET中以前经常用GDI去绘制,虽然效果也不错,自从.NET 4.0开始,专门为绘制图表而生的Chart控件出现了,有了它,就可以轻松的绘制你所需要的曲线图.柱状图什么的了. using ...
H5canvas(绘制矩形，绘制圆形，绘制线段，绘制文字，绘制曲线)
Canvas简介 canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于 Gecko 1.8的浏览 ...
html坐标绘制路径,HTML5 CANVAS：绘制路径
一条HTML5 canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线.路径可以用于在HTML5 canvas上绘制各种类型的图形:直线.圆形.多边形等等.路径的绘制是canva ...

使用threeJS根据点的坐标绘制曲线

使用threeJs来绘制曲线

使用threeJS根据点的坐标绘制曲线相关推荐

最新文章

热门文章