<!-- Three.js TSL 着色器编辑器 - 功能描述与技术分析
一、核心功能概述
1. 实时着色器编辑与预览系统
这是一个基于 Web 的交互式着色器开发环境，允许用户：

实时编写 Three.js TSL（Three.js Shader Language）代码

即时编译 TSL 代码为底层着色器语言（WGSL/GLSL）

双向可视化：同时显示源代码和生成的着色器代码

3D 实时预览：在右下角窗口显示着色器应用效果

2. 主要功能模块
(1) 代码编辑与编译
左侧编辑器：编写高级 TSL 着色器代码（类 JavaScript 语法）

自动编译：代码修改后 1 秒自动重新编译（防抖机制）

错误处理：语法错误和运行时错误实时显示

(2) 着色器代码展示
右侧显示区：展示编译生成的底层着色器代码

格式切换：支持 WGSL（WebGPU）和 GLSL ES 3.0（WebGL）

类型切换：可查看顶点着色器或片段着色器

(3) 3D 实时渲染
预览窗口：200×200 像素的实时渲染区域

简单场景：一个平面网格应用用户编写的着色器

相机控制：固定视角展示着色器效果

(4) 交互控制面板
着色器语言选择：WGSL vs GLSL

色彩空间调整：sRGB vs Linear

预览开关：显示/隐藏 3D 预览

着色器类型选择：顶点/片段着色器查看

二、核心技术栈详解
1. Three.js WebGPU 渲染器
javascript
// 核心渲染技术
const renderer = new THREE.WebGPURenderer({ antialias: true });
技术特点：

下一代图形 API：基于 WebGPU，比 WebGL 性能更高

硬件加速：充分利用现代 GPU 架构

跨平台：支持 DirectX 12、Vulkan、Metal 等后端

并行处理：支持计算着色器和多线程渲染

2. Three.js TSL（Three.js Shader Language）
javascript
// TSL 示例代码结构
const { texture, uv, time } = await import('three/tsl');
const animatedUV = uv().add(time.mul(0.5));
output = texture(sampler, animatedUV);
技术特点：

声明式编程：基于节点的数据流编程模型

自动优化：Three.js 自动优化节点图生成高效代码

类型安全：编译时类型检查

模块化：支持导入/导出着色器模块

TSL 与传统着色器对比：

特性	TSL	传统 GLSL/WGSL
语法	类 JavaScript	C 风格
抽象级别	高（节点）	低（指令）
学习曲线	平缓	陡峭
代码复用	模块化导入	手动包含
调试难度	较低	较高
3. Monaco Editor 集成
javascript
// 动态加载 Monaco 编辑器
window.require.config({ paths: { 'vs': 'monaco-editor/min/vs' } });
const editor = window.monaco.editor.create(container, options);
技术特点：

VS Code 核心：使用与 VS Code 相同的编辑器引擎

功能丰富：语法高亮、智能提示、代码折叠、错误检查

性能优化：虚拟滚动处理大文件

多语言支持：支持 JavaScript、WGSL、GLSL 等语言

4. 动态代码执行引擎
javascript
// 动态编译和执行 TSL 代码
const AsyncFunction = async function () {}.constructor;
const tslCode = `let output = null;\n${userCode}\nreturn { output };`;
const nodes = await (new AsyncFunction('THREE', tslCode)(THREE));
技术特点：

沙箱执行：在安全环境中运行用户代码

动态绑定：将 THREE 对象注入执行上下文

错误隔离：捕获并显示运行时错误

实时更新：动态更新材质节点

5. 双渲染器架构
javascript
// WebGPU 渲染器 - 用于预览和 WGSL 生成
const webGPURenderer = new THREE.WebGPURenderer({ antialias: true });

// WebGL 渲染器 - 用于 GLSL 生成（兼容模式）
const webGLRenderer = new THREE.WebGPURenderer({ forceWebGL: true });
技术优势：

格式兼容：同时支持 WGSL 和 GLSL 输出

平台覆盖：WebGPU（现代浏览器）和 WebGL（广泛兼容）

性能对比：可比较两种 API 的性能差异

6. 着色器调试接口
javascript
// 获取编译后的着色器代码
rawShader = await renderer.debug.getShaderAsync(scene, camera, mesh);
调试功能：

源码映射：TSL 到 WGSL/GLSL 的对应关系

中间代码：查看 Three.js 生成的中间表示

性能分析：着色器指令数和复杂度

三、工作流程与数据流
1. 用户代码编辑流程
text
用户输入 TSL 代码
    ↓（防抖 1 秒）
动态创建异步函数
    ↓
注入 THREE 依赖并执行
    ↓
获取 output 节点对象
    ↓
更新材质 fragmentNode
    ↓
触发材质重新编译
    ↓
渲染器生成底层着色器
    ↓
同时：更新预览 + 显示生成代码
2. 着色器编译管道
text
Three.js TSL (高级) → Three.js Node Graph (中间) → WGSL/GLSL (低级)
      ↑                          ↓                        ↓
   用户编辑                自动优化转换              GPU 执行代码
3. 渲染管线集成
text
CPU 端：TSL 节点图
    ↓ 编译优化
GPU 端：WGSL 着色器
    ↓ 执行
顶点着色器 → 光栅化 → 片段着色器 → 帧缓冲
四、技术亮点与创新
1. 实时编译系统
增量编译：仅重新编译修改的部分

缓存机制：避免重复编译相同代码

错误恢复：错误时回退到上一个可用版本

2. 多语言着色器生成
javascript
// 同一份 TSL 代码生成不同后端代码
if (options.output === 'WGSL') {
    // 生成 WebGPU 的 WGSL 代码
    rawShader = await webGPURenderer.debug.getShaderAsync(...);
} else {
    // 生成 WebGL 的 GLSL ES 3.0 代码
    rawShader = await webGLRenderer.debug.getShaderAsync(...);
}
3. 声明式着色器编程
数据驱动：节点连接定义数据流

函数式风格：无副作用，纯函数组合

可视化思维：节点图对应着色器结构

4. 现代 Web 技术整合
text
ES6 Modules → Import Maps → Monaco Editor → WebGPU API
    ↓           ↓              ↓              ↓
模块化组织   依赖管理     代码编辑       图形渲染
五、应用场景与价值
1. 教育用途
图形学教学：可视化着色器编程概念

WebGPU 入门：学习新一代 Web 图形 API

Three.js 学习：理解 Three.js 高级特性

2. 开发工具
着色器原型设计：快速测试着色器效果

性能优化：比较不同实现的性能差异

跨平台测试：验证着色器在不同后端的表现

3. 创作平台
视觉效果创作：艺术家友好型着色器编辑

交互式艺术：实时响应参数变化的着色器

技术演示：展示 Three.js TSL 的强大功能

六、技术难点与解决方案
1. 安全执行用户代码
问题：如何安全执行任意 JavaScript 代码
解决方案：

使用异步函数构造器隔离执行环境

只注入必要的 THREE 对象

严格捕获和处理所有异常

2. 实时编译性能
问题：频繁编译影响用户体验
解决方案：

防抖机制（1 秒延迟）

增量编译和缓存

Web Worker 后台编译（未来扩展）

3. 跨浏览器兼容性
问题：WebGPU 尚未完全普及
解决方案：

双渲染器架构（WebGPU + WebGL）

优雅降级策略

功能检测和回退 -->


<html lang="zh-CN">
	<head>
		<title>Three.js WebGPU - TSL着色器编辑器</title>
		<meta charset="utf-8">
		<!-- 禁止用户缩放，确保编辑器界面稳定 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<!-- 
			页面布局CSS样式定义
			整个界面分为三部分：
			1. 左侧：TSL代码编辑器 (50%宽度)
			2. 右侧：生成的着色器代码显示区 (50%宽度)
			3. 右下角：实时渲染预览窗口 (200x200像素，悬浮显示)
		-->
		<style>
			/* 左侧TSL代码编辑器容器 */
			#source {
				position: absolute;     /* 绝对定位 */
				top: 0;                 /* 顶部对齐 */
				left: 0;                /* 左侧对齐 */
				width: 50%;             /* 占据页面50%宽度 */
				height: 100%;           /* 占据页面100%高度 */
			}
			/* 右侧着色器代码显示容器 */
			#result {
				position: absolute;     /* 绝对定位 */
				top: 0;                 /* 顶部对齐 */
				right: 0;               /* 右侧对齐 */
				width: 50%;             /* 占据页面50%宽度 */
				height: 100%;           /* 占据页面100%高度 */
			}
			/* 右下角实时渲染预览窗口 */
			#renderer {
				position: absolute;     /* 绝对定位 */
				bottom: 15px;           /* 距离底部15像素 */
				right: calc( 50% + 15px ); /* 距离右侧50%宽度再加15像素，确保在右半部分左侧 */
				width: 200px;           /* 固定宽度200像素 */
				height: 200px;          /* 固定高度200像素 */
				z-index: 100;           /* 设置较高层级，悬浮在其他元素之上 */
				pointer-events: none;   /* 禁止鼠标事件，避免干扰编辑操作 */
			}
			/* 页面信息提示区域 */
			#info {
				position: absolute;     /* 绝对定位 */
				top: 10px;              /* 距离顶部10像素 */
				left: 10px;             /* 距离左侧10像素 */
				background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
				color: white;           /* 白色文字 */
				padding: 10px;          /* 内边距10像素 */
				border-radius: 5px;     /* 圆角边框 */
				font-family: Arial, sans-serif; /* 字体设置 */
				font-size: 12px;        /* 字体大小12像素 */
				max-width: 300px;       /* 最大宽度限制 */
				z-index: 200;           /* 最高层级，确保显示在最前面 */
			}
		</style>

		<!-- 
			页面主体容器元素
			三个div分别对应CSS中定义的三个区域
		-->
		<div id="source"></div>  <!-- TSL代码编辑区域：用户在此编写Three.js着色器语言代码 -->
		<div id="result"></div>  <!-- 着色器代码显示区域：显示编译生成的WGSL或GLSL代码 -->
		<div id="renderer"></div> <!-- WebGPU渲染预览区域：实时显示TSL代码的渲染效果 -->
		
		<!-- 页面使用说明和信息提示 -->
		<div id="info">
			<h3>Three.js TSL着色器编辑器</h3>
		</div>

		<!-- 
			加载Monaco代码编辑器库
			Monaco是VS Code使用的编辑器组件，功能强大
		-->
		<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/loader.js"></script>

		<!-- 
			浏览器原生ES模块导入映射（Import Maps）
			定义模块名称到实际URL的映射关系
			这使得我们可以像使用npm包一样导入模块
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主应用程序模块
			使用type="module"表示这是ES6模块，支持import/export语法
		-->
		<script type="module">

			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js的WebGPU版本，这是新一代的Web图形API
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js TSL着色器语言的基本组件
			// vec4表示4维向量（RGBA颜色），是着色器中常用的数据类型
			import { vec4 } from 'three/tsl';

			// 导入轻量级GUI库lil-gui，用于创建控制面板
			// GUI面板允许用户调整应用程序参数而无需修改代码
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 调用初始化函数，启动应用程序
			init();

			// ============================================
			// 主初始化函数
			// ============================================
			function init() {

				// --------------------------------------------------
				// 第一部分：创建WebGPU渲染预览器
				// 这个渲染器用于实时显示TSL代码的3D效果
				// --------------------------------------------------
				
				// 设置预览窗口的尺寸
				const width = 200;   // 预览宽度200像素
				const height = 200;  // 预览高度200像素

				// 创建透视相机
				// 参数：70度视野角，宽高比，近裁剪面0.1单位，远裁剪面10单位
				const camera = new THREE.PerspectiveCamera( 70, width / height, 0.1, 10 );
				camera.position.z = .72;   // 将相机向后移动0.72单位
				camera.lookAt( 0, 0, 0 );  // 让相机看向坐标原点

				// 创建3D场景
				// 场景是所有3D对象的容器，包括网格、灯光、相机等
				const scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x222222 );  // 设置场景背景为深灰色

				// 获取渲染器DOM容器元素
				// 这个div将包含WebGPU渲染器的canvas元素
				const rendererDOM = document.getElementById( 'renderer' );

				// 创建WebGPU渲染器实例
				// antialias: true 启用抗锯齿，使边缘更平滑
				const renderer = new THREE.WebGPURenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );  // 设置设备像素比，适配高DPI屏幕
				renderer.setSize( 200, 200 );  // 设置渲染器大小为200x200像素
				rendererDOM.appendChild( renderer.domElement );  // 将canvas添加到DOM中

				// 创建Three.js节点材质（NodeMaterial）
				// NodeMaterial是Three.js的高级材质系统，支持节点化编辑
				const material = new THREE.NodeMaterial();
				// 设置初始片段节点为一个黑色不透明颜色
				// vec4(0, 0, 0, 1)表示RGBA(0,0,0,1)即黑色完全不透明
				material.fragmentNode = vec4( 0, 0, 0, 1 );

				// 创建一个平面网格对象
				// PlaneGeometry(1, 1)创建1x1单位的平面
				// 这个平面将显示TSL着色器的效果
				const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
				scene.add( mesh );  // 将网格添加到场景中

				// --------------------------------------------------
				// 第二部分：设置渲染循环
				// 这是实时渲染的核心，持续更新和绘制场景
				// --------------------------------------------------
				
				// 编译状态标志
				// 当TSL代码正在编译时，暂停渲染以避免错误
				let compiling = false;

				// 设置渲染循环（类似于requestAnimationFrame但由Three.js管理）
				// 这个函数会每帧调用，渲染当前场景
				renderer.setAnimationLoop( () => {
					// 如果正在编译着色器，跳过本次渲染
					// 这样可以避免在材质更新过程中渲染导致的错误
					if ( compiling ) return;

					// 渲染场景：将3D场景通过相机视角绘制到canvas上
					renderer.render( scene, camera );
				} );

				// --------------------------------------------------
				// 第三部分：初始化Monaco代码编辑器
				// Monaco是VS Code的编辑器组件，提供强大的代码编辑功能
				// --------------------------------------------------
				
				// 配置Monaco编辑器的加载路径
				// 这里使用CDN上的Monaco Editor资源
				window.require.config( { paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs' } } );

				// 使用AMD格式加载Monaco编辑器主模块
				// require是Monaco的加载函数，加载完成后执行回调
				require( [ 'vs/editor/editor.main' ], () => {

					// --------------------------------------------------
					// 3.1 应用程序配置选项
					// 这些选项可以通过GUI面板动态调整
					// --------------------------------------------------
					const options = {
						shader: 'fragment',           // 当前查看的着色器类型：'vertex'或'fragment'
						outputColorSpace: THREE.SRGBColorSpace, // 输出色彩空间：线性或sRGB
						output: 'WGSL',               // 输出着色器语言：'WGSL'或'GLSL ES 3.0'
						preview: true                 // 是否显示实时预览窗口
					};

					// --------------------------------------------------
					// 3.2 编辑器相关变量
					// --------------------------------------------------
					let timeout = null;     // 防抖定时器句柄，用于延迟编译
					let rawShader = null;   // 存储生成的着色器代码（包括顶点和片段着色器）

					// 获取编辑器DOM容器
					const editorDOM = document.getElementById( 'source' );   // 左侧TSL编辑器
					const resultDOM = document.getElementById( 'result' );   // 右侧结果显示

					// --------------------------------------------------
					// 3.3 默认TSL示例代码
					// 这是一个完整的TSL着色器示例，展示TSL的基本用法
					// --------------------------------------------------
					const tslCode = `// UV X轴动画示例 - Three.js TSL着色器

// 从three/tsl模块导入所需的函数和节点
const { texture, uniform, vec2, vec4, uv, oscSine, time, grayscale } = await import( 'three/tsl' );

// 加载纹理贴图
// 使用Three.js的纹理加载器加载一张UV测试网格图
const samplerTexture = new THREE.TextureLoader().load( './textures/uv_grid_opengl.jpg' );
samplerTexture.wrapS = THREE.RepeatWrapping;        // 设置纹理水平方向重复
samplerTexture.colorSpace = THREE.SRGBColorSpace;   // 设置纹理色彩空间为sRGB

// 创建基于时间的动画效果
// time是内置的时间节点，返回当前时间（秒）
const scaledTime = time.mul( .5 );  // 将时间乘以0.5，控制动画速度
const uv0 = uv();                   // 获取当前UV坐标（二维纹理坐标）
// 创建动画UV：X轴添加正弦波动，Y轴保持不变
const animateUv = vec2( uv0.x.add( oscSine( scaledTime ) ), uv0.y );

// 纹理采样：使用动画UV坐标对纹理进行采样
// .setName()是可选的，用于调试时显示节点名称
const myMap = texture( samplerTexture, animateUv ).rgb.setName( 'myTexture' );

// 创建颜色统一变量（uniform）
// uniform的值可以在外部控制，但这里设为固定值
const myColor = uniform( new THREE.Color( 0x0066ff ) ).setName( 'myColor' );
const opacity = .7;  // 透明度设置为0.7

// 将纹理颜色转换为灰度
// grayscale函数将RGB颜色转换为灰度值
const desaturatedMap = grayscale( myMap.rgb );

// 混合颜色：将灰度纹理与蓝色混合
const finalColor = desaturatedMap.add( myColor );

// 输出最终颜色
// output是特殊变量，表示材质输出
// 必须设置output变量，类型为vec4(R, G, B, A)
output = vec4( finalColor, opacity );
`;

					// --------------------------------------------------
					// 3.4 创建Monaco编辑器实例
					// --------------------------------------------------
					
					// 创建左侧TSL代码编辑器
					const editor = window.monaco.editor.create( editorDOM, {
						value: tslCode,          // 设置初始代码为示例代码
						language: 'javascript',  // 使用JavaScript语法高亮（TSL语法类似JS）
						theme: 'vs-dark',        // 使用深色主题
						automaticLayout: true,   // 自动调整布局，随窗口大小变化
						minimap: { enabled: false } // 关闭右侧的代码缩略图
					} );

					// 创建右侧着色器代码显示编辑器
					const result = window.monaco.editor.create( resultDOM, {
						value: '',               // 初始为空
						language: 'wgsl',        // 使用WGSL语法高亮（WebGPU着色语言）
						theme: 'vs-dark',        // 深色主题与左侧一致
						automaticLayout: true,   // 自动调整布局
						readOnly: true,          // 设置为只读，用户不能编辑生成的代码
						minimap: { enabled: false } // 关闭缩略图
					} );

					// --------------------------------------------------
					// 第四部分：辅助函数定义
					// --------------------------------------------------
					
					// 函数：显示生成的着色器代码到右侧编辑器
					const showCode = () => {
						// rawShader是一个对象，包含vertexShader和fragmentShader属性
						// options.shader可以是'vertex'或'fragment'
						result.setValue( rawShader[ options.shader + 'Shader' ] );
						result.revealLine( 1 );  // 滚动到第一行，方便查看
					};

					// 创建WebGL渲染器（兼容模式）
					// 这个渲染器用于生成GLSL ES 3.0代码
					// forceWebGL: true 强制使用WebGL后端而不是WebGPU
					const webGLRenderer = new THREE.WebGPURenderer( { forceWebGL: true } );

					// --------------------------------------------------
					// 4.1 核心构建函数 - 编译TSL并生成着色器
					// 这是应用程序的核心功能，将TSL代码转换为可执行的着色器
					// --------------------------------------------------
					const build = async () => {
						try {
							// 获取异步函数的构造函数
							// 用于动态创建和执行TSL代码
							const AsyncFunction = async function () {}.constructor;

							// 构建完整的TSL代码字符串
							// 包装用户代码，添加output变量声明和返回语句
							const tslCode = `let output = null;\n${ editor.getValue() }\nreturn { output };`;
							
							// 动态执行TSL代码
							// 1. 创建异步函数，参数为THREE对象
							// 2. 立即调用该函数，传入THREE库
							// 3. 返回一个包含output属性的对象
							const nodes = await ( new AsyncFunction( 'THREE', tslCode )( THREE ) );

							// 更新材质
							// 将TSL代码的输出节点设置为材质的片段节点
							mesh.material.fragmentNode = nodes.output;
							mesh.material.needsUpdate = true;  // 标记材质需要更新

							// 开始编译着色器
							compiling = true;  // 设置编译标志，暂停渲染循环

							// 根据用户选择的输出格式获取着色器代码
							if ( options.output === 'WGSL' ) {
								// 从WebGPU渲染器获取WGSL着色器代码
								// getShaderAsync是调试方法，返回编译后的着色器
								rawShader = await renderer.debug.getShaderAsync( scene, camera, mesh );
							} else if ( options.output === 'GLSL ES 3.0' ) {
								// 从WebGL渲染器获取GLSL ES 3.0着色器代码
								rawShader = await webGLRenderer.debug.getShaderAsync( scene, camera, mesh );
							}

							// 编译完成
							compiling = false;  // 清除编译标志，恢复渲染

							// 显示生成的着色器代码
							showCode();

							// --------------------------------------------------
							// 调试信息输出（当前被注释）
							// 如果需要调试，可以取消注释以下代码
							// 在控制台以美观的格式显示着色器代码
							// --------------------------------------------------
							/*
							const style = 'background-color: #333; color: white; font-style: italic; border: 2px solid #777; font-size: 22px;';
							console.log( '%c  [ WGSL ] 顶点着色器      ', style );
							console.log( rawShader.vertexShader );
							console.log( '%c  [ WGSL ] 片段着色器    ', style );
							console.log( rawShader.fragmentShader );
							/**/

						} catch ( e ) {
							// 错误处理
							// 如果TSL代码有语法错误或运行时错误，在这里捕获
							result.setValue( '错误：' + e.message );
							console.error( 'TSL编译错误:', e );
						}
					};

					// 初始构建：页面加载后立即编译默认TSL代码
					build();

					// --------------------------------------------------
					// 第五部分：事件监听器
					// --------------------------------------------------
					
					// 监听编辑器内容变化事件
					// 当用户在左侧编辑器中修改代码时触发
					editor.getModel().onDidChangeContent( () => {
						// 防抖处理：清除之前的定时器
						if ( timeout ) clearTimeout( timeout );
						
						// 设置新的定时器，1秒后执行build函数
						// 防抖可以避免频繁编译，提高性能
						timeout = setTimeout( build, 1000 );
					} );

					// --------------------------------------------------
					// 第六部分：GUI控制面板配置
					// lil-gui创建一个可交互的控制面板
					// --------------------------------------------------
					const gui = new GUI();

					// 选项1：着色器输出语言选择
					// 用户可以选择查看WGSL（WebGPU）或GLSL ES 3.0（WebGL）代码
					gui.add( options, 'output', [ 'WGSL', 'GLSL ES 3.0' ] )
						.name( '着色器语言' )        // 显示在GUI上的名称
						.onChange( build );          // 改变时重新构建

					// 选项2：查看的着色器类型
					// 可以切换查看顶点着色器或片段着色器代码
					gui.add( options, 'shader', [ 'vertex', 'fragment' ] )
						.name( '着色器类型' )        // 显示在GUI上的名称
						.onChange( showCode );       // 改变时更新显示（不需要重新编译）

					// 选项3：输出色彩空间选择
					// 色彩空间影响颜色的计算方式
					// LinearSRGBColorSpace：线性空间，用于物理正确渲染
					// SRGBColorSpace：sRGB空间，用于显示和纹理
					gui.add( options, 'outputColorSpace', [ 
						THREE.LinearSRGBColorSpace, 
						THREE.SRGBColorSpace 
					] )
						.name( '色彩空间' )          // 显示在GUI上的名称
						.onChange( ( value ) => {
							// 更新渲染器的色彩空间设置
							renderer.outputColorSpace = value;
							build();  // 重新构建以适应新的色彩空间
						} );

					// 选项4：预览窗口显示开关
					// 用户可以隐藏或显示右下角的实时渲染预览
					gui.add( options, 'preview' )
						.name( '显示预览' )          // 显示在GUI上的名称
						.onChange( ( value ) => {
							// 根据布尔值显示或隐藏预览窗口
							rendererDOM.style.display = value ? '' : 'none';
						} );

				} ); // Monaco编辑器加载回调结束

			} // init函数结束

		</script>
	</body>
</html>