相关疑难解决方法(0)

Three.js Object3d柱面旋转以对齐矢量

我搜索得很远,但似乎无法想象这个非常基本的东西.我已经在一年或两年前看过stackoverflow和其他地方的其他例子,但他们无法使用最新版本的Three.js.

这是我正在研究的版本:http://medschoolgunners.com/sandbox/3d/.

我试图让灰色圆锥与未标记的红色矢量完全对齐.IE浏览器.我希望锥体的尖端与矢量精确对齐,并从该方向的原点指出.

这是我现在的代码:

    //FUNCTION TO CREATE A CYLINDER
function create_cylinder(radiusTop,radiusBottom, height, segmentsRadius, segmentsHeight, openEnded, color)
{
var material = new THREE.MeshLambertMaterial({
    color: color, //0x0000ff
    opacity: 0.2
});
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(radiusTop,radiusBottom, height, segmentsRadius, segmentsHeight, openEnded), material);

cylinder.overdraw = true;

return cylinder;
}

//ALIGN THE CYLINDER TO A GIVEN VECTOR
var alignVector=new THREE.Vector3(-50,50,50); //the vector to be aligned with

var newcylinder = create_cylinder(0.1, 10, 40, 50, 50, false, "0x0ff0f0");  // the object to be …
Run Code Online (Sandbox Code Playgroud)

javascript rotation quaternions three.js

11
推荐指数
3
解决办法
2万
查看次数

three.js - 两个点,一个圆柱,对齐问题

(stackoverflow的新手,webgl/three.js的新手,...)

我正在使用three.js r54绘制一个力导向图.节点之间的边缘是THREE.Lines,很好,但是用raycaster不能选择线条.所以我的目标是采用圆柱代替(或同时)线条(也因为我可以做更多的东西:使用纹理,......)

这就是我正在做的放置圆柱体:

// init reference vector
var upVec = new THREE.Vector3(0,1,0);

//---withhin a loop---
// get direction
var direction = startPoint.subSelf(endPoint).clone();

// half length for cylinder height
var halfLength = direction.length() * 0.5;  

// get offset
var offset = endPoint.clone().addSelf(direction.clone().multiplyScalar(0.5));

// normalize direc
direction.normalize();

//newUpVec = upVec - (upVec *(dot) direction) * direction - projection of direction
var newUpVec = upVec.clone().subSelf(direction.clone().multiplyScalar(upVec.dot(direction.clone()))).normalize();
var right = newUpVec.clone().crossSelf(direction.clone());

//build rotation matrix
var rot = new THREE.Matrix4(right.x, right.y, right.z, 0,
                            newUpVec.x, newUpVec.y, …
Run Code Online (Sandbox Code Playgroud)

rotation three.js cylindrical

4
推荐指数
1
解决办法
3145
查看次数

如何将边缘渲染为圆柱体?

我已经加载了 OBJ 多面体,并使用 EdgesGeometry() 来提取其边缘:

var edges = new THREE.LineSegments(new THREE.EdgesGeometry(child.geometry), new THREE.LineBasicMaterial( {color: 0x000000}) );
Run Code Online (Sandbox Code Playgroud)

但我想将每个边缘渲染为具有可配置半径的圆柱体。像这样的东西:

边缘呈现为圆柱体的十二面体。

rendering edges three.js

2
推荐指数
1
解决办法
947
查看次数