使用three.js实现

初想

春节来临之际，无意中看见安居客中的一个小功能（全景），一点进去就是真实的房屋全景图，感觉比较炫酷，在想，如果让我实现的话，该从哪0里下手呢？经过一番资料的查找，实现了一个简单的实例供大家参考：

效果如下：

代码如下：

// An highlighted block
//创造场景
    var scene=new THREE.Scene();
    //添加网格模型
    var geometry=new THREE.BoxGeometry(100,100,100);
    var materia=new THREE.MeshLambertMaterial({color:0xff0000});
    var mesh=new THREE.Mesh(geometry,materia);
    scene.add(mesh);
     //外部模型加载 没有材质的
    var loader=new THREE.OBJLoader();
    loader.load('file.obj',function (obj) {
        obj.scale.set(0.1,0.1,0.1);
        obj.position.y=50;
        obj.rotation.y=-180;
        obj.position.x=-30;
        scene.add(obj);
    })
    //外部模型加载 有材质的
    var loader2=new THREE.MTLLoader();
    loader2.load('file.mtl',function (mtlobj) {
        var objloader=new THREE.OBJLoader();
        objloader.setMaterials(mtlobj);
        objloader.load('file.obj',function (obj) {
            obj.scale.set(0.1,0.1,0.1);
            obj.position.y=50;
            obj.rotation.y=-150;
            obj.position.x=30;
            scene.add(obj);
        })

    })
    //添加灯光
    var light=new THREE.PointLight(0xffffff);
    light.position.set(300,400,200);//光源的位置
    scene.add(light);//将光源加入到场景中

    //添加天空盒 （需准备6张图片）
    scene.background=new THREE.CubeTextureLoader().setPath('./Park3Med/')
        .load(['px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg']);

    scene.add(new THREE.AmbientLight(0x333333));
    //添加相机
    var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);
    camera.position.set(500,-80,400);
    camera.lookAt(scene.position);
    //创建渲染器
    var renderer=new THREE.WebGLRenderer();
    renderer.setSize(800,600);
    document.body.appendChild(renderer.domElement);
    //渲染
    function render(){
        renderer.render(scene,camera);
    }
    render(); //刚加载页面的时候就渲染一次  要不刚进入页面背景会是黑色的
    //相机控制器 引入相机扩展库OrbitControls
    var controls=new THREE.OrbitControls(camera);
    controls.addEventListener('change', render);

    //动画执行 //由于加载外部模型的方法load 是异步的所以第一次加载页面时候  桌子没有出来
    //解决办法  加入动画处理
    function animate() {
        requestAnimationFrame(animate);
        render()
    }
    animate();

以上就是3D场景的核心代码，感兴趣的可以一步一步试试，挺好玩的，不嫌麻烦的话关注一下微信公共号：笑文的同学 ------ 我会 不定期的分享一些实用的前端知识点，知识都是一点一滴积累起来的，祝大家在前端的路上越走越远，最后祝大家新年快乐 嘻嘻！