Question

我正在尝试使用Three.js创建一个对象加载器，但我注意到质量太低而且同时使用了太多的CPU。

当我使用我的版本时，场景看起来像这样：

但是当我使用this website加载它时，看起来好多了并且使用的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加载程序，但我认为这与此问题无关，但我提到它以防万一。

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

0 个答案: