可视化-three.js给星空加入一个天空盒

给地球添加一个天空盒

样式如下


背景添加六个图片 形成天空盒子
如立方体 6 个面 行程之后包裹；
如果需要资源：https://download.csdn.net/download/qq_29814417/11865638

new THREE.CubeTextureLoader().setPath("../image/way/").load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])  

var camera, scene, renderer;
    var clock = new THREE.Clock();
    var earth;
    function init() {
        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, 100, 300);
        camera.lookAt(new THREE.Vector3(0, 0, 0))
        scene = new THREE.Scene(); 

        //给场景加入一个天空盒 顺序不能乱
        //资源可自行搜索引擎搜索天空盒资源下载

        scene.background = new THREE.CubeTextureLoader().setPath("../image/way/").load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.querySelector("#dom").appendChild(renderer.domElement);//把canvas加载到dom元素中
        df_canvas = renderer.domElement
        if (THREE.OrbitControls) {
            new THREE.OrbitControls(camera, renderer.domElement);
        }
        //生成地球
        createEarth()
        animate()
    }
    //创建地球
    function createEarth() {
        //光源 
        var light = new THREE.AmbientLight(0xffffff); // 环境光
        scene.add(light);
        //球体
        var _config = {
            radius: 100,//半径
            map: new THREE.TextureLoader().load('../image/earth.jpg'),//加载需要的地球贴图 
        }
        //圆形几何
        var geometry = new THREE.SphereBufferGeometry(_config.radius, 64, 64);
        //材质   
        var material = new THREE.MeshPhongMaterial({
            color: 0xffffff,//颜色
            map: _config.map
        });
        earth = new THREE.Mesh(geometry, material);
        scene.add(earth);
    }

    function animate() {
        requestAnimationFrame(animate);
        var delta = clock.getDelta();
        renderer.render(scene, camera);
        earth.rotation.y += delta / 5;
    }
    init();

快速搭建工具-持续开发中