three.js贴图之CubeTextureLoader全景贴图

有时候我们在创建地图街景或者地点全景图的时候，会经常用到THREE.CubeTextureLoader来对场景Scene的背景进行贴图，使之成为一个天空盒，只不过这个天空盒不能看见其外面的情景，无论怎么缩放，始终都在全景内，这是为什么呢？原因很简单，我们是对Scene的背景颜色进行贴图；笔者从官方文档中查到其应用的方法如下：

var scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
	.setPath( 'textures/cubeMaps/' )
	.load( [
		'px.png',
		'nx.png',
		'py.png',
		'ny.png',
		'pz.png',
		'nz.png'
	] );

其中，setPath里面的字符串代表图片所在文件夹，load里面的字符串代表你要贴的六个面对应的六张图片，通过观察不难发现，它们的顺序是有规律的，例如px.png和nx.png是对面，以你为例，此刻的你在电脑屏幕对面，就是这样的关系。好了，啰嗦了一大堆，不知道读者们听懂没听懂，还是直接上demo代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天空盒贴图</title>
    <script type="text/javascript" src="build/three.js"></script>
    <script type="text/javascript" src="js/controls/OrbitControls.js"></script>
    <script type="text/javascript" src="js/libs/stats.js"></script>
    <style>
        body {
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script type="text/javascript" >
        let container1 = document.createElement('div');
        document.body.appendChild(container1);

        let container2 = document.createElement('div');
        document.body.appendChild(container2);

        let scene = undefined;
        let renderer = undefined;
        let camera = undefined;
        let pointLight = ambientLight = undefined;
        let controls = undefined;
        let stats = undefined;

        main();
        render();

        function main() {
            initScene();
            initRenderer(container1);
            initCamera();
            initLight();
            textureBox();
            initControls();
            initStats(container2);
            window.addEventListener('resize', onWindowResize, false);
        }

        function initScene() {
            scene = new THREE.Scene();
            scene.background = new THREE.CubeTextureLoader()
                .setPath('textures/cube/park2/').load(
                    [
                        'posx.jpg',
                        'negx.jpg',
                        'posy.jpg',
                        'negy.jpg',
                        'posz.jpg',
                        'negz.jpg'
                    ]
                );

        }

        function initCamera() {
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(10, 0, 10);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
        }

        function initRenderer(container1) {
            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setClearColor(0xffffff, 1.0);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container1.appendChild(renderer.domElement);
        }

        function initLight() {
            ambientLight = new THREE.AmbientLight(0xffffff, 0.35);
            scene.add(ambientLight);

            pointLight = new THREE.PointLight(0xffffff);
            pointLight.position.set(10, 10, 10);
            scene.add(pointLight);
        }

        function initControls() {
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.autoRotate = false;
            controls.enableKeys = true;
        }

        function textureBox() {
            let geometry = new THREE.BoxGeometry(3, 3, 3, 30, 30, 30);
            let map = new THREE.TextureLoader().load('textures/brick_bump.jpg');
            let material = new THREE.MeshPhongMaterial({map:map});
            let box = new THREE.Mesh(geometry, material);

            scene.add(box);
        }

        function initStats(container2) {
            stats = new Stats();
            stats.setMode(0);

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            container2.appendChild(stats.domElement);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight);
        }

        function render() {
            controls.update();
            stats.update();
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

    </script>


</body>
</html>

效果图：

three.js贴图之CubeTextureLoader全景贴图

猜你喜欢