Three.js JavaScript WebGL渲染器

使用https://threejs.org.维护的Three.js JavaScript库的基于Web的交互式查看器

通过添加关键字参数调用查看器 viewer='threejs' 发送到命令 show() 或任何三维图形。场景被渲染并显示在用户的Web浏览器中。互动性包括

  • 使用鼠标滚轮放大或缩小或在触摸板上捏

  • 通过鼠标单击和拖动或在触摸板上滑动进行旋转

  • 通过鼠标右键单击并拖动或用三个手指在触摸板上滑动来平移

生成的HTML文件包含除JavaScript库之外的场景的所有数据，并且可以保存到磁盘以共享或嵌入到网页中。该选项 online 可以设置为 true 提供指向在线内容递送网络中所需文件的链接。或者，可以从Three.js GitHub存储库下载所需的文件，并直接从Web服务器链接。

查看器当前支持的选项：

  • aspect_ratio --(默认： [1,1,1] )三个数值的列表或元组

  • auto_scaling --(默认： [False, False, False] )三个布尔值的列表或元组；设置为True可在过大时自动缩小相应方向

  • axes --(默认值：FALSE)确定是否绘制坐标轴的布尔值

  • axes_labels --(默认： ['x','y','z'] )三个字符串的列表或元组；设置为False可删除所有标签

  • axes_labels_style -- (default: None) list of three dicts, one per axis, or a single dict controlling all three axes; supports the same styling options as text3d() such as color, opacity, fontsize, fontweight, fontstyle, and fontfamily

  • color --(默认：‘Blue’)3D对象的颜色

  • decimals --(默认值：2)确定标签中显示的小数的整数

  • depth_write --(默认：不透明曲面为True，透明曲面为False)是否将曲面深度写入深度缓冲区以遮挡其后面的对象

  • frame --(默认值：TRUE)确定是否绘制框架的布尔值

  • online --(默认值：FALSE)确定本地标准程序包文件是否替换为指向在线内容交付网络的链接的布尔值

  • opacity --(默认值：1)线和表面透明度的数值

  • page_title --(默认值：无)包含生成的HTML页面标题的字符串；通常显示在浏览器窗口的标题栏、选项卡列表和/或操作系统的任务栏中

  • projection --(默认：‘透视’)要使用的相机投影类型；‘透视’或‘正交’

  • radius --(默认值：无)线半径的数值；用于渲染比可用线更粗的线 thickness 或者在Windows平台上， thickness 被忽略

  • render_order --(默认值：0)透明表面渲染顺序的数值；对象按从低到高的顺序渲染，确保值较低的对象完全渲染

  • single_side --(默认值：FALSE)确定是否渲染表面材质两侧的布尔值；设置为True可减少闭合透明曲面的渲染瑕疵

  • theme --(默认：‘light’)用于场景和用户界面的配色方案；‘light’或‘Dark’

  • thickness --(默认：1)线条粗细数值

  • viewpoint --(默认值：无)表单的列表或元组 [[x,y,z] ，角度]设置场景的初始视点，角度以度为单位；可以使用信息菜单的‘获取视点’选项来确定

此外，还支持以下与动画相关的选项：

  • animate --(默认：取决于是否开启动画)。自动设置为 True 如果绘图中存在动画数据。如果 False ，将同时显示动画的所有帧。

  • animation_controls --(默认为True)是否包含播放滑块和按钮(播放、暂停等)在页面中

  • auto_play --(默认为True)是否在页面加载时立即开始播放动画。推荐设置 animation_controls=True 才能开始播放。

  • delay --(默认：20)动画连续帧之间的整数时间量，单位为百分之一秒

  • loop --(默认值：TRUE)是循环动画还是在到达结束后停止动画。可以在页面本身上切换，如果 animation_controls 已经设置好了。

单击查看器右下角的信息图标可打开可用操作菜单。其中包括将三维场景保存为静态PNG图像或完整的HTML源代码。

作者：

  • 保罗·马森(2016)：初版

  • 《约书亚·坎贝尔》(2020)：动画支持

示例：

三个不同颜色和不透明度的球体：

sage: p1 = sphere(color='red', opacity='.5')
sage: p2 = sphere((-1,-1,1), color='cyan', opacity='.3')
sage: p3 = sphere((1,-1,-1), color='yellow', opacity='.7')
sage: show(p1 + p2 + p3, viewer='threejs')

参数螺旋线：：

sage: parametric_plot3d([cos(x),sin(x),x/10], (x,0,4*pi), color='red', viewer='threejs')
Graphics3d Object

一个 interactive() 动画：：

sage: def build_frame(t):
....:     e = parametric_plot3d([sin(x-t), 0, x], (x, 0, 2*pi), color='red')
....:     m = parametric_plot3d([0, -sin(x-t), x], (x, 0, 2*pi), color='green')
....:     return e + m
sage: frames = [build_frame(t) for t in (0, pi/32, pi/16, .., 2*pi)]
sage: plot = animate(frames).interactive()
sage: show(plot, delay=5, auto_play=False, projection='orthographic')