Composer循环背景是什么技巧_Composer制作无限延伸场景【备忘】-composer-PHP中文网

composer本身不支持循环背景，所谓“composer循环背景”实为混淆工具链：需用composer安装pixijs等前端库，再通过javascript手动初始化tilingsprite并逐帧更新tileposition实现无缝滚动。

composer循环背景是什么技巧_composer制作无限延伸场景【备忘】

Composer 本身不支持“循环背景”或“无限延伸场景”——它不是图形渲染引擎，也不处理 Canvas、CSS 动画或 3D 场景。所谓“Composer 循环背景”，几乎全是误传，实际是混淆了工具链：用 composer 安装前端依赖（如 three.js、pixi.js 或 gsap），再在浏览器中实现视觉上的无限滚动/平铺/位移效果。

`composer require` 装完库，为什么背景还是不动？

常见错误现象：执行了 composer require pixijs/pixi.js 或类似命令，JS 文件也引入了，但页面里背景没滚动、没平铺、也没循环。

composer 只负责把 PHP 包或前端库的源码下载到 vendor/ 目录，它不自动加载、不执行、不绑定 DOM
前端库（如 PixiJS）需手动初始化：创建 Application、添加 TilingSprite、用 requestAnimationFrame 更新 tilePosition.x
若用 ESM 模块（PixiJS v7+、GSAP 3.12+），直接 <script src="vendor/.../pixi.min.js"></script> 会报 ReferenceError: PIXI is not defined，必须加 type="module" 或改用构建工具打包

用 `pixi.js` 实现真正循环背景的关键三步

适合需要高性能、可缩放、带遮罩的 2D 无限背景（如游戏场景、产品展示横幅）：

Discussion Composer

围绕关键发现、作用机制、临床相关性及研究局限性展开讨论。适用于撰写或优化任何生物医学论文的“讨论（Discussion）”部分——包括结果解读、与既往文献关联、阐释意外发现、界定研究局限性，以及撰写结论。当用户输入以下任一指令时也会自动触发该功能： - “write my discussion” - “help me discuss my findings” - “how do I compare to prior studies” - “write the limitations par

下载

创建 TilingSprite 时，纹理必须是可重复平铺的（repeat = true），且尺寸为 2 的整数次幂（如 512×512），否则 WebGL 渲染可能拉伸或黑边
每帧更新 sprite.tilePosition.x += speed，不要用 sprite.x——后者是全局位移，不触发平铺逻辑
若背景要“无缝接续”，确保贴图边缘像素对齐；可用 texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT 强制重复（v7+）

const app = new PIXI.Application();
document.body.appendChild(app.view);
const texture = PIXI.Texture.from('bg-loop.png');
const sprite = new PIXI.TilingSprite(texture, app.screen.width, app.screen.height);
app.stage.addChild(sprite);
<p>app.ticker.add(() => {
sprite.tilePosition.x += 0.5; // 向左匀速滚动
});</p>

为什么不用 `Swiper` 做循环背景？

虽然 Swiper 支持 loop: true，但它本质是 DOM slide 切换，不适合纯背景动画：

每个 .swiper-slide 是独立 DOM 元素，内存和重排开销大，滑动几十帧就卡顿
无法做像素级位移控制（比如每帧移动 0.3px），speed 最小单位是毫秒级过渡，非实时帧同步
不支持 UV 偏移、混合模式、滤镜叠加等背景常用效果
若强行用 Swiper 做“背景”，得把所有 slide 设为 position: absolute; top: 0; left: 0; width: 100%; height: 100%，极易与页面其他元素 z-index 冲突

容易被忽略的部署陷阱

vendor/ 下的 JS 库不能直接被浏览器访问：Nginx/Apache 默认禁止访问 /vendor/ 路径，会返回 403；必须用构建脚本复制到 /public/js/ 或通过 PHP 路由代理（不推荐）
composer install --no-dev 会跳过 require-dev，但如果前端库写在 require-dev 里（比如 "pixijs/pixi.js": "^7"），生产环境就根本不会下载
使用 optimize-autoloader (-o) 对前端 JS 零影响，但它会删掉 vendor 目录里的 autoload.php 注释和调试信息——而某些前端库的 UMD 构建版本依赖这些注释做环境检测，导致 undefined is not a constructor