Question

我有几天在特定的Three.js问题上苦苦挣扎，我找不到任何办法。这是我的情况：

1）我有一个漂浮的网状物，由几个三角形的面组成。在使用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 );

Answer 1

试试这个

 original_geometry.updateMatrixWorld();
            var vertexIndexes = [null, null, null];
            for (var i = 0, l = vertexNormals.length; i < l; i++) {
              var position = original_geometry.geometry.vertices[i].clone();
              position.applyMatrix4( original_geometry.matrixWorld );

                var vector = new THREE.Vector3(position.x, position.y, position.z)

                vertexIndexes[i] = geovertices.push( vector ) - 1;
            }

Answer 2

我创建了一个完全可操作的JSFiddle，用于尝试并更清楚地查看问题。有了这个STL（小于我当地的例子），我甚至看不到添加到场景中的克隆严重的面孔。也许它们太小或没有焦点。

看看calculateProjectedMesh（）函数，这里是我试图克隆并放置底面的地方（已检测到，因为它们有不同的materialIndex）：

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个原始顶点，这些属性是引用原始几何体的“顶点”数组中的Vector3实例的索引。

我将平面Z位置的3个顶点克隆为零，使用它们的新索引创建新面并将其添加到投影网格（蓝色）。

我也在两个面之间添加线条作为视觉联合。现在我已经为第3步做好了准备，但我认为这足以解决这个问题。

感谢updateMatrixWorld的线索！实现我的目标至关重要;）

Three.js - 从另一个网格的某些面/顶点创建新网格

2 个答案: