- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经在一个特定的 Three.js 问题上苦苦挣扎了好几天,但我找不到任何方法来解决它。这是我的情况:
1) 我有一个 float 网格,由几个三角形面形成。该网格是在使用 getAttribute('position') 获取其顶点和面后,根据加载器返回的几何图形创建的:How to smooth mesh triangles in STL loaded BufferGeometry
2)我现在想做的是将底面“投影”到地板上。
3)稍后,添加这个新面后,创建填充两个面的 3 个顶点之间空间的网格。
我在第 2 步中已经遇到了麻烦...要创建一个新面,我应该将其 3 个顶点添加到 Geometry.vertices 中。我做到了,克隆原始的面顶点。我使用 Geometry.vertices.push() 结果来了解它们的新索引,然后使用该索引 (-1) 最终创建新面。但它的形状很奇怪,位置和大小也很奇怪。我认为我没有正确理解世界/场景/矢量位置等价理论:P
我尝试应用这个,但没有成功: How to get the absolute position of a vertex in three.js? Converting World coordinates to Screen coordinates in Three.js using Projection http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works
我发现,如果我直接克隆完整的原始面并简单地将其添加到网格中,则会添加该面,但位置相同,因此我无法更改其顶点以将其放置在地板上(或者至少没有修改原始面顶点!)。我的意思是,我可以更改它们的 x、y、z 属性,但它们的尺寸非常小,与原始网格尺寸不匹配。
有人可以帮我正确理解这个概念吗?
编辑:源代码
// Create geometry
var geo = new THREE.Geometry();
var geofaces = [];
var geovertices = [];
original_geometry.updateMatrixWorld();
for(var index in original_geometry.faces){
// Get original face vertexNormals to know its 3 vertices
var face = original_geometry[index];
var vertexNormals = face.vertexNormals;
// Create 3 new vertices, add it to the array and then create a new face using the vertices indexes
var vertexIndexes = [null, null, null];
for (var i = 0, l = vertexNormals.length; i < l; i++) {
var vectorClone = vertexNormals[i].clone();
vectorClone.applyMatrix4( original_geometry.matrixWorld );
//vectorClone.unproject(camera); // JUST TESTING
//vectorClone.normalize(); // JUST TESTING
var vector = new THREE.Vector3(vectorClone.x, vectorClone.z, vectorClone.y)
//vector.normalize(); // JUST TESTING
//vector.project(camera); // JUST TESTING
//vector.unproject(camera); // JUST TESTING
vertexIndexes[i] = geovertices.push( vector ) - 1;
}
var newFace = new THREE.Face3( vertexIndexes[0], vertexIndexes[1], vertexIndexes[2] );
geofaces.push(newFace);
}
// Assign filled arrays to the geometry
geo.faces = geofaces;
geo.vertices = geovertices;
geo.mergeVertices();
geo.computeVertexNormals();
geo.computeFaceNormals();
// Create a new mesh with resulting geometry and add it to scene (in this case, to the original mesh to keep the positions)
new_mesh = new THREE.Mesh( geo, new THREE.MeshFaceMaterial(material) ); // material is defined elsewhere
new_mesh.position.set(0, -100, 0);
original_mesh.add( new_mesh );
最佳答案
我创建了一个完全可操作的 JSFiddle 来尝试一些事情并更清楚地看到问题。使用这个 STL(比我本地的示例小),我什至看不到添加到场景中的严重克隆的面孔。也许它们太小或失焦。
看一下calculateProjectedMesh() 函数,这里是我尝试克隆和放置底面的地方(已检测到,因为它们具有不同的 Material 索引):
JSFiddle: https://jsfiddle.net/tc39sgo1/
var container;
var stlPath = 'https://dl.dropboxusercontent.com/s/p1xp4lhy4wxmf19/Handle_Tab_floating.STL';
var camera, controls, scene, renderer, model;
var mouseX = 0,
mouseY = 0;
var test = true;
var meshPlane = null, meshStl = null, meshCube = null, meshHang = null;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
/*THREE.FrontSide = 0;
THREE.BackSide = 1;
THREE.DoubleSide = 2;*/
var materials = [];
materials.push( new THREE.MeshPhongMaterial({color : 0x00FF00, side:0, shading: THREE.FlatShading, transparent: true, opacity: 0.9, overdraw : true, wireframe: false}) );
materials.push( new THREE.MeshPhongMaterial({color : 0xFF0000, transparent: true, opacity: 0.8, side:0, shading: THREE.FlatShading, overdraw : true, metal: false, wireframe: false}) );
materials.push( new THREE.MeshPhongMaterial({color : 0x0000FF, side:2, shading: THREE.FlatShading, overdraw : true, metal: false, wireframe: false}) );
var lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 0.05 });
init();
animate();
function webglAvailable() {
try {
var canvas = document.createElement('canvas');
return !!(window.WebGLRenderingContext && (
canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
} catch (e) {
return false;
}
}
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 0.1, 100000000);
camera.position.x = 1500;
camera.position.z = -2000;
camera.position.y = 1000;
controls = new THREE.OrbitControls(camera);
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030); //0x101030
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(0, 3, 0).normalize();
scene.add(directionalLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(0, 1, -2).normalize();
scene.add(directionalLight);
if (webglAvailable()) {
renderer = new THREE.WebGLRenderer();
} else {
renderer = new THREE.CanvasRenderer();
}
renderer.setClearColor( 0xCDCDCD, 1 );
// renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
createPlane(500, 500);
createCube(500);
loadStl();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) / 2;
mouseY = (event.clientY - windowHalfY) / 2;
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
function createPlane(width, height) {
var planegeometry = new THREE.PlaneBufferGeometry(width, height, 0, 0);
var material = new THREE.MeshLambertMaterial({
color: 0xFFFFFF,
side: THREE.DoubleSide
});
planegeometry.computeBoundingBox();
planegeometry.center();
meshPlane = new THREE.Mesh(planegeometry, material);
meshPlane.rotation.x = 90 * (Math.PI/180);
//meshPlane.position.y = -height/2;
scene.add(meshPlane);
}
function createCube(size) {
var geometry = new THREE.BoxGeometry( size, size, size );
geometry.computeFaceNormals();
geometry.mergeVertices();
geometry.computeVertexNormals();
geometry.center();
var material = new THREE.MeshPhongMaterial({
color: 0xFF0000,
opacity: 0.04,
transparent: true,
wireframe: true,
side: THREE.DoubleSide
});
meshCube = new THREE.Mesh(geometry, material);
meshCube.position.y = size/2;
scene.add(meshCube);
}
function loadStl() {
var loader = new THREE.STLLoader();
loader.load( stlPath, function ( geometry ) {
// Convert BufferGeometry to Geometry
var geometry = new THREE.Geometry().fromBufferGeometry( geometry );
geometry.computeBoundingBox();
geometry.computeVertexNormals();
geometry.center();
var faces = geometry.faces;
for(var index in faces){
var face = faces[index];
var faceNormal = face.normal;
var axis = new THREE.Vector3(0,-1,0);
var angle = Math.acos(axis.dot(faceNormal));
var angleReal = (angle / (Math.PI/180));
if(angleReal <= 70){
face.materialIndex = 1;
}
else{
face.materialIndex = 0;
}
}
geometry.computeFaceNormals();
geometry.computeVertexNormals();
meshStl = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
meshStl.position.x = 0;
meshStl.position.y = 400;
scene.add( meshStl );
// Once loaded, calculate projections mesh
calculateProjectedMesh();
});
}
function calculateProjectedMesh(){
var geometry = meshStl.geometry;
var faces = geometry.faces;
var vertices = geometry.vertices;
var geometry_projected = new THREE.Geometry();
var faces_projected = [];
var vertices_projected = [];
meshStl.updateMatrixWorld();
for(var index in faces){
var face = faces[index];
// This are the faces
if(face.materialIndex == 1){
var vertexIndexes = [face.a, face.b, face.c];
for (var i = 0, l = vertexIndexes.length; i < l; i++) {
var relatedVertice = vertices[ vertexIndexes[i] ];
var vectorClone = relatedVertice.clone();
console.warn(vectorClone);
vectorClone.applyMatrix4( meshStl.matrixWorld );
////////////////////////////////////////////////////////////////
// TEST: draw line
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(vectorClone.x, vectorClone.y, vectorClone.z));
//geometry.vertices.push(new THREE.Vector3(vectorClone.x, vectorClone.y, vectorClone.z));
geometry.vertices.push(new THREE.Vector3(vectorClone.x, meshPlane.position.y, vectorClone.z));
var line = new THREE.Line(geometry, lineMaterial);
scene.add(line);
console.log("line added");
////////////////////////////////////////////////////////////////
vectorClone.y = 0;
var vector = new THREE.Vector3(vectorClone.x, vectorClone.y, vectorClone.z);
vertexIndexes[i] = vertices_projected.push( vector ) - 1;
}
var newFace = new THREE.Face3( vertexIndexes[0], vertexIndexes[1], vertexIndexes[2] );
newFace.materialIndex = 2;
faces_projected.push(newFace);
}
}
geometry_projected.faces = faces_projected;
geometry_projected.vertices = vertices_projected;
geometry_projected.mergeVertices();
console.info(geometry_projected);
meshHang = new THREE.Mesh(geometry_projected, new THREE.MeshFaceMaterial(materials));
var newY = -(2 * meshStl.position.y) + 0;
var newY = -meshStl.position.y;
meshHang.position.set(0, newY, 0);
meshStl.add( meshHang );
}
编辑:终于!!我得到了它!要克隆原始面,我必须使用“a”、“b”和“c”属性访问它们的 3 个原始顶点,这些属性是引用原始几何图形的“vertices”数组中的 Vector3 实例的索引。
我克隆了 3 个顶点,将 Z 位置展平为零,使用它们的新索引创建新面并将其添加到投影网格(蓝色)。
我还添加了线条作为两张脸之间的视觉结合。现在我已准备好执行第 3 步,但我认为这已经足够复杂,足以结束这个问题。
感谢您提供更新MatrixWorld的线索!实现我的目标至关重要;)
关于Three.js - 从另一个网格的某些面/顶点创建新网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35257728/
我想使用图中所示的迷宫,使用迭代深度优先搜索找到从起始节点到目标的路径。它是一个仅包含一对数字的文本文件,例如成对连接,又称边/弧。像这样: 11 3 2 3 0 3 1 4 5 4 5 7 6 7
问题:您有一个无向图 G = (V, E)(V = 顶点,E = 边),您必须访问每个顶点并在两个方向上通过每个边。 我所知道的图算法只有 DFS、BFS 和一些 MST(Kruskal 等)不幸的是
枚举任意图中两个顶点之间的所有简单路径通常需要指数时间,因为顶点之间可能存在指数数量的简单路径。但是,如果我们只对位于两个末端顶点之间的至少一条简单路径上的顶点怎么办? 即:给定一个无向图和两个不同的
我正在开发一个简单的 opengl 游戏以了解更多相关信息。但是由于某种原因,当我尝试随时间旋转我的立方体时,它会被拉伸(stretch)。你可以在照片中看到它: 我认为这与我的模型矩阵有关,但我不确
我已经在谷歌上搜索了很长一段时间,但我找不到任何东西。如何使用 Graphviz 绘制没有连接顶点的图形? 最佳答案 像这样: digraph g { SingleNode; } 简单地不定义
我目前正在使用 R 中的“igraph”包进行一些社交网络分析,我想知道是否有一种方法可以个性化社交网络中节点的放置。 例如,使用以下玩具代码: library(igraph) edg
我在 Box2D 中有一个多边形形状。形状是一个三角形,我希望有 3 个顶点。事实上,我创建的所有形状都会输出 8 个顶点。为什么是这样?如果我输出顶点数,那总是正确的数量。我不想渲染不必要的线条,但
来自user manual CGAL Surface_mesh 类: the data structure uses integer indices as descriptors for vertic
我正在尝试找到引用 ARFaceGeometry 网格索引的方法为了使用 ARKit 将图形放置在面部的特定部位。 我见过很多例子,其中功能与一些索引号,但我找不到对此列表的任何引用。它似乎有超过12
Apache TomCat(版本未知) 业务对象 4.1 顶点 4.4.3 在一台服务器上,我们拥有 TomCat 和 Business Objects。 APEX 也使用 TomCat。 在对我们的
我正在使用 MX Graph 进行一些工作,以帮助识别网站中的关键内容路径。我将其设置为每个顶点代表网站上的一个页面,每条边代表一组从页面 A 访问页面 B 的访问者。 一切都运行良好,除了边太多,我
我正在尝试使用三角形 strip 绘制一个平面。我了解如何手动执行此操作,但我真的很难使用 for 循环来执行此操作。到目前为止,下面的代码绘制了两个三角形。 //vertices for trian
如果我想通过 id 顶点获取名称,我可以使用这个函数:VAS(g, "name",id)但是如果我想要相反的方式,通过名称获取 id,我该怎么做呢? 最佳答案 igraph 本身不提供按名称查找顶点的
我有一个三角形,其任意顶点位于 3D 空间中。 我知道通过以下操作很容易找到这种三角形的质心: float centroid[3] = { 0, 0, 0 }; for (int i = 0; i =
我有一个点数组。每个点都有位置(x, y, z) 和法 vector (xn, yn, zn) ,一共6个 double 。考虑到浮点容差,我需要在此数组中找到唯一元素并删除重复条目。 实现它的简单有
我有一个相互连接的边列表 (E),如何找到从一个顶点连接到另一个顶点的最短路径? 我正在考虑使用 lowest common ancestors ,但边缘没有明确定义的根,所以我认为该解决方案不起作用
我现在正在使用计算着色器开发粒子系统。我将所有粒子都放在着色器存储缓冲区中。一个粒子包含两个顶点,当前位置和先前位置。 struct Particle{ glm::vec4 _currPo
我将我的顶点剪裁在边缘上,如这张专辑所示: http://imgur.com/a/VkCrJ 当我的地形大小为 400 x 400 时,我得到裁剪,但在 40x40 或更小时,我没有得到任何裁剪。这是
总是在顶点着色器中而不是在片段着色器中更好地进行硬计算吗?即使是具有超过 100.000 个多边形的高网格模型(假设有一堆独特的顶点)? 最佳答案 不,它并不总是更好。 选择合适的计算位置的最佳方法是
我想编辑一个立方体上的 1 个顶点,但我不知道该怎么做。我试过到处寻找此功能,但找不到解决方案。 这是我想要实现的目标的图像: 最佳答案 http://answers.unity3d.com/ques
我是一名优秀的程序员,十分优秀!