用Three.js根据两个三维点创建Cylinder

25 篇文章 8 订阅
25 篇文章 3 订阅

Three.js中默认不能直接根据两个三维点的坐标创建Cylinder,创建的Cylinder默认是垂直于XOY平面的,不便于实际应用,下面是用Three.js根据两个三维点创建Cylinder:

function createCylinderMesh(x1,y1,z1,x2,y2,z2){		
		var x0 = (x1 + x2) / 2;
        var y0 = (y1 + y2) / 2;
        var z0 = (z1 + z2) / 2;
		var p1 = new THREE.Vector3(x1,y1,z1);
        var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2) + (z1 - z2) * (z1 - z2));
		
		var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
        var geometry = new THREE.CylinderGeometry(3,3,length);
		geometry.applyMatrix( new THREE.Matrix4().setRotationFromEuler( new THREE.Vector3( Math.PI / 2, Math.PI, 0 ) ) );
		var mesh = new THREE.Mesh(geometry,material);
		mesh.position.set(x0, y0, z0);		
        mesh.lookAt(p1);
		
		return mesh;
	}

上面代码的关键部分是 geometry.applyMatrix( new THREE.Matrix4().setRotationFromEuler( new THREE.Vector3( Math.PI / 2, Math.PI, 0 ) ) );mesh.lookAt(p1);

其中mesh.lookAt(p1)中的p1指的是该Cylinder两个端点中的任意一个,意思是,从Cylinder的中心点朝着其中一个端点看去,自然就使得Cylinder的方向调整到正确方向了。

附图一张:


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值