Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 0747c820 编写于 作者: R renej-github 提交者： Mr.doob
浏览文件
操作

added NURBS curve

上级 ef7ab7fa
隐藏空白更改
内联 并排
Showing with 891 addition and 0 deletion
examples/canvas_geometry_nurbs.html 0 → 100644
浏览文件 @ 0747c820
<!DOCTYPE html>
<html lang="en">
<!-- based on canvas_geometry_shapes.html -->
<head>
<title>three.js canvas - geometry - NURBS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
text-align:center;
}
</style>
</head>
<body>
<canvas id="debug" style="position:absolute; left:100px"></canvas>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - NURBS curve example</div>
<script src="../build/three.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="../src/extras/core/NURBSCurve.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var text, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin';
container.appendChild( info );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 150, 500 );
scene = new THREE.Scene();
parent = new THREE.Object3D();
parent.position.y = 50;
scene.add( parent );
// NURBS curve
var nurbsControlPoints = [];
nurbsControlPoints.push( new THREE.Vector4 ( 200, 100, 100, 1 ) );
nurbsControlPoints.push( new THREE.Vector4 ( 100, 300, -200, 1 ) );
nurbsControlPoints.push( new THREE.Vector4 ( -100, 200, -40, 5 ) );
nurbsControlPoints.push( new THREE.Vector4 ( -200, 350, 250, 1 ) );
nurbsControlPoints.push( new THREE.Vector4 ( 0, 0, 0, 1 ) );
var nurbsKnots = [0.0, 0.0, 0.0, 0.0, 0.5, 1.0, 1.0, 1.0, 1.0];
var nurbsDegree = 3;
var nurbsCurve = new THREE.NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);
var posX = 0;
var posY = -100;
var posZ = 0;
var rotX = 0;
var rotY = 0;
var rotZ = 0;
var scaleX = 1;
var scaleY = 1;
var scaleZ = 1;
var nurbsGeometry = new THREE.Geometry();
nurbsGeometry.vertices = nurbsCurve.getPoints(100);
var nurbsMaterial = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333, transparent: true } );
var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
nurbsLine.position.set( posX, posY, posZ );
nurbsLine.rotation.set( rotX, rotY, rotZ );
nurbsLine.scale.set( scaleX, scaleY, scaleZ );
var nurbsControlPointsGeometry = new THREE.Geometry();
nurbsControlPointsGeometry.vertices = nurbsCurve.controlPoints;
var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { linewidth: 2, color: 0x333333, transparent: true } );
var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
nurbsControlPointsLine.position.set( posX, posY, posZ );
nurbsControlPointsLine.rotation.set( rotX, rotY, rotZ );
nurbsControlPointsLine.scale.set( scaleX, scaleY, scaleZ );
parent.add( nurbsLine );
parent.add( nurbsControlPointsLine );
//
renderer = new THREE.CanvasRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
renderer.sortElements = false;
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>
examples/webgl_geometry_nurbs.html 0 → 100644
浏览文件 @ 0747c820
<!DOCTYPE html>
<html lang="en">
<!-- based on webgl_geometry_shapes.html -->
<head>
<title>three.js webgl - geometry - NURBS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
text-align:center;
}
</style>
</head>
<body>
<canvas id="debug" style="position:absolute; left:100px"></canvas>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - NURBS curve example</div>
<script src="../build/three.min.js"></script>
<script src="../src/extras/core/NURBSCurve.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var text, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin';
container.appendChild( info );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 150, 500 );
scene = new THREE.Scene();
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
scene.add( light );
parent = new THREE.Object3D();
parent.position.y = 50;
scene.add( parent );
// NURBS curve
var nurbsControlPoints = [];
nurbsControlPoints.push( new THREE.Vector4 ( 200, 100, 100, 1 ) );
nurbsControlPoints.push( new THREE.Vector4 ( 100, 300, -200, 1 ) );
nurbsControlPoints.push( new THREE.Vector4 ( -100, 200, -40, 1 ) );
nurbsControlPoints.push( new THREE.Vector4 ( -200, 350, 250, 1 ) );
nurbsControlPoints.push( new THREE.Vector4 ( 0, 0, 0, 1 ) );
var nurbsKnots = [0.0, 0.0, 0.0, 0.0, 0.5, 1.0, 1.0, 1.0, 1.0];
var nurbsDegree = 3;
var nurbsCurve = new THREE.NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);
var posX = 0;
var posY = -100;
var posZ = 0;
var rotX = 0;
var rotY = 0;
var rotZ = 0;
var scaleX = 1;
var scaleY = 1;
var scaleZ = 1;
var nurbsGeometry = new THREE.Geometry();
nurbsGeometry.vertices = nurbsCurve.getPoints(100);
var nurbsMaterial = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333, transparent: true } );
var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
nurbsLine.position.set( posX, posY, posZ );
nurbsLine.rotation.set( rotX, rotY, rotZ );
nurbsLine.scale.set( scaleX, scaleY, scaleZ );
var nurbsControlPointsGeometry = new THREE.Geometry();
nurbsControlPointsGeometry.vertices = nurbsCurve.controlPoints;
var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { linewidth: 2, color: 0x333333, transparent: true } );
var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
nurbsControlPointsLine.position.set( posX, posY, posZ );
nurbsControlPointsLine.rotation.set( rotX, rotY, rotZ );
nurbsControlPointsLine.scale.set( scaleX, scaleY, scaleZ );
parent.add( nurbsLine );
parent.add( nurbsControlPointsLine );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>
src/extras/core/NURBSCurve.js 0 → 100644
浏览文件 @ 0747c820
/**
* @author renej
* NURBS curve object
*
* Derives from Curve, overriding getPoint and getTangent.
*
* Implementation is based on (x, y [, z=0 [, w=1]]) control points with w=weight.
*
**/
/**************************************************************
* NURBS curve
**************************************************************/
THREE.NURBSCurve = function ( degree, knots /* array of reals */, controlPoints /* array of Vector(2|3|4) */) {
this.degree = degree;
this.knots = knots;
this.controlPoints = [];
for (var i = 0; i < controlPoints.length; ++i) { // ensure Vector4 for control points
var point = controlPoints[i];
this.controlPoints[i] = new THREE.Vector4(point.x, point.y, point.z, point.w);
}
};
THREE.NURBSCurve.prototype = Object.create( THREE.Curve.prototype );
THREE.NURBSCurve.prototype.getPoint = function ( t ) {
var u = this.knots[0] + t * (this.knots[this.knots.length - 1] - this.knots[0]); // linear mapping t->u
// following results in (wx, wy, wz, w) homogeneous point
var hpoint = THREE.NURBSCurve.Utils.calcBSplinePoint(this.degree, this.knots, this.controlPoints, u);
if (hpoint.w != 1.0) { // project to 3D space: (wx, wy, wz, w) -> (x, y, z, 1)
hpoint.divideScalar(hpoint.w);
}
return new THREE.Vector3(hpoint.x, hpoint.y, hpoint.z);
};
THREE.NURBSCurve.prototype.getTangent = function ( t ) {
var u = this.knots[0] + t * (this.knots[this.knots.length - 1] - this.knots[0]);
var ders = THREE.NURBSCurve.Utils.calcNURBSDerivatives(this.degree, this.knots, this.controlPoints, u, 1);
var tangent = ders[1].clone();
tangent.normalize();
return tangent;
};
/**************************************************************
* Utils
**************************************************************/
THREE.NURBSCurve.Utils = {
/*
Finds knot vector span.
p : degree
u : parametric value
U : knot vector
returns the span
*/
findSpan: function( p, u, U ) {
var n = U.length - p - 1;
if (u >= U[n]) {
return n - 1;
}
if (u <= U[p]) {
return p;
}
var low = p;
var high = n;
var mid = Math.floor((low + high) / 2);
while (u < U[mid] || u >= U[mid + 1]) {
if (u < U[mid]) {
high = mid;
} else {
low = mid;
}
mid = Math.floor((low + high) / 2);
}
return mid;
},
/*
Calculate basis functions. See The NURBS Book, page 70, algorithm A2.2
span : span in which u lies
u : parametric point
p : degree
U : knot vector
returns array[p+1] with basis functions values.
*/
calcBasisFunctions: function( span, u, p, U ) {
var N = [];
var left = [];
var right = [];
N[0] = 1.0;
for (var j = 1; j <= p; ++j) {
left[j] = u - U[span + 1 - j];
right[j] = U[span + j] - u;
var saved = 0.0;
for (var r = 0; r < j; ++r) {
var rv = right[r + 1];
var lv = left[j - r];
var temp = N[r] / (rv + lv);
N[r] = saved + rv * temp;
saved = lv * temp;
}
N[j] = saved;
}
return N;
},
/*
Calculate B-Spline curve points. See The NURBS Book, page 82, algorithm A3.1.
p : degree of B-Spline
U : knot vector
P : control points (x, y, z, w)
u : parametric point
returns point for given u
*/
calcBSplinePoint: function( p, U, P, u ) {
var span = this.findSpan(p, u, U);
//console.log("u=" + u + " p=" + p + " span=" + span + " U=" + U);
var N = this.calcBasisFunctions(span, u, p, U);
var C = new THREE.Vector4(0, 0, 0, 0);
for (var j = 0; j <= p; ++j) {
var point = P[span - p + j];
var Nj = N[j];
var wNj = point.w * Nj;
C.x += point.x * wNj;
C.y += point.y * wNj;
C.z += point.z * wNj;
C.w += point.w * Nj;
//console.log("C=" + C.toArray());
}
return C;
},
/*
Calculate basis functions derivatives. See The NURBS Book, page 72, algorithm A2.3.
span : span in which u lies
u : parametric point
p : degree
n : number of derivatives to calculate
U : knot vector
returns array[n+1][p+1] with basis functions derivatives
*/
calcBasisFunctionDerivatives: function( span, u, p, n, U ) {
var zeroArr = [];
for (var i = 0; i <= p; ++i)
zeroArr[i] = 0.0;
var ders = [];
for (var i = 0; i <= n; ++i)
ders[i] = zeroArr.slice(0);
var ndu = [];
for (var i = 0; i <= p; ++i)
ndu[i] = zeroArr.slice(0);
ndu[0][0] = 1.0;
var left = zeroArr.slice(0);
var right = zeroArr.slice(0);
for (var j = 1; j <= p; ++j) {
left[j] = u - U[span + 1 - j];
right[j] = U[span + j] - u;
var saved = 0.0;
for (var r = 0; r < j; ++r) {
var rv = right[r + 1];
var lv = left[j - r];
ndu[j][r] = rv + lv;
var temp = ndu[r][j - 1] / ndu[j][r];
ndu[r][j] = saved + rv * temp;
saved = lv * temp;
}
ndu[j][j] = saved;
}
for (var j = 0; j <= p; ++j) {
ders[0][j] = ndu[j][p];
}
for (var r = 0; r <= p; ++r) {
var s1 = 0;
var s2 = 1;
var a = [];
for (var i = 0; i <= p; ++i) {
a[i] = zeroArr.slice(0);
}
a[0][0] = 1.0;
for (var k = 1; k <= n; ++k) {
var d = 0.0;
var rk = r - k;
var pk = p - k;
if (r >= k) {
a[s2][0] = a[s1][0] / ndu[pk + 1][rk];
d = a[s2][0] * ndu[rk][pk];
}
var j1 = (rk >= -1) ? 1 : -rk;
var j2 = (r - 1 <= pk) ? k - 1 : p - r;
for (var j = j1; j <= j2; ++j) {
a[s2][j] = (a[s1][j] - a[s1][j - 1]) / ndu[pk + 1][rk + j];
d += a[s2][j] * ndu[rk + j][pk];
}
if (r <= pk) {
a[s2][k] = -a[s1][k - 1] / ndu[pk + 1][r];
d += a[s2][k] * ndu[r][pk];
}
ders[k][r] = d;
var j = s1;
s1 = s2;
s2 = j;
}
}
var r = p;
for (var k = 1; k <= n; ++k) {
for (var j = 0; j <= p; ++j) {
ders[k][j] *= r;
}
r *= p - k;
}
return ders;
},
/*
Calculate derivatives of a B-Spline. See The NURBS Book, page 93, algorithm A3.2.
p : degree
U : knot vector
P : control points
u : Parametric points
nd : number of derivatives
returns array[d+1] with derivatives
*/
calcBSplineDerivatives: function( p, U, P, u, nd ) {
var du = nd < p ? nd : p;
var CK = [];
var span = this.findSpan(p, u, U);
var nders = this.calcBasisFunctionDerivatives(span, u, p, du, U);
var Pw = [];
for (var i = 0; i < P.length; ++i) {
var point = P[i].clone();
var w = point.w;
point.x *= w;
point.y *= w;
point.z *= w;
Pw[i] = point;
}
for (var k = 0; k <= du; ++k) {
var point = Pw[span - p].clone().multiplyScalar(nders[k][0]);
for (var j = 1; j <= p; ++j) {
point.add(Pw[span - p + j].clone().multiplyScalar(nders[k][j]));
}
//point.x /= w;
//point.y /= w;
//point.z /= w;
CK[k] = point;
}
for (var k = du + 1; k <= nd + 1; ++k) {
CK[k] = new THREE.Vector4(0, 0, 0);
}
return CK;
},
/*
Calculate "K over I"
returns k!/(i!(k-i)!)
*/
calcKoverI: function( k, i ) {
var nom = 1;
for (var j = 2; j <= k; ++j) {
nom *= j;
}
var denom = 1;
for (var j = 2; j <= i; ++j) {
denom *= j;
}
for (var j = 2; j <= k - i; ++j) {
denom *= j;
}
return nom / denom;
},
/*
Calculate derivatives (0-nd) of rational curve. See The NURBS Book, page 127, algorithm A4.2.
Pders : result of function calcBSplineDerivatives
returns array with derivatives for rational curve.
*/
calcRationalCurveDerivatives: function ( Pders ) {
var nd = Pders.length;
var Aders = [];//new Point[nd];
var wders = [];//new double[nd];
//var n = Pders[0].size() - 1;
for (var i = 0; i < nd; ++i) {
var point = Pders[i];
Aders[i] = new THREE.Vector3(point.x, point.y, point.z);//new PointImpl(Arrays.copyOf(Pders[i].getArrayCopy(), n));
wders[i] = point.w;//Pders[i].get(n);
}
var CK = [];//new Point[nd];
for (var k = 0; k < nd; ++k) {
var v = Aders[k].clone();
for (var i = 1; i <= k; ++i) {
v.sub(CK[k - i].clone().multiplyScalar(this.calcKoverI(k,i) * wders[i]));
//v = v.minus(CK[k - i].times(BSplineUtils.calcKoverI(k, i) * wders[i]));
}
CK[k] = v.divideScalar(wders[0]);
}
return CK;
},
/*
Calculate NURBS curve derivatives. See The NURBS Book, page 127, algorithm A4.2.
p : degree
U : knot vector
P : control points in homogeneous space
u : parametric points
nd : number of derivatives
returns array with derivatives.
*/
calcNURBSDerivatives: function( p, U, P, u, nd ) {
var Pders = this.calcBSplineDerivatives(p, U, P, u, nd);
return this.calcRationalCurveDerivatives(Pders);
}
};
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或