iPhone 和 MacBook 3D 展示

真实 GLTF iPhone 15 Pro Max 和 MacBook Pro 型号，配备实时 HTML-in-Canvas 屏幕内容、变形玻璃镜头、产品评论相机编排和 360° 转盘。 html-in-canvas 3d device iphone macbook gltf

需要 Chrome 标志。 启用 chrome://flags/#canvas-draw-element 进行实时预览。通过 CLI 渲染会自动启用该标志。了解更多。

安装

npx hyperframes add vfx-iphone-device

细节

财产	价值
类型	堵塞
方面	1920×1080
期间	15秒

文件

文件	目标	类型
`vfx-iphone-device.html`	`compositions/vfx-iphone-device.html`	超框架:组合
`models/iphone.glb`	`models/iphone.glb`	资产
`models/macbook.glb`	`models/macbook.glb`	资产
`models/hyperframes-mobile.png`	`models/hyperframes-mobile.png`	资产
`models/hyperframes-desktop.png`	`models/hyperframes-desktop.png`	资产

用法

安装后，将该块添加到您的主机组合中：

<div data-composition-id="vfx-iphone-device" data-composition-src="compositions/vfx-iphone-device.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>

液体背景在细分平面上进行顶点位移的有机液体模拟。 HTML 内容漂浮在带有实时波浪动力学的波纹流体表面上。

Captions

HTML-in-Canvas

Social Overlays

Shader Transitions

CSS Transitions

Showcases

Data

Effects

Blocks

Code Snippets

iPhone 和 MacBook 3D 展示

iPhone 和 MacBook 3D 展示

安装

细节

文件

用法

​iPhone 和 MacBook 3D 展示

​安装

​细节

​文件

​用法

iPhone 和 MacBook 3D 展示

安装

细节

文件

用法