three.js贴图之CubeTextureLoader全景贴图
学习交流欢迎加群：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>效果图：
three.js贴图之CubeTextureLoader全景贴图
学习交流欢迎加群：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>效果图：