threejs添加天空盒
生活随笔
收集整理的這篇文章主要介紹了
threejs添加天空盒
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、 實現思路
1、第一種：
創建一個盒子，然后將圖片作為盒子6個面的紋理貼上來創建。讓所有的場景都在盒子內部。在用鼠標滾輪縮進的時候，控制縮進的范圍，不讓相機位置走出盒子。具體實現參考：使用threejs實現VR看房效果，仿貝殼找房VR看房
2、第二種：
使用THREE.CubeTextureLoader加載紋理材質來設置為場景的背景來創建天空盒子：
核心代碼：
scene.background = new THREE.CubeTextureLoader().setPath( './img/' ).load( ["home1_left.jpg", "home1_right.jpg", "home1_top.jpg", "home1_bottom.jpg", "home1_front.jpg", "home1_back.jpg"] );實現效果：
二、整體代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天空盒</title><script src="./build/three.min.js"></script><script src="./js/controls/OrbitControls.js"></script><style>body {height: 100vh;overflow: hidden;}</style> </head> <body> <script>let scene, camera, renderer, controls;let width = window.innerWidth;let height = window.innerHeight;function init () {// 場景scene = new THREE.Scene();scene.background = new THREE.CubeTextureLoader().setPath( './img/' ).load( ["遠山_LF.jpg", "遠山_RT.jpg", "遠山_UP.jpg", "遠山_DN.jpg", "遠山_FR.jpg", "遠山_BK.jpg"] );// .load( ["home1_left.jpg", "home1_right.jpg", "home1_top.jpg", "home1_bottom.jpg", "home1_front.jpg", "home1_back.jpg"] );// 環境光let light = new THREE.AmbientLight(0xadadad); // soft white lightscene.add(light);// 平行光源const directionalLight = new THREE.DirectionalLight(0xffffff, .6);directionalLight.position.set(100, 100, 0);scene.add(directionalLight); // 相機camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)camera.position.set(100, 152, 66)scene.add(camera)// 渲染器renderer = new THREE.WebGLRenderer();renderer.setSize(width, height)renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));renderer.setClearColor(new THREE.Color('#32373E'), 1);document.body.appendChild(renderer.domElement);render();function render () {requestAnimationFrame(render);renderer.render(scene, camera);}controls = new THREE.OrbitControls(camera, renderer.domElement);}window.onload = init </script></body> </html>總結
以上是生活随笔為你收集整理的threejs添加天空盒的全部內容，希望文章能夠幫你解決所遇到的問題。
