three.js贴图之CubeTextureLoader全景贴图 梦里梦外; 2022-05-13 02:18 549阅读 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
还没有评论,来说两句吧...