Question

我是three.js的忠实粉丝：）

我想制作一个男性.obj模型的简单obj查看器，尝试使用three.js中的不同裤子。

我的.obj加载程序目前正常工作，但我不知道如何添加一个简单的UI来交换.obj裤子及其纹理。我目前的代码如下。任何帮助1）添加obj和纹理交换功能和2）结合一个简单的，可定制的UI将是真棒！（理想情况下不是Dat GUI）现在，我的资产只是avatar.obj / avatar.mtl和pants1.obj / pants1.mtl，但是我想建立代码来交换pants2.obj，pants3.obj和不同.mtls。

请注意，我已在http://threejs.org/examples/#webgl_materials_cars查看了Bugatti示例，但无法了解要添加到我的代码中添加类似功能的组件。我刚刚开始学习three.js和javascript，并希望得到任何人的帮助来解释如何做到这一点！非常感谢你提前！关于如何改进我的代码的任何其他想法也将非常感激。

谦卑你的，

-Platypus

<HTML>
    <title> OBJ Viewer and Swapping Assets</title>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="js/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>

    <script src="js/dat.gui.min.js"></script>

        <script src="js/loaders/DDSLoader.js"></script>
        <script src="js/loaders/MTLLoader.js"></script>
        <script src="js/loaders/OBJLoader.js"></script>


        <script src="js/Detector.js"></script>




    <div id="webGL-container"></div>

    <style>

        body{
            margin:0;
            overflow:hidden;

            }
        </style>

        <body>

            <div id ="webGL-container">
            </div>

            <script type ="text/javascript" src="js/main.js"></script> 

            <script>
            $(function(){
/*Work on v72  */

    /*global variables*/
    var scene, camera, renderer;
    var controls;
    var stats;
    var spotLight, cube;
    var SCREEN_WIDTH, SCREEN_HEIGHT;


    function init(){
        /*creates empty scene object and renderer*/
        scene = new THREE.Scene();
        camera =  new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 1000);
        renderer = new THREE.WebGLRenderer({antialias:true});

        renderer.setClearColor(0xdddddd);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true
        renderer.shadowMapSoft = true;

        /*add controls*/
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.addEventListener( 'change', render );


        /*Camera*/
        camera.position.x = 125;
        camera.position.y = 80;
        camera.position.z = 125;
        camera.lookAt(scene.position);

        /*Lights*/
        var ambient = new THREE.AmbientLight( 0x404040 );
        scene.add( ambient );

        spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( 100, 100, 500 );
        spotLight.castShadow = true;
        spotLight.shadowCameraNear = 8;
        spotLight.shadowCameraFar = 30;
        spotLight.shadowDarkness = 0.5;
        spotLight.shadowCameraVisible = true;
        spotLight.shadowMapWidth = 1024;
        spotLight.shadowMapHeight = 1024;
        spotLight.name = 'Spot Light';
        scene.add( spotLight );

        var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, .4 );
        scene.add( light );


        //Platform Texture
        var texture1 = new THREE.TextureLoader().load( 'Assets/wood/wood3.jpg' );



        var platform = new THREE.CylinderGeometry( 50, 50, 5, 32 );
        var material = new THREE.MeshPhongMaterial( {


            side: THREE.Doubleside,

            shininess: 100,
            specular: 0xffffff,
            map: texture1,
            shading: THREE.SmoothShading

            } );
        var cylinder = new THREE.Mesh( platform, material );


        cylinder.receiveShadow = true;
        cylinder.position.set( 0, -2, 0 );
        cylinder.castShadow = true;
        scene.add( cylinder );




        /*model loading*/
        var onProgress = function ( xhr ) {
        if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round(percentComplete, 2) + '% downloaded' );
        }
        };

        var onError = function ( xhr ) { };


        var mtlLoader1 = new THREE.MTLLoader();
        mtlLoader1.setBaseUrl( 'Assets/obj/' );
        mtlLoader1.setPath( 'Assets/obj/' );
        mtlLoader1.load( 'pants1.mtl', function( materials ) {


        materials.preload();


        var objLoader1 = new THREE.OBJLoader();
        objLoader1.setMaterials( materials );
        objLoader1.setPath( 'Assets/obj/' );
        objLoader1.load( 'pants1.obj', function ( object ) {

            object.position.y = 0;
            scene.add( object );

            }, onProgress, onError );

            });



        var mtlLoader2 = new THREE.MTLLoader();
        mtlLoader2.setBaseUrl( 'Assets/obj/' );
        mtlLoader2.setPath( 'Assets/obj/' );
        mtlLoader2.load( 'avatar.mtl', function( materials ) {

        materials.preload();

        var objLoader2 = new THREE.OBJLoader();
        objLoader2.setMaterials( materials );
        objLoader2.setPath( 'Assets/Joe_Boxer_L/' );
        objLoader2.load( 'avatar.obj', function ( object ) {

        object.position.y = 0;
        //object.rotate(10);

        scene.add( object );

        }, onProgress, onError );

        });




        $("#webGL-container").append(renderer.domElement);

    }

    function render() {}

    function animate(){
        requestAnimationFrame(animate);
        render();



        renderer.render(scene, camera);
    }

    init();
    animate();

    $(window).resize(function(){
        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;
        camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.updateProjectionMatrix();
        renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    });

}); 

</script>
        </body>

        </HTML>

使用Three.js交换材质和Obj文件并添加UI

0 个答案: