<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'
import * as dat from 'dat.gui'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
/**
* loaders
*/
const gltfLoader = new GLTFLoader()
const cubeTextureLoader = new THREE.CubeTextureLoader()
/**
* scene
*/
const scene = new THREE.Scene()
/**
* camera
*/
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
100
)
camera.position.set(4, 1, - 4)
/**
* renderer
*/
const renderer = new THREE.WebGLRenderer()
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* control
*/
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
/**
* render
*/
const tick = () => {
controls.update()
requestAnimationFrame(tick)
renderer.render(scene, camera)
}
tick()
/**
* gui
*/
const gui = new dat.GUI()
</script>
/**
* light
*/
const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
directionalLight.position.set(0.25, 3, -2.25)
scene.add(directionalLight)
/**
* test sphere
*/
const testSphere = new THREE.Mesh(
new THREE.SphereGeometry(1, 32, 32),
new THREE.MeshStandardMaterial() // PBR材料，需要光照场景的材料
)
scene.add(testSphere)
/**
* gui
*/
const gui = new dat.GUI()
gui.add(directionalLight, 'intensity').min(0).max(10).step(0.001).name('lightIntensity')
gui.add(directionalLight.position, 'x').min(-5).max(5).step(0.001).name('lightX')
gui.add(directionalLight.position, 'y').min(-5).max(5).step(0.001).name('lightY')
gui.add(directionalLight.position, 'z').min(-5).max(5).step(0.001).name('lightZ')
-
Load the model, increase its scale, rotate it
/**
* model
*/
gltfLoader.load('../public/models/FlightHelmet/glTF/FlightHelmet.gltf', (gltf) => {
gltf.scene.scale.set(10, 10, 10)
gltf.scene.position.set(0, -4, 0)
gltf.scene.rotation.y = Math.PI * 0.5
scene.add(gltf.scene)
gui.add(gltf.scene.rotation, 'y').min(- Math.PI).max(Math.PI).step(0.001).name('rotation')
})
-
Load the environment map, 我们加载的是立方体纹理，因此需要立方体纹理加载器
/**
* environment map
*/
// p - positive n - negative
const environmentMap = cubeTextureLoader.load([
'../public/imgs/realistic-render/environmentMaps/0/px.jpg', // 正x轴
'../public/imgs/realistic-render/environmentMaps/0/nx.jpg', // 负x轴
'../public/imgs/realistic-render/environmentMaps/0/py.jpg',
'../public/imgs/realistic-render/environmentMaps/0/ny.jpg',
'../public/imgs/realistic-render/environmentMaps/0/pz.jpg',
'../public/imgs/realistic-render/environmentMaps/0/nz.jpg',
])
-
Apply the environment map to the model
- 通常我们加载的 model 结构是很复杂的，嵌套了很多层，这部分可以在
gltfLoader.load(..., (gltf) => {})回调函数里打印出来观察 console.log(gltf.scene)
- 将 environment map 应用在 model 上时，要应用在每一个相关材质上的
envMap属性上，因此用常规的遍历添加是很困难的
- 所以我们在这一步使用
scene.traverse()实现递归遍历，将scene.traverse()封装在一个函数里，然后我们在导入model的回调函数里使用，同时打印一下我们遍历到的对象
-
Ps: 如果只需要 apply the environment map to the model，简单的设置
scene.environment = envirommentMap就可以了，我们这里因为还需要调整 envMapIntensity属性，所以用了相对更复杂的写法
gltf.scene.png
/**
* update all materials
*/
const updateAllMaterials = () => {
scene.traverse(child => {
console.log(child);
})
}
/**
* model
*/
gltfLoader.load('../public/models/FlightHelmet/glTF/FlightHelmet.gltf', (gltf) => {
...
...
updateAllMaterials()
})
scene.traverse()遍历到的对象.png
- 完成以上步骤可以观察到，
scene.traverse()遍历到的对象是每一个Mesh，有AxesHelper、Light等等，但我们只需要将environment map应用到material上，这里需要的是MeshStandardMaterial
/**
* update all materials
*/
const updateAllMaterials = () => {
scene.traverse(child => {
if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
child.material.envMap = environmentMap
child.material.envMapIntensity = 5 // 尝试改变该属性观察environmentMap带来的变化
}
})
}
- 上面代码中我们通过调整
envMapIntensity属性可以观察到环境贴图带来的一些变化，但要想找到相对准确的属性值，就需要频繁调整属性，最便捷的方式当然是添加到gui中，但是这个值对于每个material来说又是不一样的，因此就需要只调整某一项然后应用到每一个需要的地方
/**
* update all materials
*/
const updateAllMaterials = () => {
scene.traverse(child => {
if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
child.material.envMap = environmentMap
child.material.envMapIntensity = debugObject.envMapIntensity
}
})
}
/**
* gui
*/
const gui = new dat.GUI()
const debugObject = {}
...
...
debugObject.envMapIntensity = 5
gui.add(debugObject, 'envMapIntensity').min(0).max(10).step(0.01).onChange(updateAllMaterials)
// 定义渲染器的输出编码，默认值如下
renderer.outputColorSpace = THREE.SRGBColorSpace
renderer.toneMapping = THREE.ReinhardToneMapping // 色调映射
renderer.toneMappingExposure = 3 // 色调映射的曝光级别
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
/**
* update all materials
*/
const updateAllMaterials = () => {
scene.traverse(child => {
if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
...
...
child.castShadow = true
child.receiveShadow = true
}
})
}
/**
* light
*/
const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
directionalLight.position.set(0.25, 3, -2.25)
directionalLight.castShadow = true
directionalLight.shadow.camera.far = 15 // 可以使用CameraHelper辅助
directionalLight.shadow.mapSize.set(1024, 1024) // 提高阴影贴图分辨率，默认512
scene.add(directionalLight)
// const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
// scene.add(directionalLightCameraHelper)
最终效果.png
网友评论