Question

我开始使用three.js和webgl进行一个小项目。我想根据用户输入创建一个衣柜模型。你可以在这里找到这个项目：

没有材质和阴影，它渲染速度非常快，轨道非常平滑，但如果我启用阴影贴图并添加我的材质，它会变得越来越慢。所以我的问题是，如果我的代码中存在任何性能问题或可能的增强功能。纹理的文件大小介于10到70 KB之间。

这是主要的JS代码：

var WIDTH = 800,
    HEIGHT = 600;

// set some camera attributes
var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 1,
    FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL/Canvas renderer, camera

var renderer = new THREE.WebGLRenderer();   
var camera = new THREE.PerspectiveCamera(  VIEW_ANGLE,
                                ASPECT,
                                NEAR,
                                FAR  );
var scene = new THREE.Scene();

var mouse = new THREE.Vector2()
var INTERSECTED;
var objects = [];

//Variables from Form

var stange, hoehe, breite, anzahl_tueren, mesh, schrank, door, door_1, door_2, door_3, plane, breite_hoehe_tiefe, material_selected, projector, raycaster;
var error_breite = document.getElementById('err_msg_breite');
var error_hoehe = document.getElementById('err_msg_hoehe');
var error_tiefe = document.getElementById('err_msg_tiefe');
var tiefe = 0;  
var mirrorCube, mirrorCubeCamera;


//Form-Data 
$("#submit_btn").bind("click", change);
$( "#opacity_slider" ).change(function() {    
        door_1.material.transparent = true;
        door_1.material.opacity = document.getElementById('opacity_slider').value/100;
        door_2.material.transparent = true;
        door_2.material.opacity = document.getElementById('opacity_slider').value/100;
        door_3.material.transparent = true;
        door_3.material.opacity = document.getElementById('opacity_slider').value/100;
});

//Materials 
var material_basic = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/basic.jpg'), color: 'white'});
material_selected = material_basic;

var material_schrank = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/basic.jpg')});

var material_door_1 = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/basic.jpg')});
var material_door_2 = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/basic.jpg')});
var material_door_3 = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/basic.jpg')});

var material_eiche = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/eiche.jpg')});    
var material_buche = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/buche.jpg')});    
var material_birke = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/birke.jpg')});
var material_mirror = new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('img/mirror.jpg')});  

//Lights
var pointLight_front = new THREE.DirectionalLight( 0xaaaaaa, 0.6 ); 
var pointLight_back = new THREE.AmbientLight( 0xaaaaaa ); 


function change(){      

    objects = [];   

    scene.remove(schrank);
    scene.remove(door);
    scene.remove(pointLight_front);
    scene.remove(stange);       

    if(document.getElementById('breite').value<=400){       
        breite = parseInt(document.getElementById('breite').value,10);
        error_breite.innerHTML = "";
    }
    else error_breite.innerHTML = "Maximale Breite 400cm.";

    if(document.getElementById('hoehe').value<=300){        
        hoehe = parseInt(document.getElementById('hoehe').value,10);
        error_hoehe.innerHTML = "";
    }
    else error_hoehe.innerHTML = "Maximale Höhe 300cm.";

    if(document.getElementById('tiefe').value<=90){     
        tiefe = parseInt(document.getElementById('tiefe').value,10);
        error_tiefe.innerHTML = "";
    }
    else error_tiefe.innerHTML = "Maximale Tiefe 90cm.";    

    anzahl_tueren = parseInt(document.getElementById('anzahl_tueren').value,10);

    breite_hoehe_tiefe = Math.max(breite,hoehe,tiefe);

    //Floor                 
    var ground = new THREE.CubeGeometry( breite_hoehe_tiefe*10, 1, breite_hoehe_tiefe*10 );
    var white_material = new THREE.MeshBasicMaterial( { color: 0xfafafa, opacity : 1 } );
    plane = new THREE.Mesh(ground, white_material);
    plane.position.y = -1;      
    plane.receiveShadow = true; 

    //Schrank Basis
    var basis_geo = new THREE.CubeGeometry( breite, hoehe, tiefe );
    var basis_mesh = new THREE.Mesh( basis_geo );
    basis_mesh.position.z = -10;
    var basis_bsp = new ThreeBSP( basis_mesh );

    var schrank_width = 10;

    var basis_inner_geo = new THREE.CubeGeometry( breite-schrank_width, hoehe-schrank_width, tiefe+schrank_width );
    var basis_inner_mesh = new THREE.Mesh( basis_inner_geo );
    basis_inner_mesh.position.z = 0;
    var basis_inner_bsp = new ThreeBSP( basis_inner_mesh );

    var subtract_bsp = basis_bsp.subtract( basis_inner_bsp );
    schrank = subtract_bsp.toMesh( material_schrank );
    schrank.position.y = (hoehe/2); 
    schrank.castShadow = true;
    schrank.receiveShadow = true;       

    //Kleiderstange           
    if(document.getElementById('kleiderstange_check').value == 1){
        var stange_geo = new THREE.CylinderGeometry( 3, 3, breite-schrank_width, 8, 1 );
        stange = new THREE.Mesh(stange_geo, material_basic);
        stange.rotation.z = 90*Math.PI/180;
        stange.position.y = hoehe-40;
        document.getElementById("data_test").innerHTML = "Stange: Ja"+document.getElementById('kleiderstange_check').value;
    }
    else document.getElementById("data_test").innerHTML = "Stange: Nein"+document.getElementById('kleiderstange_check').value;

    //Türen 
    var door_width = 5;
    var door_seperation = 0.5;
    var door_geo = new THREE.CubeGeometry( ((breite-schrank_width)/anzahl_tueren)-door_seperation, hoehe-schrank_width, door_width );       
    door = new THREE.Object3D();
    door.position.z = (tiefe/2)-schrank_width-(door_width/2);

    if (anzahl_tueren==1) {
        door_1 = new THREE.Mesh(door_geo, material_door_1);
        door_1.position.z = 0;
        door_1.position.x = 0;                  
        door_1.castShadow = true;
        door_1.receiveShadow = true;
        door.add(door_1);
    }

    //add new door to door Mesh!!
    if (anzahl_tueren==2){
        door_1 = new THREE.Mesh(door_geo, material_door_1);
        door_1.position.z = 0;              
        door_1.castShadow = true;
        door_1.receiveShadow = true;
        door.add(door_1);           
        door_1.position.x = ((breite-(schrank_width))/4*(-1))-(door_seperation/4);          

        door_2 = new THREE.Mesh(door_geo, material_door_2);
        door_2.position.z = 0;
        door_2.position.x = ((breite-(schrank_width))/4)+(door_seperation/4);
        door_2.castShadow = true;
        door_2.receiveShadow = true;
        door.add(door_2);               
    }
    if (anzahl_tueren==3){

        door_1 = new THREE.Mesh(door_geo, material_door_1);
        door_1.position.z = 0;              
        door_1.castShadow = true;
        door_1.receiveShadow = true;
        door.add(door_1);           
        door_1.position.x = ((breite-(schrank_width))/3*(-1))-(door_seperation/4);          

        door_2 = new THREE.Mesh(door_geo, material_door_2);
        door_2.position.z = 0;
        door_2.position.x = 0;
        door_2.castShadow = true;
        door_2.receiveShadow = true;    
        door.add(door_2);   

        door_3 = new THREE.Mesh(door_geo, material_door_3);
        door_3.position.z = 0;
        door_3.position.x = (((breite-(schrank_width))/3)+(door_seperation/4));
        door_3.castShadow = true;
        door_3.receiveShadow = true;    
        door.add(door_3);   

    }
    door.position.y = (hoehe/2);
    door.castShadow = true;
    door.receiveShadow = true;  

    // set Light position
    pointLight_front.position.x = breite;
    pointLight_front.position.y = hoehe+500;
    pointLight_front.position.z = tiefe+300;
    pointLight_front.shadowCameraNear = 20; 
    pointLight_front.shadowCameraFar = 5000;    
    pointLight_front.shadowBias = 0.001;

    pointLight_front.shadowCameraLeft = -breite_hoehe_tiefe;
    pointLight_front.shadowCameraRight = breite_hoehe_tiefe;
    pointLight_front.shadowCameraTop = breite_hoehe_tiefe;
    pointLight_front.shadowCameraBottom = -breite_hoehe_tiefe;

    pointLight_front.shadowCamera.near = pointLight_front.shadowCameraNear;
    pointLight_front.shadowCamera.far = pointLight_front.shadowCameraFar;       
    pointLight_front.shadowCamera.left = pointLight_front.shadowCameraLeft;
    pointLight_front.shadowCamera.right = pointLight_front.shadowCameraRight;
    pointLight_front.shadowCamera.top = pointLight_front.shadowCameraTop;
    pointLight_front.shadowCamera.bottom = pointLight_front.shadowCameraBottom;

    pointLight_front.shadowCamera.updateProjectionMatrix();

    objects.push(schrank);
    objects.push(door.children[0]); 
    objects.push(door.children[1]); 
    objects.push(door.children[2]); 
    objects.push(stange);   
}   


init();
animate();

function init() {       

    projector = new THREE.Projector();
    raycaster = new THREE.Raycaster();  

    // the camera starts at 0,0,0 so pull it back
    camera.position.set(0,500,500);

    // start the renderer
    renderer.setSize(WIDTH, HEIGHT);
    renderer.setClearColor( 0xfafafa );
    renderer.sortObjects = false;
    // to antialias the shadow
    renderer.shadowMapType = THREE.PCFSoftShadowMap;
    renderer.shadowMapEnabled = true;

    // attach the render-supplied DOM element
    $container.append(renderer.domElement);          

    // and the camera
    scene.add(camera);

    // create a point light     
    pointLight_front.castShadow = true;
    pointLight_front.shadowDarkness = 0.07;
    pointLight_front.shadowMapWidth = 4096;
    pointLight_front.shadowMapHeight = 4096;    

    //make Light Cone visible to camera
    //pointLight_front.shadowCameraVisible = true; 

    pointLight_back.position.set( -150, 200, 250 );

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    document.addEventListener( 'click', onDocumentMouseClick, false );
    //window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseClick( event ) {

    event.preventDefault();

    mouse.x = ( (event.clientX-7) / WIDTH ) * 2 - 1; 
    mouse.y = 1 - ( (event.clientY-7) / HEIGHT ) * 2;
    //client.X / client.Y - 7 berücksichtigt den margin der body, der den canvas verschiebt

    // find intersections

    var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
    projector.unprojectVector( vector, camera );

    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

    var intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0 ) {              
        INTERSECTED = intersects[0].object;
        INTERSECTED.material.map = material_selected.map;

    } else {    
        //document.getElementById("data_test").innerHTML = "not intersected";           
    }

}

function animate() {      

  // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
  requestAnimationFrame(animate);      
  scene.add(pointLight_front);
  scene.add(pointLight_back);
  scene.add(plane);
  scene.add(schrank);
  scene.add(door);
  scene.add(stange);
  render();
}

function render(){    

  // Render the scene.    
  renderer.render(scene, camera);     
  controls.update();    
}

非常感谢任何帮助。

Answer 1

我建议您使用http://stemkoski.github.io/Three.js/GUI-Controller.html控件，您可以更改一些更轻的尺寸，其他示例：http://all.develoteca.com/builder/?model=book

三js表演

1 个答案: