Javascript 如何用Three.js高质量加载对象？

我试图用Three.js创建一个对象加载器，但我注意到质量太低，同时占用了太多CPU

使用我的版本时，场景如下所示：

但当我使用加载时，它看起来更好，使用更少的CPU：

我加载此对象的JavaScript是：

var camera;
var scene;
var renderer;
var controls;
var container = document.getElementById('webgl');
var WIDTH = container.clientWidth;
var HEIGHT = container.clientHeight;
var ASPECT = WIDTH / HEIGHT;
var ANGLE = 45;
var container =  document.getElementById('webgl');

if (Detector.webgl) {
    main();
} else {
    var warning = Detector.getWebGLErrorMessage();
    document.getElementById('webgl').appendChild(warning);
}

function main(){  
    //Scene
    scene = new THREE.Scene();

    //Camera
    camera = new THREE.PerspectiveCamera(
        ANGLE, // field of view
        ASPECT, // aspect ratio
        10, // near clipping plane
        100000 // far clipping plane
    );

    camera.position.x = 500;
    camera.position.y = 200;
    camera.position.z = 500;
    camera.lookAt(new THREE.Vector3(100, 100, 100));

    //Renderer
    renderer = new THREE.WebGLRenderer();
    var ambientLight = getAmbientLigth(1);
    scene.add(ambientLight);
    scene.background = new THREE.Color( 0xc3c3c3 );
    renderer.setSize(WIDTH, HEIGHT);

    renderer.shadowMap.enabled = true;
    document.getElementById('webgl').appendChild(renderer.domElement);
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.maxPolarAngle = Math.PI/2;
    controls.enableKeys = true;
    loadObject();
    update(renderer, scene, camera, controls);
}

function getAmbientLigth(intensity, color) {
    color = color === undefined ? 'rgb(255, 255, 255)' : color;
    var light = new THREE.AmbientLight(color, intensity);
    return light;
}

function loadObject() {
    var mtlLoader = new THREE.MTLLoader();
    var objLoader = new THREE.OBJLoader();
    mtlLoader.setPath( 'objects/Blue_shed/' );
        mtlLoader.load('blueShed.mtl', function( materials ) {
        materials.isMultiMaterial = true;
        materials.preload();
        objLoader.setMaterials( materials );
        objLoader.setPath( 'objects/Blue_shed/' );
        objLoader.load( 'blueShed.obj', function ( object ) {
            object.name = 'cute-house';
            object.receiveShadow = true;
            object.castShadow = true;
            object.scale.set( 30, 30, 30);
            scene.add( object );
        } );
    });
}

function update(renderer, scene, camera, controls) {
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(function() {
        update(renderer, scene, camera, controls);
    });
}

我使用了

renderer.setSize

来提高渲染器的分辨率，这有一点帮助，但仍然不如第二幅图像中的效果好，并且仍然使用了太多的CPU

---

有什么想法吗？是否有设置或我设置不正确的东西？我看到该网站使用了JSON加载程序，但我认为这与此问题无关，但我只是以防万一地提到它。

我在您的网站中没有看到任何阴影。请尝试使用：renderer=new THREE.WebGLRenderer（{antialasing:true}），p、 我看到门上有重叠的顶点。对象确实需要优化。@NikolaLukic已经尝试了

抗锯齿：true

，但我没有看到任何更改。这种优化是通过渲染器还是通过另一个库来完成的？与3dviewer站点使用的JSON加载程序？2pha和rabbi76一样，阴影和灯光工作正常，但不会改变对象的别名外观。甚至在尝试了尼古拉建议的设置之后，你是否尝试过其他关于抗别名的问答，如：和。