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实现天空盒，全景场景，地面草地相关推荐

Threejs专用天空盒素材，五种天空盒素材免费下载
使用Threejs开发web3D场景,模拟现实环境让场景更有真实感会用到天空盒.实际相当于创建了一个很大的立方体,并且将摄像机和场景中的物体都在这个立方体里面,这样看到的就是模拟的真实环境. 我整理了 ...
基于threejs + CSS3DRenderer的3D全景
基于threejs + CSS3DRenderer的3D全景可以理解为将相机置放在一个立方体内,调整相机的位置可以拍摄到场景中不同内容.本篇是通过CSS3DRenderer来实现全景浏览,分别铺满一 ...
ThreeJs创建天空盒
ThreeJS创建天空盒比较简单,可以理解成给一个立方体贴图,所以需要给六个面分别贴图,6张图构建整个场景的图片.这六张图分别是朝前的(posz).朝后的(negz).朝上的(posy).朝下的(ne ...
krpano360全景教程 - 全景场景实现自动旋转及循环浏览全部场景
krpano360全景教程 - 全景场景实现自动旋转及循环浏览全部场景 <autorotate enabled="true" waittime="1" s ...
VUE3+ThreeJs实现3D全景场景，可自由旋转视角
介绍文章中使用到的案例图片都来源于:Humus - Textures 这个网站里面有很多免费的资源.每个资源里面都提供6个不同方位的图片.我们只需要通过threejs稍微处理一下,就能实现3d场景了 ...
threejs 加载两个场景_threejs中的三维场景操作
在threejs开发中,不可避免的需要对三维场景进行交互,例如对模型进行旋转,缩放,平移等操作.接下来,我们就聊一聊如何进行三维场景的交互. 控制的对象是谁? 在三维的世界中,如果想达到场景的TRS( ...
threejs实现天空盒
1.天空盒概述以及效果类似这种全景图片,我们将图片切成六个小图片,分别将六个小图片贴在一个正方体的里面,这样当我们置身于这个正方体里面的时候,就像在看全景图一样. 效果如下: 2.threejs代码 ...
M2DGR：多源多场景地面机器人SLAM数据集（ICRA 2022 ）
Paper:https://arxiv.org/pdf/2112.13659.pdf 出处:ICRA2022 & RAL2021 项目地址:https://github.com/SJTU-Vi ...
Threejs在vue中使用(场景、相机、渲染器、gltf模型添加、环境贴图等）
前言 Three.js ( Javascript 3D library ) 是基于原生WebGL封装运行的三维引擎,WebGL可以看成是浏览器给我们提供的接口,在JavaScript中可以直接用这些A ...
threejs入门第一节如何用threejs创建一个简单的场景
什么是threejs? threejs是一个用于在浏览器中绘制3D图像的JS库.它是基于webgl实现了,包括了webgl1和webgl2的渲染引擎.同时也包括了最新的webgpu.(部分浏览器基本不 ...

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

1，介绍：

2，主要说明：

3，源码如下：

Threejs实现天空盒，全景场景，地面草地相关推荐

最新文章

热门文章