// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入hdr加载器(专门加载hdr的)
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 导入解码器(在node_modules/three/examples/jsm/libs/draco这里,但是,我们需要把draco文件夹复制到pbulic文件夹种)
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
//#region
const scence = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置相机位置
camera.position.set(5, 2, 2)
// camera.lookAt(0, 0, 0)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
document.body.appendChild(renderer.domElement)
//#endregion
// -----------------------------------------------------------------
// -----------------------------------------------------------------
// 实例化gltf加载器
const gltfLoader = new GLTFLoader()
gltfLoader.load(
// 模型路径
'../public/assets/model/Duck.glb', // (这个模型是没有经过压缩的,所以不需要使用解码器)
// 加载完成的回调
gltf => {
console.log('gltf-Duck=', gltf)
scence.add(gltf.scene)
}
)
// 实例化解码器draco
const dracoLoader = new DRACOLoader()
// 设置draco路径
dracoLoader.setDecoderPath('../public/draco/') // 这里的路径必须进入draco文件夹中【../public/draco/】,否则报错
// 设置gltf加载器的解码器
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load(
// 模型路径
/*
因为`city.glb`是压缩过的,不使用解码器的话就会报错:
Error: THREE.GLTFLoader: No DRACOLoader instance provided.
所以,就需要解压缩咯
*/
'../public/assets/model/city.glb',
// 加载完成的回调
gltf => {
console.log('gltf-city=', gltf)
scence.add(gltf.scene)
}
)
// 加载环境贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('../public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {
// 设置球形贴图,否则环境贴图就像一个背景图片似的
envMap.mapping = THREE.EquirectangularReflectionMapping
// 设置环境贴图
scence.environment = envMap
})
// 场景fog
scence.fog = new THREE.Fog(0x999999, 0.1, 50) // 参数一:雾的颜色灰色;从0.1米到50米处雾会越来越浓
// 指数fog
// scence.fog = new THREE.FogExp2(0x999999, 0.1) // 参数一:雾的颜色灰色;参数二:雾变浓的速度
// 给场景scence一个背景颜色(场景的背景色最好是雾的颜色一致),查看雾的效果会更好
scence.background = new THREE.Color(0x999999)
// -----------------------------------------------------------------
// -----------------------------------------------------------------
//#region
// 添加世界坐标辅助器,红色-X轴; 绿色-Y轴; 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)
const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05
// 每一帧根据控制器更新画面
function render() {
// 如果,需要控制器带有阻尼效果,或者自动旋转等效果,就需要加入`controls.update()`
controls.update()
// `requestAnimationFrame`:在屏幕渲染下一帧画面时,触发回调函数来执行画面的渲染
requestAnimationFrame(render)
renderer.render(scence, camera)
}
render()
//#endregion
标签:const,scence,THREE,three,解码器,new,js,gltf
From: https://blog.csdn.net/pig_ning/article/details/139883573