【问题标题】:Interpolated surface in Three.jsThree.js 中的插值曲面
【发布时间】:2014-08-30 23:50:38
【问题描述】:

大家好,

我在 Three.js 中有一个问题属于表面: 我有一堆 Vec3 点,想通过它们插入一个表面。在搜索时,我偶然发现了贝塞尔曲线(three.js bezier - 仅作为线条),看起来更像是我在搜索:three.js Nurbs。我试图重构代码,但文档很糟糕(像this 这样的页面),我没有通过重构代码了解一切是如何工作的......

那么问题来了: 有没有什么简单的方法可以从我的计算点中得到一个形状? (如果没有插值,我仍然会很高兴)。

谢谢你们!

垫子

编辑:我想要实现的是曲面图。我偶然发现了http://acko.net/blog/making-mathbox/,但它对我的需求来说太大了......

【问题讨论】:

  • 您的意思是通过 Delaunay 三角剖分从 3D 点创建地形网格吗? github.com/domlysz/BlenderGIS/wiki/…
  • @WestLangley 是这样的,但如果插值会更好
  • 曲面将在点之间“线性插值”。如果您正确设置顶点法线并使用THREE.SmoothShading,则表面看起来会很平滑。如果您希望您的表面实际上是光滑的,则必须使用其他方法创建更详细的网格。

标签: javascript plot three.js surface


【解决方案1】:

经过一些尝试和错误,我找到了解决方案:添加一个平面,然后转换单个顶点。

// 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) 这样的非静态函数。这个 sn-p 正在使用math.js 来计算术语。

问候垫

【讨论】:

  • 感谢您发布此信息。您有没有机会将整个页面作为要点或以其他方式在网上流传?最好只运行它并将其分解以了解整个事情是如何工作的,w/ Three.js 等
  • 嘿,我想我在这里用过:math.zumschlenker.de 代码在线:github.com/schlenger/math-editor
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-28
  • 1970-01-01
  • 1970-01-01
  • 2012-01-20
  • 1970-01-01
  • 2021-02-26
相关资源
最近更新 更多