郭先生的博客资料

本文主要介绍郭先生的博客资料 方法和在新技术下所面对的“挑战”,方便大家深入理解郭先生的博客资料 过程。本文也将分享郭先生的博客资料 所遇到的问题和应对策略,怎么解决怎么做的问题。
通过深入本文可以理解代码原理,进行代码文档的下载,也可以查看相应 Demo 部署效果。

今天郭先生就来继续说一说three.js数学方法中的plane(平面)。在三维空间中无限延伸的二维平面,平面方程用单位长度的法向量和常数表示。构造器为Plane( normal : Vector3, constant : Float )。第一个参数为平面的法向量,既然是法向量也就预示着这个平面是有方向之分的,第二个参数是平面到法向量的距离,因为法向量相同到原点距离相同的平面也是有两个,所以这个constant也是有正负号的之分的。接下来我先说下它的属性和方法,最后给一个plane相关的小案例。

1. plane的属性

1. normal

获取plane的法向量

2. constant

获取plane到原点的距离

2. plane的方法

1. set( normal: Vector3, constant: number ): Plane

设置平面 normal 的法线和常量 constant 属性值。

new THREE.Plane().set(new THREE.Vector3(0,1,0), -10);

这里可要注意plane的法向量为new THREE.Vector3(0,1,0)代表平面的正方向是沿Y轴向上的,距离-10代表平面到原点的距离,符号代表和法向量的方向相反,所以这个这个平面在Y轴正方向。如下图,这是一个size为20的planeHelper所展示的plane。

郭先生的博客

 

2. setComponents( x: number, y: number, z: number, w: number ): Plane

设置定义平面的各个变量。
x – 单位长度法向量的x值。
y – 单位长度法向量的y值。
z – 单位长度法向量的z值。
w – 原点沿法向量到平面常量 constant 距离。

new THREE.Plane().setComponents(0,1,0,-10);//效果同上

3. setFromNormalAndCoplanarPoint( normal: Vector3, point: Vector3 ): Plane

通过平面上的一点以及法线确定平面。

new THREE.Plane().setFromNormalAndCoplanarPoint(new THREE.Vector3(0,1,0), new THREE.Vector3(10,10,10));//效果同上

4. setFromCoplanarPoints( a: Vector3, b: Vector3, c: Vector3 ): Plane

根据给定的三个点确定平面。通过右手螺旋规则确定(向量叉乘)法向量 normal。

new THREE.Plane().setFromCoplanarPoints(new THREE.Vector3(-10,10,9), new THREE.Vector3(2,10,3), new THREE.Vector3(10,10,10));//效果同上 
new THREE.Plane().setFromCoplanarPoints(new THREE.Vector3(1,2,3), new THREE.Vector3(2,2,3), new THREE.Vector3(3,2,3));//如果三个点共线的话将返回默认的平面

5. clone(): this

返回一个与当前平面有相同法线 normal,常量 constant 距离的平面。就不多说了

6. copy( plane: Plane ): this

拷贝给定平面,将其中的法线 normal,距离常量 constant属性拷贝给该对象。克隆和拷贝的方法我们已经说的很多了

7. normalize(): Plane

归一化法向量 normal ,并相应的调整常量 constant数值。这个比较有意思我们说一下

//首先我们通过构造函数,并且两个法向量方向相同模长不同,因为返回的constant相同,实际上得到的是相同的平面,因为法向量默认是归一化了的 
var plane1 = new THREE.Plane(new THREE.Vector3(2,2,0), -20);//constant: -20,normal: Vector3 {x: 2, y: 2, z: 0}
var plane2 = new THREE.Plane(new THREE.Vector3(1,1,0), -20);//constant: -20,normal: Vector3 {x: 1, y: 1, z: 0} //然后我们将其归一化,这是两个plane的constant,也会随着归一化的比例调整,所以实际效果的距离相差一倍。
var plane_n1 = plane1.normalize();//返回constant: -7.071067811865475,normal: Vector3 {x: 0.7071067811865475, y: 0.7071067811865475, z: 0}
var plane_n2 = plane2.normalize();//返回constant: -14.14213562373095,normal: Vector3 {x: 0.7071067811865475, y: 0.7071067811865475, z: 0}

8. negate(): Plane

将法向量与常量求反(乘以-1)。

var plane1 = new THREE.Plane(new THREE.Vector3(2,2,0), -10); 
plane1.negate();

注意这个方法直接修改原plane

9. distanceToPoint( point: Vector3 ): number

返回点point到平面的有符号距离。在法向量方向的正方向则返回正值。

var plane1 = new THREE.Plane(new THREE.Vector3(0,1,0), -10); 
plane1.distanceToPoint(new THREE.Vector3(0,1,0))//返回-9

10. distanceToSphere( sphere: Sphere ): number

返回球面 sphere 的边缘到平面的最短距离。

var plane = new THREE.Plane(new THREE.Vector3(0,1,0), -10); var sphere = new THREE.Sphere(new THREE.Vector3(0,0,0), 5); plane.distanceToSphere(sphere)//返回-15 //three.js distanceToSphere源码 distanceToSphere: function ( sphere ) {     return this.distanceToPoint( sphere.center ) - sphere.radius; },

按照道理来说球面到平面的最近距离应该是5,而返回的是-15,看到源码发现,这个最短距离的求法是先算平面到球心的距离减去球的半径,即-10-5=-15。

11. projectPoint( point: Vector3, target: Vector3 ): Vector3

将一个点point投射到该平面上。

var plane = new THREE.Plane(new THREE.Vector3(0,1,0), -10); 
plane.projectPoint(new THREE.Vector3(1,1,1));//返回(1,10,1)

12. intersectLine( line: Line3, target: Vector3 ): Vector3 | undefined

返回给定线段和平面的交点。如果不相交则返回undefined。如果线与平面共面,则返回该线段的起始点。

var line1 = new THREE.Line3(new THREE.Vector3(0,0,0), new THREE.Vector3(9,9,9)); 
var line2 = new THREE.Line3(new THREE.Vector3(0,0,0), new THREE.Vector3(11,11,11));
console.log(plane.intersectLine(line1))//返回undefined
console.log(plane.intersectLine(line2))//返回Vector3 {x: 10, y: 10, z: 10}

13. intersectsLine( line: Line3 ): boolean

测试线段是否与平面相交。

var line1 = new THREE.Line3(new THREE.Vector3(0,0,0), new THREE.Vector3(9,9,9)); 
var line2 = new THREE.Line3(new THREE.Vector3(0,0,0), new THREE.Vector3(11,11,11));
console.log(plane.intersectLine(line1))//返回false
console.log(plane.intersectLine(line2))//返回true

14. intersectsBox( box: Box3 ): boolean

确定该平面是否与给定3d包围盒Box3相交。

var box1 = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); 
var box2 = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,10,2));
console.log(plane.intersectsBox(box1));//不相交返回false
console.log(plane.intersectsBox(box2));//相交返回true

15. intersectsSphere( sphere: Sphere ): boolean

确定该平面是否与给定球体 Sphere 相交。

var sphere1 = new THREE.Sphere(new THREE.Vector3(0,0,0), 5); 
var sphere2 = new THREE.Sphere(new THREE.Vector3(0,0,0), 10);
console.log(plane.intersectsBox(sphere1));//不相交返回false
console.log(plane.intersectsBox(sphere2));//相交返回true

 

16. coplanarPoint( target: Vector3 ): Vector3

返回一个共面点,通过原点的法向量在平面上投影算得。这个方法和projectPoint很相似。只是固定为原点的投影,

var plane = new THREE.Plane(new THREE.Vector3(1,1,1), -10); plane.coplanarPoint(new THREE.Vector3())//返回Vector3 {x: 10, y: 10, z: 10} //如果将法向量归一化,这样一来得到的这个点正好是在平面上 var plane = new THREE.Plane(new THREE.Vector3(1,1,1).normalize(), -10); plane.coplanarPoint(new THREE.Vector3())//返回Vector3 {x: 5.7735, y: 5.7735, z: 5.7735} //three.js coplanarPoint源码 // normal is assumed to be normalized return target.copy( this.normal ).multiplyScalar( - this.constant );

 

17. applyMatrix4( matrix: Matrix4, optionalNormalMatrix?: Matrix3 ): Plane

matrix – 要应用的四位矩阵(Matrix4)。
optionalNormalMatrix – (可选参数) 预先计算好的上述Matrix4参数的法线矩阵 Matrix3。
在平面上应用矩阵。矩阵必须是仿射齐次变换。

var plane = new THREE.Plane(new THREE.Vector3(0,1,0), -10);//返回constant: -10,normal: Vector3 {x: 0.7071067811865475, y: 0.7071067811865476, z: 0} 
var matrix = new THREE.Matrix4().makeRotationZ(-Math.PI/4);
plane.applyMatrix4(matrix);//返回constant: -10,normal: Vector3 {x: 1, y: 2.220446049250313e-16, z: 0}

18. translate( offset: Vector3 ): Plane

将平面平移给定向量大小,注意:这只会影响平面的常量不会影响平面的法向量。

var plane = new THREE.Plane(new THREE.Vector3(0,1,0), -10); 
plane.translate(new THREE.Vector3(0,-5,0));//将平面向下平移5个单位

19. equals( plane: Plane ): boolean

检查两个平面是否相等。(法线 normal 以及常量 constant 都相同)。很简单我们不多说。

3.使用plane

应用平面的地方有很多,我来拿WebGLRenderer的clippingPlanes属性做案例,clippingPlanes是包含Plane的数组作为剪裁平面,主要代码如下,在线案例点击博客原文。

box = new THREE.Mesh(new THREE.BoxGeometry(20,20,20), new THREE.MeshNormalMaterial({side: THREE.DoubleSide})); plane = new THREE.Plane(new THREE.Vector3(1,1,1), 0); planeHelper = new THREE.PlaneHelper(plane, 30); renderer.clippingPlanes = [plane] scene.add(planeHelper); scene.add(box); gui = new GUI(); params = new function() {     this.normal_x = 1;     this.normal_y = 1;     this.normal_z = 1;     this.constant = 0;     this.clipping = true; }; gui.add(params, 'normal_x', -1, 1).onChange(() => setParams()); gui.add(params, 'normal_y', -1, 1).onChange(() => setParams()); gui.add(params, 'normal_z', -1, 1).onChange(() => setParams()); gui.add(params, 'constant', -10, 10).onChange(() => setParams()); gui.add(params, 'clipping').onChange(e => renderer.clippingPlanes = e ? [plane] : []);  this.render(); document.getElementById("loading").style.display = "none";  function setParams() {     plane.set(new THREE.Vector3(params.normal_x, params.normal_y, params.normal_z), params.constant);     planeHelper = new THREE.PlaneHelper(plane, 30) }

 

转载请注明地址:郭先生的博客

 

郭先生的博客资料部分资料来自网络,侵权毕设源码联系删除

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 郭先生的博客资料

提供最优质的资源集合

立即查看 了解详情