Live Demo#

你可以拖拽旋转这个立方体，确认交互和渲染都正常。

Fullscreen 3D Demo#

点击右上角按钮可进入/退出全屏模式。全屏后依然可以拖拽旋转观察球体材质与光照效果。

Fullscreen PBR Demo#

这个示例使用了更完整的 PBR 场景：金属球、塑料结、玻璃体、地面阴影和环境贴图反射。 右上角是图标按钮（无文字），可切换全屏沉浸查看。

ShaderToy Embed#

下面是嵌入的 ShaderToy 示例（XsBXWt）：

Why This Works#

项目中已经启用了：

• @astrojs/mdx：让内容集合支持 MDX
• @astrojs/react：让 Astro 可以渲染 React 组件
• three + @react-three/fiber + @react-three/drei：提供 Three.js 场景与交互能力