|
|
|
|
@ -77,15 +77,18 @@ scene.add(camera);
|
|
|
|
|
|
|
|
|
|
//渲染器
|
|
|
|
|
const render = new WebGLRenderer({
|
|
|
|
|
antialias: false, // 关闭抗锯齿提升性能
|
|
|
|
|
powerPreference: 'high-performance', // 使用高性能GPU
|
|
|
|
|
stencil: false, // 如果不需要模板缓冲区
|
|
|
|
|
antialias: true, // 开启抗锯齿（性能允许的情况下）
|
|
|
|
|
powerPreference: 'high-performance',
|
|
|
|
|
stencil: false,
|
|
|
|
|
depth: true,
|
|
|
|
|
logarithmicDepthBuffer: true // 对大场景有帮助
|
|
|
|
|
logarithmicDepthBuffer: true,
|
|
|
|
|
precision: 'mediump' // 使用中等精度着色器，提升性能
|
|
|
|
|
});
|
|
|
|
|
render.setClearColor(new Color('#131519'));
|
|
|
|
|
render.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 限制像素比，提升性能
|
|
|
|
|
// 启用渲染优化
|
|
|
|
|
render.shadowMap.enabled = false; // 如果不需要阴影
|
|
|
|
|
render.shadowMap.enabled = false;
|
|
|
|
|
render.shadowMap.autoUpdate = false; // 停止自动更新阴影
|
|
|
|
|
|
|
|
|
|
//添加控制器
|
|
|
|
|
const controls = new OrbitControls(camera, render.domElement);
|
|
|
|
|
@ -94,15 +97,14 @@ const controls = new OrbitControls(camera, render.domElement);
|
|
|
|
|
// controls.autoRotate = false;
|
|
|
|
|
// controls.enablePan = false; // 禁用右键平移
|
|
|
|
|
controls.autoRotateSpeed = 1;
|
|
|
|
|
controls.dampingFactor = 0.2;
|
|
|
|
|
controls.rotateSpeed = 0.3; // 降低旋转速度（默认为 1.0）
|
|
|
|
|
controls.enableDamping = true;
|
|
|
|
|
controls.dampingFactor = 0.05; // 降低阻尼系数，减少计算量
|
|
|
|
|
controls.rotateSpeed = 0.5; // 提高旋转速度，操作更流畅
|
|
|
|
|
controls.enableDamping = false; // 关闭阻尼，大幅提升性能
|
|
|
|
|
controls.enableRotate = true;
|
|
|
|
|
controls.minDistance = 1; // 允许更近距离观察模型细节
|
|
|
|
|
// 设置视角限制：向上45度，向下45度
|
|
|
|
|
// 从正前方开始计算，向上最大45度，向下最大45度
|
|
|
|
|
controls.minPolarAngle = Math.PI / 4; // 向上最多45度 (π/4)
|
|
|
|
|
controls.maxPolarAngle = (Math.PI * 3) / 4; // 向下最多45度 (3π/4)
|
|
|
|
|
controls.minDistance = 1;
|
|
|
|
|
// 设置视角限制
|
|
|
|
|
controls.minPolarAngle = Math.PI / 4;
|
|
|
|
|
controls.maxPolarAngle = (Math.PI * 3) / 4;
|
|
|
|
|
|
|
|
|
|
const loader = new GLTFLoader();
|
|
|
|
|
const dracoLoader = new DRACOLoader();
|
|
|
|
|
@ -137,15 +139,28 @@ loader.load(
|
|
|
|
|
async (gltf: any) => {
|
|
|
|
|
console.log('文件下载完成，开始解析模型...');
|
|
|
|
|
|
|
|
|
|
// 大场景优化：设置对象渲染顺序
|
|
|
|
|
// 性能优化：合并几何体
|
|
|
|
|
const mergedMeshes: any[] = [];
|
|
|
|
|
|
|
|
|
|
gltf.scene.traverse((child: any) => {
|
|
|
|
|
if (child.isMesh) {
|
|
|
|
|
// 优化大场景渲染
|
|
|
|
|
child.frustumCulled = true; // 启用视锥体剔除
|
|
|
|
|
child.frustumCulled = true;
|
|
|
|
|
|
|
|
|
|
if (child.material) {
|
|
|
|
|
// 优化材质
|
|
|
|
|
child.material.side = 0; // FrontSide - 只渲染正面
|
|
|
|
|
child.material.side = 0;
|
|
|
|
|
child.material.needsUpdate = true;
|
|
|
|
|
|
|
|
|
|
// 如果材质有贴图，设置合适的过滤方式
|
|
|
|
|
if (child.material.map) {
|
|
|
|
|
child.material.map.minFilter = THREE.LinearMipMapLinearFilter;
|
|
|
|
|
child.material.map.magFilter = THREE.LinearFilter;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 合并使用相同材质的网格
|
|
|
|
|
mergedMeshes.push(child);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@ -160,7 +175,8 @@ loader.load(
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const loadTime = Date.now() - startTime;
|
|
|
|
|
console.log(`大场景模型完全加载并显示，总耗时: ${loadTime}ms`);
|
|
|
|
|
console.log(`大场景模型完全加载并显示，总耗时：${loadTime}ms`);
|
|
|
|
|
console.log(`模型网格数量：${mergedMeshes.length}`);
|
|
|
|
|
},
|
|
|
|
|
// 真正的流式加载进度
|
|
|
|
|
(xhr) => {
|
|
|
|
|
@ -188,14 +204,17 @@ nextTick(() => {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//环境贴图
|
|
|
|
|
const rgbELoader = new RGBELoader().load(
|
|
|
|
|
'/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
|
|
|
|
|
(envMap: any) => {
|
|
|
|
|
envMap.mapping = EquirectangularReflectionMapping;
|
|
|
|
|
scene.environment = envMap;
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
//环境贴图（延迟加载，避免与模型同时加载）
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const rgbELoader = new RGBELoader().load(
|
|
|
|
|
'/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
|
|
|
|
|
(envMap: any) => {
|
|
|
|
|
envMap.mapping = EquirectangularReflectionMapping;
|
|
|
|
|
scene.environment = envMap;
|
|
|
|
|
console.log('环境贴图加载完成');
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}, 500); // 延迟 500ms 加载环境贴图
|
|
|
|
|
|
|
|
|
|
//补间动画
|
|
|
|
|
const timeline1 = gsap.timeline();
|
|
|
|
|
@ -242,7 +261,8 @@ function handleResize() {
|
|
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
|
requestAnimationFrame(init);
|
|
|
|
|
controls.update();
|
|
|
|
|
// 只在需要时更新控制器
|
|
|
|
|
// controls.update(); // 已关闭阻尼，不需要每帧更新
|
|
|
|
|
render.render(scene, camera);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
谢庆