3D全景-环境光

/*
 * @Author: zhangchaojun
 * @Date: 2022-03-07 15:10:10
 * @LastEditTime: 2022-03-27 22:53:51
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Three.js与3D可视化\03-three_basic\src\main\main.js
 */
import * as THREE from 'three'

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import gsap from 'gsap'
import * as dat from 'dat.gui'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'

// 创建gui对象
const gui = new dat.GUI()
// 初始化场景
const scene = new THREE.Scene()
// 创建 透视相机
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
)
// 设置相机的位置
// object3d具有position属性，是一个3维向量
camera.position.set(0, 0, 5)  // x,y,z
// 场景添加相机
scene.add(camera)

// 加载纹理
// 创建加载管理器，管理加载数据
const loadingManager = new THREE.LoadingManager(
	() => {
		console.log('load');
	},
	(url, itemsLoaded, itemsTotal) => {
		console.log('onprogress');
		console.log(url);
		console.log(itemsLoaded);
		console.log(itemsTotal);
		console.log('纹理图片的加载进度：' + (itemsLoaded / itemsTotal * 100).toFixed(2) + '%');
	},
	() => {
		console.log('loaded');
	},
	(err) => {
		console.log(err);
	}
)
console.log(loadingManager);
loadingManager.onStart = function () {
	console.log('loading start');
}
loadingManager.onError = function () {
	console.log('loading error');
}

// 创建纹理加载器对象
const TextureLoader = new THREE.TextureLoader(loadingManager)
// 创建材质
const material = new THREE.MeshStandardMaterial({
	// 金属度
	metalness: 1,
	// 粗糙度
	roughness: 0,
	color: 0xffffff
})

// 加载 hdr 环境图
const rgbeLoader = new RGBELoader().setPath('textures/hdr/')
// 异步加载
rgbeLoader.loadAsync('003.hdr').then((texture) => {
	// mapping映射
	texture.mapping = THREE.EquirectangularReflectionMapping
	scene.background = texture
	scene.environment = texture
})

// 创建3个物体
// 球
const sphereGeometry = new THREE.SphereBufferGeometry(1, 64, 64)
const sphere = new THREE.Mesh(sphereGeometry, material)
scene.add(sphere)


// 加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(ambientLight)
// 设置点光源
const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.set(2, 3, 4);
scene.add(pointLight);


// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染器的尺寸大小 -- 相当于canvas对象
renderer.setSize(window.innerWidth, window.innerHeight)

// 监听屏幕大小的变化，设置渲染的尺寸
window.addEventListener('resize', () => {
	// 更新摄像头 -- 宽高比例
	camera.aspect = window.innerWidth / window.innerHeight
	// 更新摄像机矩阵
	camera.updateProjectionMatrix()
	// 更新渲染器
	renderer.setSize(window.innerWidth, window.innerHeight)
	// 设置渲染器的像素比
	renderer.setPixelRatio(window.devicePixelRatio)
})

// 设置双击显示全屏效果
window.addEventListener('dblclick', () => {
	// 判断现在是否是全屏
	// 判断是否有全屏对象
	const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement
	if (!fullscreenElement) {
		// 请求全屏 -- 使用 canvas 对象
		if (renderer.domElement.requestFullscreen) {
			renderer.domElement.requestFullscreen()
		} else if (renderer.domElement.webkitRequestFullscreen) {
			renderer.domElement.webkitRequestFullscreen()
		}
	} else {
		// 取消全屏 -- 使用document对象
		if (document.exitFullscreen) {
			document.exitFullscreen()
		} else if (document.webkitExitFullscreen) {
			document.webkitExitFullscreen()
		}
	}
})

// 将渲染器添加到body
document.body.appendChild(renderer.domElement)

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置控制器阻尼
controls.enableDamping = true

// 设置渲染函数
function animate (t) {
	controls.update()
	// TODO 动画
	// 请求动画帧
	requestAnimationFrame(animate)
	// camera 观察 scene
	renderer.render(scene, camera)
}
animate()