當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Threejs实现天空盒，全景场景，地面草地

發布時間：2024/8/1 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 Threejs实现天空盒，全景场景，地面草地小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?1，介紹：

該示例使用的是 r95版本Three.js庫。將創建一個場景實現天空盒全景背景圖，添加坐標軸，添加地面并設置地面材質。效果圖如下：

?2，主要說明：

創建天空盒，主要就是6張圖構建整個場景的圖片。這六張圖分別是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。Three.js會將這些圖片整合到一起來創建一個無縫的環境貼圖。代碼如下：

var scene = new THREE.Scene();var urls = ['assets/textures/cubemap/flowers/posx.jpg','assets/textures/cubemap/flowers/negx.jpg','assets/textures/cubemap/flowers/posy.jpg','assets/textures/cubemap/flowers/negy.jpg','assets/textures/cubemap/flowers/posz.jpg','assets/textures/cubemap/flowers/negz.jpg' ];var cubeLoader = new THREE.CubeTextureLoader(); scene.background = cubeLoader.load(urls);

?創建地面并添加材質，Three.js提供了兩個新型材質：THREE.MeshStandardMaterial（標準材質）和THREE.MeshPhysicalMaterial（物理材質），這里使用的是MeshPhysicalMaterial標準材質。代碼如下：

/*** 創建地面并添加材質* wrapS屬性定義的是紋理沿x軸方向的行為，而warpT屬性定義的是紋理沿y軸方向的行為。* Three.js為這些屬性提供了如下兩個選項：* ·THREE.RepeatWrapping允許紋理重復自己。* ·THREE.ClampToEdgeWrapping是屬性的默認值。* 屬性值為THREE.ClampToEdgeWrapping時，那么紋理的整體不會重復，只會重復紋理邊緣的像素來填滿剩下的空間。*/ function createPlaneGeometryBasicMaterial() {var textureLoader = new THREE.TextureLoader();var cubeMaterial = new THREE.MeshStandardMaterial({map: textureLoader.load("assets/textures/stone/cd.jpg"),});cubeMaterial.map.wrapS = THREE.RepeatWrapping;cubeMaterial.map.wrapT = THREE.RepeatWrapping;cubeMaterial.map.repeat.set(8, 8)// 創建地平面并設置大小var planeGeometry = new THREE.PlaneGeometry(100, 100);var plane = new THREE.Mesh(planeGeometry, cubeMaterial);// 設置平面位置并旋轉plane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.position.z = 0;return plane; }

?3，源碼如下：

<!DOCTYPE html> <html><head><title>Threejs實現天空盒、場景背景、全景</title><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript" src="libs/OrbitControls.js"></script><style>body {margin: 0;overflow: hidden;}</style></head><body><div id="dom"></div><script type="text/javascript">var camera;var renderer;function init() {// 創建一個場景，它將包含我們所有的元素，如物體，相機和燈光。var scene = new THREE.Scene();var urls = ['assets/textures/cubemap/flowers/posx.jpg','assets/textures/cubemap/flowers/negx.jpg','assets/textures/cubemap/flowers/posy.jpg','assets/textures/cubemap/flowers/negy.jpg','assets/textures/cubemap/flowers/posz.jpg','assets/textures/cubemap/flowers/negz.jpg'];var cubeLoader = new THREE.CubeTextureLoader();scene.background = cubeLoader.load(urls);// 創建一個攝像機，它定義了我們正在看的地方camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 將攝像機對準場景的中心camera.position.x = 10;camera.position.y = 50;camera.position.z = 90;camera.lookAt(scene.position);var orbit = new THREE.OrbitControls(camera);// 創建一個渲染器并設置大小，WebGLRenderer將會使用電腦顯卡來渲染場景renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);// scene.add(new THREE.AmbientLight(0x666666));var ambientLight = new THREE.AmbientLight("#ffffff", 1);scene.add(ambientLight);// 在屏幕上顯示坐標軸var axes = new THREE.AxisHelper(100);scene.add(axes);// 將平面添加到場景中var plane = createPlaneGeometryBasicMaterial();scene.add(plane);// 將呈現器的輸出添加到HTML元素document.getElementById("dom").appendChild(renderer.domElement);// 啟動動畫renderScene();// 創建一個地面function createPlaneGeometryBasicMaterial() {var textureLoader = new THREE.TextureLoader();var cubeMaterial = new THREE.MeshStandardMaterial({map: textureLoader.load("assets/textures/stone/cd.jpg"),});cubeMaterial.map.wrapS = THREE.RepeatWrapping;cubeMaterial.map.wrapT = THREE.RepeatWrapping;cubeMaterial.map.repeat.set(8, 8)// 創建地平面并設置大小var planeGeometry = new THREE.PlaneGeometry(100, 100);var plane = new THREE.Mesh(planeGeometry, cubeMaterial);// 設置平面位置并旋轉plane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.position.z = 0;return plane;}function renderScene() {orbit.update();// 使用requestAnimationFrame函數進行渲染requestAnimationFrame(renderScene);renderer.render(scene, camera);}// 渲染的場景renderer.render(scene, camera);}window.onload = init;// 隨著窗體的變化修改場景function onResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}// 監聽窗體調整大小事件window.addEventListener('resize', onResize, false);</script></body> </html>

需要完整代碼請留言或者聯系我微信：1171053128

在線預覽：左本的博客 (zuoben.top)

總結

以上是生活随笔為你收集整理的Threejs实现天空盒，全景场景，地面草地的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CommandName属性简介
下一篇： D3D11 法线贴图（凹凸贴图）