网站 宕机 优化常州网站建设哪儿好薇

网站 宕机 优化,常州网站建设哪儿好薇,爱网站大全,做游戏网站多少钱第一次听说天空系统今天在文档里看到了天空这个词#xff0c;一开始我还以为是背景色#xff0c;结果查了一下才知道#xff0c;原来这是用来营造场景氛围的环境系统#xff01;文档说天空系统可以#xff1a;提供场景的背景和光照模拟真实的昼夜交替营造不同…第一次听说天空系统今天在文档里看到了天空这个词一开始我还以为是背景色结果查了一下才知道原来这是用来营造场景氛围的环境系统文档说天空系统可以提供场景的背景和光照模拟真实的昼夜交替营造不同的氛围感配合天气系统实现雨雪雾等效果我的理解简单说就是给场景加个天空让场景看起来更真实、更有氛围第一步发现天空系统作为一个初学者我习惯先看看引擎有哪些属性。文档说可以通过 rendering.sky 来设置天空我的发现mapvthree 提供了三种类型的天空DefaultSky默认天空风格化效果DynamicSky动态天空根据时间变化StaticSky静态天空预置天气状态我的理解不同类型的天空适合不同的场景可以根据需求选择第二步使用默认天空DefaultSky默认天空适合风格化的天空效果从下到上只有颜色的渐变没有太阳、云层等元素。import * as mapvthree from baidumap/mapv-three;const container document.getElementById(container);const engine new mapvthree.Engine(container, {map: {center: [116.404, 39.915],range: 1000,pitch: 80,},rendering: {sky: new mapvthree.DefaultSky(),enableAnimationLoop: true,},});我的发现默认天空很简单只有颜色渐变适合不需要复杂效果的场景我的理解优点性能好配置简单缺点没有太阳、云层等元素适用场景风格化场景、性能要求高的场景第三步使用动态天空DynamicSky动态天空根据时间有不同的光照效果可以模拟日出日落、日夜交替等自然光照变化。import * as mapvthree from baidumap/mapv-three;const container document.getElementById(container);const engine new mapvthree.Engine(container, {map: {center: [116.404, 39.915],range: 1000,pitch: 80,},rendering: {sky: new mapvthree.DynamicSky(),enableAnimationLoop: true,},clock: {currentTime: new Date(2025-05-15 14:00:00),tickMode: 2, // TICK_LOOP},});我的发现动态天空会根据时间自动变化从日出到正午再到黄昏最后到夜晚我的理解优点真实感强有大气散射、体积云等高级特效缺点性能开销较大适用场景需要真实场景展示、需要昼夜交替效果第四步使用静态天空StaticSky静态天空预置了常见的天气状态和时段状态可以直接切换。import * as mapvthree from baidumap/mapv-three;const container document.getElementById(container);const engine new mapvthree.Engine(container, {map: {center: [116.404, 39.915],range: 1000,pitch: 80,},rendering: {sky: new mapvthree.StaticSky(),enableAnimationLoop: true,},});我的发现静态天空有预置的天气状态可以直接切换不需要手动配置我的理解优点配置简单有预置效果缺点不能动态变化适用场景需要固定天气状态的场景第五步添加天气效果看到天空后我想能不能添加天气效果文档说可以用 DynamicWeather 来模拟雨、雪、雾等天气效果import * as mapvthree from baidumap/mapv-three;const container document.getElementById(container);const engine new mapvthree.Engine(container, {map: {center: [116.404, 39.915],range: 1000,pitch: 80,},rendering: {sky: null, // 先不设置稍后添加enableAnimationLoop: true,},});// 添加动态天空const sky engine.add(new mapvthree.DynamicSky());// 添加天气效果需要配合 DynamicSky 使用const weather engine.add(new mapvthree.DynamicWeather(sky));weather.weather rainy; // 设置为雨天我的发现天气效果需要配合 DynamicSky 使用不能单独使用我的理解DynamicWeather 需要传入 DynamicSky 实例这样才能正确显示天气效果。天气类型文档说支持多种天气类型weather.weather clear; // 晴天weather.weather partlyCloudy; // 部分多云weather.weather cloudy; // 多云weather.weather overcast; // 阴天weather.weather foggy; // 雾天weather.weather rainy; // 雨天weather.weather snowy; // 雪天我的尝试// 切换不同天气weather.weather rainy; // 下雨weather.weather snowy; // 下雪weather.weather foggy; // 起雾我的发现可以动态切换天气效果很真实第六步如何选择合适的天空气候看到这么多天空类型后我想应该怎么选择场景 1风格化场景如果做风格化的场景用 DefaultSkyrendering: {sky: new mapvthree.DefaultSky(),}我的想法风格化场景不需要真实的光照用默认天空就够了场景 2真实场景展示如果做真实场景展示用 DynamicSkyrendering: {sky: new mapvthree.DynamicSky(),},clock: {currentTime: new Date(2025-05-15 14:00:00),tickMode: 2, // TICK_LOOP},我的想法真实场景需要真实的光照和昼夜交替用动态天空场景 3固定天气状态如果需要固定的天气状态用 StaticSkyrendering: {sky: new mapvthree.StaticSky(),}我的想法固定天气状态不需要动态变化用静态天空场景 4需要天气效果如果需要天气效果用 DynamicSky DynamicWeatherconst sky engine.add(new mapvthree.DynamicSky());const weather engine.add(new mapvthree.DynamicWeather(sky));weather.weather rainy;我的想法天气效果必须配合动态天空使用第七步完整示例我想写一个完整的示例展示天空和天气的使用import * as mapvthree from baidumap/mapv-three;import {Mesh, SphereGeometry, MeshStandardMaterial} from three;const container document.getElementById(container);const engine new mapvthree.Engine(container, {map: {center: [116.404, 39.915],range: 1000,pitch: 80,},rendering: {sky: null, // 稍后添加enableAnimationLoop: true,},clock: {currentTime: new Date(2025-05-15 14:00:00),tickMode: 2, // TICK_LOOP},});// 添加动态天空const sky engine.add(new mapvthree.DynamicSky());// 添加天气效果const weather engine.add(new mapvthree.DynamicWeather(sky));weather.weather rainy;// 添加一个测试物体const sphere new Mesh(new SphereGeometry(100, 32, 32),new MeshStandardMaterial({color: 0xffff00,metalness: 0.8,roughness: 0.2,}));const position engine.map.projectArrayCoordinate([116.404, 39.915]);sphere.position.set(position[0], position[1], position[2]);engine.add(sphere);我的感受写一个完整的示例把学到的都用上感觉很有成就感第八步踩过的坑作为一个初学者我踩了不少坑记录下来避免再犯坑 1动态天空没有效果原因没有开启循环渲染。解决确保开启了 enableAnimationLoop: true。坑 2天气效果不显示原因天气效果没有配合 DynamicSky 使用。解决天气效果必须配合 DynamicSky 使用不能单独使用。坑 3天空没有动画效果原因没有开启循环渲染或者没有设置时钟。解决开启 enableAnimationLoop: true设置 clock.tickMode 让时间自动流逝坑 4天气切换不生效原因天气对象没有正确创建或者没有传入 DynamicSky 实例。解决确保 DynamicWeather 传入了 DynamicSky 实例。我的学习总结经过这一天的学习我掌握了天空系统的作用提供场景的背景和光照营造氛围感三种天空类型DefaultSky风格化效果性能好DynamicSky真实场景有昼夜交替StaticSky预置天气状态天气效果通过 DynamicWeather 模拟雨、雪、雾等天气如何选择根据场景需求选择合适的天空类型注意事项动态天空不能用于 BMapGL天气效果必须配合动态天空使用我的感受天空和天气系统真的很强大虽然功能很多但是用起来其实不难。关键是要理解每种天空的特点然后根据需求选择合适的类型下一步计划学习更多天空的配置选项尝试创建复杂的天气效果做一个完整的环境展示项目学习笔记就到这里啦作为一个初学者我觉得天空和天气系统虽然功能很多但是用起来其实不难。关键是要理解每