资源记录

记录一些用到的插件/资源

最后更新于1年前

这有帮助吗？

资源记录

记录一些用到的插件/资源

资源网站

Textures

是一个提供高质量3D资源的网站，旨在帮助艺术家和设计师创建更加真实的3D渲染作品。该网站提供成千上万的纹理、模型和高动态范围图像（HDRIs），这些资源都经过专业设计，适用于建筑可视化、产品渲染、游戏设计、视觉特效和动画制作。用户可以找到各种材质纹理，如砖块、混凝土、木材、金属等，以及各类模型和环境HDRIs。

vscode 插件

WebGL GLSL Editor

Shader languages support for VS Code

Tips

画布与分辨率设置

画布充满窗口：使用window.innerWidth和window.innerHeight属性来设置画布尺寸，使之充满整个浏览器窗口，并建议移除canvas标签上的宽高设置。
处理窗口调整：文章中解释了如何监听resize事件，以便在窗口尺寸变化时更新画布尺寸、相机的视角比例和渲染器的大小。
像素比问题：讨论了如何处理屏幕上的锯齿问题，通过设置renderer.setPixelRatio()来调整像素比，推荐最大值设为2以兼顾性能。

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
// resize
window.addEventListener('resize', () => {
  // update sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // update camera
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()

  // update renderer
  renderer.setSize(sizes.width, sizes.height)
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

全屏功能：介绍了如何监听双击事件来实现全屏切换功能，并考虑到了 Safari 浏览器兼容

window.addEventListener('dblclick', () => {
  const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement
  if (fullscreenElement) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else {
      document.webkitExitFullscreen()
    }
  } else {
    if (canvas.requestFullscreen) {
      canvas.requestFullscreen()
    } else {
      canvas.webkitRequestFullscreen()
    }
  }
})

最后更新于1年前

这有帮助吗？