三.js导入模型抗锯齿答案

【问题标题】：Three.js imported model antialiasing三.js导入模型抗锯齿
【发布时间】：2014-10-14 06:09:10
【问题描述】：

我将 OBJ 模型导入到场景中，但它没有抗锯齿，我不知道如何使其平滑。搅拌机打开它平滑。

内置几何体（例如new THREE.SphereGeometry(4, 20, 20);）也是平滑的。

渲染器：

    var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

材料：

    var modelMaterial = new THREE.MeshPhongMaterial({
        color: 0xb9d5ff,
        ambient: 0xfff660,
        shininess: 100,
        wireframe: false,
        transparent: true,
        opacity: 0.8,
        side: THREE.DoubleSide,
        combine: THREE.MixOperation
    });

进口：

    var manager = new THREE.LoadingManager();
    manager.onProgress = function(item, loaded, total) {
        console.log(item, loaded, total);
    };
    var loader = new THREE.OBJLoader(manager);
    loader.load('BlondeElexis-nude.obj', function(object) {
        object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                console.log(child);
                child.material = modelMaterial;
            }
        });
        object.position.y = 0;
        object.scale.x = 6;
        object.scale.y = 6;
        object.scale.z = 6;
        human = object;
        scene.add(human);
    });

结果：

【问题讨论】：

创建 THREE.WebGLRenderer 的代码在哪里？
更新了问题。 var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});其实任何选项对此都没有影响
抗锯齿不是这里的问题，它是网格的平滑组。 OBJ 应该能够处理此问题，因此请检查您的 obj 导出器以获取此选项以包含平滑组。使用 ComputeVertexNormals() 命令将产生一个完全平滑的对象，这对于有机对象可能没问题，但您应该检查导出器和 OBj 导入器。如果 OBJ 不适合你，不妨试试其他格式
@GuyGood 谢谢，我会强调建模者。目前我只是在玩示例模型来制作一些草稿

标签： javascript html three.js

【解决方案1】：

找到：

child.geometry.computeVertexNormals();

结果不是最好的，但总比没有好。

【讨论】：

GuyGood的评论是正确的，您需要在您的3d程序中为您的模型设置平滑组，并确保导出时包含平滑组。