直接上js程式碼吧。我寫了挺多註釋。

<canvas id="scene" width="890px" height="500px">

<script>
/* http://mamboleoo.be/learnThree/ */

var renderer, scene, camera, banana,orbitControls;

var ww = window.innerWidth,
        wh = window.innerHeight;
function init() {

    renderer = new THREE.WebGLRenderer
 
({
        canvas: document.getElementById('scene')
    });
    renderer.setClearColor(0x000000);//畫布顏色
   /*  renderer.setSize(ww, wh);//渲染器 */

    scene = new THREE.Scene();//畫布
    //照相機
    //第一個引數  拍攝距離
    //第二個引數  相機拍攝面的長寬比  一般用 寬/高
    //近裁剪面（near clipping plane） 和 遠裁剪面（far clipping plane）最小範圍  最大範圍
    camera = new 
 
THREE.PerspectiveCamera(50, 890/500, 0.1, 10000);
    camera.position.set(1000, 0, 250);//  camera.position.set(0, 0, 250);
//  camera.lookAt(new THREE.Vector3(0, 10, 0));//lookAt()設定相機所看的位置
    scene.add(camera);

    //環境光和平行光
    var ambient = new THREE.AmbientLight( 0x101030 );
    scene.add( ambient );

    //Load the obj file
    
 
loadOBJ();
    var orbitControls = new THREE.OrbitControls(camera);
    orbitControls.target.set(0, 0, 0);
    orbitControls.autoRotate = true;//設定平面自動旋轉
    window.addEventListener('mousewheel', mousewheel, false);
}

var loadDirectionLight=function(){
    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 );
    scene.add( directionalLight );
}
var loadOBJ = function() {
    //Manager from ThreeJs to track a loader and its status
    var manager = new THREE.LoadingManager();
    //Loader for Obj from Three.js
    var loader = new THREE.OBJLoader(manager);
    //Launch loading of the obj file, addBananaInScene is the callback when it's ready
    /*   loader.setPath("/resource/template/spoc/normal/scripts/three/"); */
    loader.load('${curResPath}/sanzhu/scripts/three/BYM33-2_obj.obj', addBananaInScene,onProgress);

};

var addBananaInScene = function(object) {
    //設定模型的中心在模型的中點
    banana = object;
    banana.children[0].geometry.computeBoundingBox();
    banana.rotation.x = THREE.Math.degToRad( 90 );
    banana.children[0].geometry.center()
    helper = new THREE.BoundingBoxHelper(banana, 0x0000000);
    helper.update();
    //設定結束
    //Move the banana in the scene
    //Go through all children of the loaded object and search for a Mesh
    object.traverse(function(child) {
        //This allow us to check if the children is an instance of the Mesh constructor
        if (child instanceof THREE.Mesh) {
            //Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
            child.geometry.computeVertexNormals();
        }
    });
    banana.scale.set(100, 100, 100);

    banana.rotation.x = -0.3;
    scene.add(helper);
    //Add the 3D object in the scene
    scene.add(banana);
    render();
};


var render = function() {
    requestAnimationFrame(render);

    //Turn the banana
     banana.rotation.y += .01;

    renderer.render(scene, camera);
};
var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round(percentComplete, 2) + '% downloaded' );
    }
};
//滑鼠滑輪
function mousewheel(e) {
    e.preventDefault();
    //e.stopPropagation();
    if (e.wheelDelta) {  //判斷瀏覽器IE，谷歌滑輪事件
        if (e.wheelDelta > 0) { //當滑輪向上滾動時
            fov -= (near < fov ? 1 : 0);
        }
        if (e.wheelDelta < 0) { //當滑輪向下滾動時
            fov += (fov < far ? 1 : 0);
        }
    } else if (e.detail) {  //Firefox滑輪事件
        if (e.detail > 0) { //當滑輪向上滾動時
            fov -= 1;
        }
        if (e.detail < 0) { //當滑輪向下滾動時
            fov += 1;
        }
    }
    camera.fov = fov;
    camera.updateProjectionMatrix();
    renderer.render(scene, camera);
    //updateinfo();
}

$(function(){
    init();
    loadDirectionLight();
})

</script>

實現了幾個主要功能：  滑鼠滾輪的縮放、滑鼠的圍繞螢幕中心點的拖動旋轉，載入Obj檔案不含mtl紋理檔案。

想實現根據obj模型大小來自動改變相機位置或者fov值，但是沒實現。有大神會嗎。