three.js贴图之CubeTextureLoader全景贴图

梦里梦外; 2022-05-13 02:18 592阅读 0赞

## 学习交流欢迎加群：789723098，博主会将一些demo整理共享 ##

有时候我们在创建地图街景或者地点全景图的时候，会经常用到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>

**效果图：**

![70][]

[70]: /images/20220513/0fa90f6f20744c80ba7949706c90bb4c.png