three.js使用环境贴图或者加载hdr图

1、three.js使用环境贴图

1.1、效果视频

环境贴图

1.2、使用步骤(个人认为)

(1)导入引入相关方法

(2)创建场景

(3)创建相机

(4)添加物体材质

(5)添加光源

(6)渲染

1.3、代码

javascript 复制代码
// 环境贴图代码
import * as THREE from 'three'

//目标:使用环境贴图放在球上展示

//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//1、创建场景
const scene = new THREE.Scene()

//2、创建相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
) // 参数分别代表,相机角度、屏幕宽高比、近端点,远端点

//设置相机位置
camera.position.set(2, 2, 2)
scene.add(camera)

//导入纹理
const cubeTextureLoader = new THREE.CubeTextureLoader()
//一下代码是因为物体有上下左右前后六个面,所以设置6个方向的贴图
const envMapTexture = cubeTextureLoader.load([
    '/static/texture/environmentMaps/1/px.jpg',
    '/static/texture/environmentMaps/1/nx.jpg',
    '/static/texture/environmentMaps/1/py.jpg',
    '/static/texture/environmentMaps/1/ny.jpg',
    '/static/texture/environmentMaps/1/pz.jpg',
    '/static/texture/environmentMaps/1/nz.jpg',
])
//添加物体
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const material = new THREE.MeshStandardMaterial({
    metalness: 0.7, //金属度
    roughness: 0.1, //粗糙度,设置为0表面会非常光滑,可以折射出太阳光
    // envMap: envMapTexture, //环境贴图
})
const mesh = new THREE.Mesh(sphereGeometry, material)
scene.add(mesh)

//给场景添加背景
scene.background = envMapTexture
//给场景中所有的物体添加默认的贴图
scene.environment = envMapTexture

//添加环境光
const light = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light)

//添加直线光源
const directionLight = new THREE.DirectionalLight(0xffffff, 1)
directionLight.position.set(10, 10, 10)
scene.add(directionLight)

//初始化渲染器
const renderer = new THREE.WebGLRenderer()

//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)

//将webGL渲染的canvas添加到app中
document.getElementById('app').appendChild(renderer.domElement)

//创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

//设置控制器阻尼,让滑动更有真实感
controls.enableDamping = true

//创建坐标轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

render()

//渲染函数
function render(time) {
    controls.update()
    renderer.render(scene, camera)
    //下一帧渲染完毕再次执行,保证每一帧都渲染
    requestAnimationFrame(render)
}

2、three.js加载hdr图

2.1、效果视频

加载hdr图

2.2、代码

javascript 复制代码
// three.js加载hdr图
import * as THREE from 'three'

//目标:加载hdr图

//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'

//1、创建场景
const scene = new THREE.Scene()

//2、创建相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
) // 参数分别代表,相机角度、屏幕宽高比、近端点,远端点

//设置相机位置
camera.position.set(2, 2, 2)
scene.add(camera)

const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync('static/texture/hdr/003.hdr').then((texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping //正常只是一张图平铺,设置这个可以让图包围环绕整个环境
    scene.background = texture //设置环境贴图
    scene.environment = texture
})

//添加物体
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const material = new THREE.MeshStandardMaterial({
    metalness: 0.7, //金属度
    roughness: 0.1, //粗糙度,设置为0表面会非常光滑,可以折射出太阳光
})
const mesh = new THREE.Mesh(sphereGeometry, material)
scene.add(mesh)

//添加环境光
const light = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light)

//添加直线光源
const directionLight = new THREE.DirectionalLight(0xffffff, 1)
directionLight.position.set(10, 10, 10)
scene.add(directionLight)

//初始化渲染器
const renderer = new THREE.WebGLRenderer()

//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)

//将webGL渲染的canvas添加到app中
document.getElementById('app').appendChild(renderer.domElement)

//创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

//设置控制器阻尼,让滑动更有真实感
controls.enableDamping = true

//创建坐标轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

render()

//渲染函数
function render(time) {
    controls.update()
    renderer.render(scene, camera)
    //下一帧渲染完毕再次执行,保证每一帧都渲染
    requestAnimationFrame(render)
}
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi9 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html
优联前端10 小时前
DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方DeepSeek接入)
javascript·pycharm·ai编程·前端开发·优联前端·deepseek
萧大侠jdeps10 小时前
el-select 添加icon
前端·javascript·vue.js