本文主要介绍 AI 绘图开源工具 Stable Diffusion WebUI 的 API 开启和基本调用方法，通过本文的阅读，你将了解到 stable-diffusion-webui 的基本介绍、安装及 API 环境配置；文生图、图生图、局部重绘、后期处理等 API 接口调用；图像处理开发中常用到一些方法如 Base64、PNG、Canvas及 URL 相互转换、Canvas 颜色转换等。

专栏上篇文章《Three.js 进阶之旅：页面平滑滚动-王国之泪》 讲解并实现了如何使用 R3F 进行页面图片平滑滚动，本文内容在上节的基础上，学习如何使用滚动控制 ScrollControls 来控制模型的的动画播放和相机动画，通过滚动鼠标滚轮或者上下移动触摸板，来控制模型的动画播放进度或者相机的方位视角，从而呈现出惊艳的视...

浏览网页时，常被一些基于鼠标滚轮控制的页面动画所惊艳到，比如greensock 官网这些 showcase 案例页面就非常优秀，它们大多数都是使用 Tween.js、gasp 及 greensock 提供的一些动画扩展库实现的。使用 Three.js 也能很容易实现丝滑的滚动效果，本文使用 React + Three.js + React Three Fiber 技术栈，实现一个《塞尔达...

专栏上篇文章《Three.js 进阶之旅：全景漫游-初阶移动相机版》中通过创建多个球体全景场景并移动相机和控制器的方式实现了多个场景之间的穿梭漫游。这种方式的缺点也是显而易见的，随着全景场景的增加来创建对应数量的球体，使得空间关系计算难度提升，并且大幅降低浏览器渲染行性能。在上一篇文章的基础上，本文通过以...

3D 全景技术可以实现日常生活中的很多功能需求，比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的，当然了目前已经有很多相关内容的文章，我之前就写过一篇《Three.js 实现3D全景侦探小游戏》。因此本文内容及此专栏下一篇文章讨论...

本文在专栏上一篇内容《Three.js 进阶之旅：物理效果-碰撞和声音》的基础上，将使用新的技术栈 React Three Fiber 和 Cannon.js 来实现一个具有物理特性的小游戏，通过本文的阅读，你将学习到的知识点包括：了解什么是 React Three Fiber 及它的相关生态、使用 React Three Fiber 搭建基础三维场景、如何使用新技术栈给...

本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果，使其更加真实。所谓物理效果指的是对象会有重力，它们可以相互碰撞，施加力之后可以移动，而且通过铰链和滑块还可以在移动过程中在对象上施加约束。 通过本文的阅读，你将学习到如何使用 Cannon.js 在 Three.js 中创建一个 3D 物理世界，并在物理世界更...

兔年到了，祝大家身体健康，万事顺利。本文内容作为兔年新春纪念页面，将使用 Three.js 及 其他前端开发知识，创建一个以兔子为主题的 3D 简单的趣味页面 Rabbit craft go。本文内容包括使用纯代码创建三维浮岛、小河、树木、兔子、胡萝卜以及兔子的运动交互、浮岛的动画效果等。本文包含的知识点相对比较简单，主要包括...