Three.js模拟光滑的多边形

Question

我有这样的事情：

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {

    console.log( item, loaded, total );

};

var texture = new THREE.Texture();

var loader = new THREE.ImageLoader( manager );
loader.load( 'obj/'+model+'.jpg', function ( image ) {

    texture.anisotropy = anis;
    texture.image = image;
    texture.needsUpdate = true;

} );

// model

var loader = new THREE.OBJLoader( manager );
loader.load( 'obj/'+model+'.obj', function ( object ) {


    object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            child.material.map = texture;
            if(reflex){
                child.material.envMap = reflection;
                child.material.shading = THREE.SmoothShading;
                child.material.reflectivity = reflex;
            }

        }

    } );

    object.scale.set(10,10,10);

    object.position.y = pos;
    object.position.z = 0;
    object.position.x = 0;

    object.name = "model";
    scene.add( object );
} );

工作得很好，但......模型上的所有多边形都是这样可见的......

我想让事情顺利......所以我读了here ，我可以这样平滑起来：

// First we want to clone our original geometry.
// Just in case we want to get the low poly version back.
var smooth = THREE.GeometryUtils.clone( geometry );

// Next, we need to merge vertices to clean up any unwanted vertex. 
smooth.mergeVertices();

// Create a new instance of the modifier and pass the number of divisions.
var modifier = new THREE.SubdivisionModifier(divisions);

// Apply the modifier to our cloned geometry.
modifier.modify( smooth );

// Finally, add our new detailed geometry to a mesh object and add it to our scene.
var mesh = new THREE.Mesh( smooth, new THREE.MeshPhongMaterial( { color: 0x222222 } ) );
scene.add( mesh );

但是......我不知道我在哪里可以得到那个几何对象......任何人都可以帮助我吗？

Answer 1

看起来您需要平滑顶点法线。你可以用

做到这一点

mesh.geometry.computeVertexNormals();

为对象的每个子网格调用该函数（在遍历函数内）。

如果这不起作用，那么问题是模型上的相邻面不共享顶点。在这种情况下，在计算顶点法线之前，请调用

mesh.geometry.mergeVertices();

three.js r.67