threejs添加天空盒
生活随笔
收集整理的這篇文章主要介紹了
threejs添加天空盒
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、 實(shí)現(xiàn)思路
1、第一種：
創(chuàng)建一個盒子，然后將圖片作為盒子6個面的紋理貼上來創(chuàng)建。讓所有的場景都在盒子內(nèi)部。在用鼠標(biāo)滾輪縮進(jìn)的時候，控制縮進(jìn)的范圍，不讓相機(jī)位置走出盒子。具體實(shí)現(xiàn)參考：使用threejs實(shí)現(xiàn)VR看房效果，仿貝殼找房VR看房
2、第二種：
使用THREE.CubeTextureLoader加載紋理材質(zhì)來設(shè)置為場景的背景來創(chuàng)建天空盒子：
核心代碼：
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"] );實(shí)現(xiàn)效果：
二、整體代碼
<!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( ["遠(yuǎn)山_LF.jpg", "遠(yuǎn)山_RT.jpg", "遠(yuǎn)山_UP.jpg", "遠(yuǎn)山_DN.jpg", "遠(yuǎn)山_FR.jpg", "遠(yuǎn)山_BK.jpg"] );// .load( ["home1_left.jpg", "home1_right.jpg", "home1_top.jpg", "home1_bottom.jpg", "home1_front.jpg", "home1_back.jpg"] );// 環(huán)境光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); // 相機(jī)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>總結(jié)
以上是生活随笔為你收集整理的threejs添加天空盒的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 好用的在线画图软件
- 下一篇： icem二维非结构网格划分_ICEM蜗壳