插值曲面在Three.js
Interpolated surface in Three.js
大家好
我有一个问题属于曲面在Three.js:我得到了一些Vec3点,我想通过它们插值出一个曲面。在搜索时,我偶然发现了bezier (3 .js bezier -仅作为行)和看起来更像是我在搜索的:3 .js Nurbs。我试着重建代码,但是文档很糟糕(像这样的页面),我没有通过重建代码了解一切是如何工作的……
问题来了:有什么简单的方法可以从我计算的点中得到一个形状吗?(我还是会很高兴,如果它没有被插入)。
谢谢大家!
垫
编辑:我想要的是一个表面的情节。我偶然发现http://acko.net/blog/making-mathbox/,但它太大了,我的需求…
经过一些尝试和错误,我找到了一个解决方案:添加一个平面,然后转换单个顶点。
// need to setup 'step', 'xStart', 'xEnd', 'yStart', 'yEnd'
// calc the variables
var width = Math.abs(-xStart+xEnd),
height = Math.abs(-yStart+yEnd);
var stepsX = width*step, stepsY = height*step;
var posX = (xStart+xEnd)/2;
var posZ = (yStart+yEnd)/2;
// add a plane and morph it to a function
var geometry = new THREE.PlaneGeometry( width, height, stepsX - 1, stepsY - 1 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
var size = stepsX * (stepsY),
data = new Float32Array( size );
var count = 0, scope = {};
mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial( {
side : THREE.DoubleSide,
transparent: true,
shading: THREE.SmoothShading,
opacity : _opacity }));
mesh.updateMatrixWorld();
// calc y value for every vertice
for ( var i = 0; i < size; i ++ ) {
// calculate the current values
// http://stackoverflow.com/questions/11495089/how-to-get-the-absolute-position-of-a-vertex-in-three-js
var vector = mesh.geometry.vertices[i].clone();
vector.applyMatrix4(
mesh.matrixWorld
);
// set them into the scope
scope.x = vector.x + posX;
scope.y = vector.z + posZ;
// calculate point and write it in a temp array
data[i] = math.eval(term, scope);
}
// push the new vertice data
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
geometry.vertices[ i ].y = data[ i ];
}
// update the new normals
geometry.computeFaceNormals();
geometry.computeVertexNormals();
// add to scene
scene.add( mesh );
唯一的问题是,它不工作的非静态函数,如tan(x)
。下面的代码片段使用math.js计算术语
问候垫
相关文章:
- 在Three.js中导出网格会提高性能吗
- 如何在three.js上添加两个向量
- Three.js Points Rotation
- 无法读取属性'材料'未定义的Three.js
- Potree/Three.js测量问题
- Three.JS OBJ模型未显示
- 有没有一种方法可以获得three.js的最小/lite版本
- JS和three.JS,在浏览器中进行参数测试
- 参数列表Three.js之后的未捕获语法错误:缺少)
- 如何在three.js中有效地使用TraingleStripDrawMode
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- three.js:如何让透明的png精灵投射和接收阴影
- Three.js更改材质
- three.js EffectComposer's渲染目标
- 单击以将相机放置在Three js中的对象附近
- Three.js Three.投影仪已移至
- THREE.js轨道控制不工作
- three.js:three.Vector3.sub()动作怪异
- Three.js THREE.ImageUtils.loadTexture Image resize
- 使用 Three.js THREE.textureLoader 预加载多个纹理