|
|
三.js示例
此集合的目标是提供一组基本且具有指导意义的示例，以介绍 Three.js 中的各种功能。每个页面的源代码都包含详细的注释。
托管在GitHub 上。示例总数：83。最后更新时间：2013 年 8 月 23 日。与 Three.js 版本 60 兼容。
基本示例• Hello World •模板 •信息框 •材料 - 实体 •颜色资源管理器 •线框 •线和虚线 •助手 •轮廓效果 •面/顶点颜色 •形状 •拉伸 • Text3D
纹理示例•纹理 •纹理 - 重复 •纹理 - Text3D •半透明 •阴影 •细分修改器 - 立方体 •天空盒 •反射 •折射 •气泡 •来自画布的纹理 •纹理动画
精灵示例•精灵 •精灵文本标签 •标记几何
鼠标和键盘示例•鼠标精灵 •鼠标点击 •鼠标悬停 •鼠标工具提示 •键盘事件
相机/渲染器示例•网格移动 •追逐相机 •多个相机 •相机到纹理 •视口 - 双 •视口 - 四 •嵌入式 HTML •红/蓝立体图
着色器示例•着色器 - 简单 •着色器 - 资源管理器 •着色器 - 球体展开 •着色器 - 属性 •着色器 - 动画材质 •着色器 - 动画火球 •着色器 - 发光效果 •简单发光（非着色器）
粒子系统示例•粒子 •粒子系统 - 静态 •粒子系统 - 着色器 •粒子系统 - 属性 •粒子系统 - 动态 •粒子系统 - 路径运动 •粒子引擎
视频/网络摄像头示例•视频到纹理 •网络摄像头测试 •网络摄像头到纹理 •运动检测 •运动检测和场景 •许多相机
图形用户界面示例• GUI • GUI 控制器
游戏手柄和 Leapmotion 控制器示例•游戏手柄测试 •网格移动 - 游戏手柄 • LeapMotion 可视化
模型示例•模型 •动画模型 •带控件的动画模型
碰撞检测示例•Collision Detection
行进立方体示例• Marching Cubes 算法 • Metaballs • Metabubbles
数学例子•构造实体几何 •球体投影 •拓扑数据 •拓扑数据 2 •多面体查看器 •函数图示器 •参数曲面图示器 •参数曲线图示器
其他例子•体素画家 •
你好世界一个被大量评论但基本的场景。说明场景、相机、渲染器、事件处理程序（用于调整窗口大小和全屏，由 THREEx 库提供）、用于旋转/缩放/平移场景的鼠标控件、用于 FPS 统计的迷你显示以及设置基本几何图形的设置：具有照明效果的球体、多色立方体、应用了图像纹理的平面以及用于渲染远离相机的对象的天空盒/雾选项。
在下面的示例中更详细地描述了这些特征中的许多。
模板删除了大部分注释和网格的“Hello World”代码。
信息框添加了最小 jQuery 的模板代码以创建一个显示信息对话框的按钮。
材料 - 固体说明 Basic、Lambert 和 Phong 材料之间的区别。
颜色浏览器说明更改颜色（漫反射颜色）、环境颜色、发射颜色、镜面反射颜色、光泽量和不透明度量的效果。
线框演示如何创建和应用线框材质。
线和虚线演示如何创建实线、虚线，并包含将几何图形转换为线型对象的函数。
帮手演示如何使用 AxisHelper、GridHelper 和 ArrowHelper 轻松创建基于行的对象。
轮廓效果演示在网格周围显示实心轮廓的效果。
面/顶点颜色为渐变效果的面和顶点分配颜色。
形状使用一些内置几何构造函数来创建以下三维形状（和变体）：立方体、二十面体、八面体、四面体、球体、圆顶、圆柱体、棱柱体、圆锥体、棱锥体、平截头体（截锥体和截锥体），圆环，圆环结。
挤压创建一个 2D 点数组，创建一个 2D 形状，然后创建一个拉伸（横截面为给定 2D 形状的 3D 形状）。
文本3D创建一个 3D 文本对象（呈现为 2D 图像的文本的突出版本）。
纹理展示具有纹理（基于图像的材料）的表面，包括阴影和着色效果。
纹理 - 重复在表面上重复（平铺）纹理。
纹理 - Text3D将纹理应用于 3D 文本。（需要在表面上重复纹理。）
半透明说明使用基本和 phong 着色半透明材料，使图像纹理半透明，使用添加混合以获得类似发光的效果，以及使用已经具有 alpha 透明度的图像纹理。
阴影使用聚光灯在场景中创建阴影效果。
细分修改器 - 立方体演示将附加点插值到几何图形的函数，从而创建“平滑”效果。此示例将修改器应用于各种立方体几何形状，从而生成球形和斜面立方体。
天空盒使用纹理创建“SkyBox”：将背景图像投影到渲染区域周围的立方体上，从而产生远处 3D 环境的错觉。
反射通过将周围环境的图像投影到物体上来创建类似镜子的材料。
折射通过将周围环境的折射图像投影到物体上来创建类似玻璃的材料。
气泡使用菲涅耳着色器创建类似气泡的材质（包含反射、折射和色差）。
来自画布的纹理通过 JavaScript 创建一个画布元素，在其上绘制文本或图像，然后将其用作网格的纹理。
纹理动画在表面上为 spritesheet 图像纹理设置动画。
精灵精灵是显示在场景中的图像（不附加到几何体/表面），始终与相机正交。它们既可以出现在 3D 场景中（用作粒子效果的一部分），也可以使用屏幕坐标进行渲染（用作图形用户界面 (GUI) 或平视显示器 (HUD) 的一部分）。
精灵文本标签结合 Sprite 演示中的技术和 Canvas 演示中的纹理，引入了一个可以轻松制作可自定义文本标签的功能。
标记几何使用 Sprite Text Labels 演示使用索引号标记几何体的所有顶点和边缘。
鼠标精灵在鼠标的当前位置显示一个精灵。（可能对定位图标或鼠标指针图标很有用。）
鼠标点击单击时更改网格上面的颜色。
鼠标悬停当鼠标悬停在场景中的对象上时，更改其颜色。
鼠标工具提示创建工具提示样式效果以在鼠标悬停时显示网格名称。（使用示例中的想法：鼠标精灵、鼠标悬停和画布中的纹理。）
键盘事件演示使用 KeyboardState.js 来响应按键按下/按下/按下事件。
网格运动使用 THREEx.Keyboard 提供的功能，平移和旋转网格，具有以下控件：
W/S/Q/E：向前/向后/向左/向右（本地）平移。
A/D/R/F：左/右/上/下旋转（本地）。
上/下/左/右：平移 Z-/Z+/X-/X+（全局）。
追逐相机创建一个“追逐凸轮”——将相机与网格一起移动。（与“网格移动”示例中的控件相同。）
多台摄像机在多台摄像机之间切换：追逐摄像机（按“1”）和固定顶视图（按“2”）。（否则，与“网格移动”示例中的控件相同。）
相机到纹理在相机周围移动并将它看到的东西投影到纹理上。（与“网格移动”示例中的控件相同。）
视口 - 双同时将两个不同的相机视图渲染到同一个画布元素上。（与“网格移动”示例中的控件相同。）
视口 - 四边形同时将四个不同的相机视图渲染到同一个画布元素上：一个透视相机和三个沿轴方向的正交相机（类似于许多 3D 建模软件配置）。（与“网格移动”示例中的控件相同。）
嵌入式 HTML
浮雕显示使用浮雕效果渲染的场景；使用红色/蓝色 3D 眼镜观看。
着色器 - 简单演示如何设置简单的预定义着色器（棕褐色着色）。
着色器 - 资源管理器Illustrates the effects of changing the parameters in different shaders (sepia, vignette, dot screen).
Shader - Sphere UnwrappingDemonstrates using a vertex shader to animate vertices, changing their positions according to their UV-coordinates; the result is a sphere that "flattens" into a plane.
Shader - AttributesDemonstrates using a vertex shader to animate vertices, using "attributes": a set of values associated to each vertex.
Shader - Animated MaterialsDemonstrates the animation of materials using shaders, featuring a lava effect and a water effect.
Shader - Animated FireballBuilds upon the "Shader - Animated Materials" demo: a second image is randomly distorted and blended with the first, and the positions of the vertices are randomly distorted. These effects are combined to create an animated fireball.
Shader - Glow EffectCreate a glow effect using shaders. Includes GUI to adjust shader parameters. Using front-face rendering can create glow or shell style effects; using back-face rendering can create halo or atmosphere style effects (see information in-demo for corresponding parameter values).
Simple Glow (non-shader)Create a glow effect *without* using custom shader material -- uses a additively blended sprite. (Only works well with spherical objects.)
ParticlesCreate a particle effect using a group of sprites and alpha blending (or transparency).
Particle System - StaticCreate a group of particles using the ParticleSystem object (for faster rendering). Each vertex in a given geometry corresponds to the position of a particle.
Particle System - ShaderThe "Particle System - Static" demo rewritten using a shader-based material; will be useful in subsequent demos.
Particle System - AttributesBuilds upon "Particle System - Shader" demo, incorporating shader attributes, enabling each particle to have customized properties - in this case, each particle is assigned a different color.
Particle System - DynamicBuilds upon "Particle System - Attributes" demo, incorporating animation: particle sizes oscillate at different frequencies over time.
Particle System - Path MovementA particle system with particles moving along a path.
Particle EngineA complete particle engine for controlling a particle system to create special effects such as fire, smoke, stars, snow, and fireworks. Includes 11 example effects. Customizable particle properties include particle image, rotation, size, color, and opacity.
Video to TextureDisplay a video as a texture. Keyboard controls: "P" to play/resume, "SPACE" to pause, "R" to rewind, "S" to stop.
Webcam TestDisplays user webcam image on this webpage. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/). (No Three.js code required; this example is a lead-in to the following example.)
Webcam TextureDisplays user webcam image as a texture on a mesh. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/). Press P to pause webcam (image freezes) and R to resume webcam.
Many CamerasDisplays user webcam image as a texture on a moveable mesh (W/A/S/D/Q/E). Incorporates code from examples: Webcam Texture, Mesh Movement, Reflection, Skybox, and Viewports - Dual. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/).
Motion Detection
Motion Detection and SceneDisplays user webcam image on webpage. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/). Detects motion occuring over graphics regions, and changes texture on spinning cube accordingly.
GUICreate a graphical user interface (using the DAT.GUI library).
GUI ControllerCreate a graphical user interface (using the DAT.GUI library) that controls the appearance of a cube mesh.
Gamepad TestUses a Gamepad (e.g. XBox controller) to move a square image around a canvas. Requires Chrome browser and connected gamepad to run. Uses gamepad.js library (patched) from http://github.com/inequation/gamepad.js. Analog sticks and directional pad move square up/down/left/right. A/B/X/Y buttons change colors of square. Start/select buttons reset square to original position. [Note: You may need to press one of A/B/X/Y buttons for controller to be recognized by the web browser.] (No Three.js code required; this example is a lead-in to the following example.)
Mesh Movement - GamepadUses a Gamepad (e.g. XBox controller) to move a cube around a Three.js scene, similar to Mesh-Movement example above. Requires Chrome browser and connected gamepad to run. Left analog stick moves cube forward/backward and turns left/right. Directional pad moves cube forward/backward/left/right. Right analog stick only turns cube left/right. Right shoulder buttons double speed of movement/turns. Start/select buttons reset cube to original position and rotation.
LeapMotion - Visualization
ModelLoading a static 3D model (exported from Blender to JavaScript).
Animated ModelLoading an animated 3D model (exported from Blender to JavaScript).
Animated Model with ControlsLoading an animated 3D model (exported from Blender to JavaScript). Model moves with arrow keys; model animates when moving and stops animating when not moving.
Collision DetectionDetect when the vertices of a mesh intersect with another object. (Move the wireframe cube with the arrow keys and rotate with W/A/S/D; the text "Hit" will appear at the top of the screen once for every vertex intersection.)
Marching Cubes Algorithm
Metaballs
MetabubblesMetaballs demo + Bubble demo = Metabubbles demo!
Constructive Solid Geometry
Sphere ProjectionProjects a wireframe cube onto a sphere. Includes a method for drawing the arc between two points on a sphere.
Topology DataFrom a THREE.Geometry, creates a topological data structure consisting of vertices, edges, and faces, with incidence data for each. For this example, the corresponding geometry is labeled (including edges) and the data can be manually verified from the browser console. (Builds on Lebeled Geometry demo.)
Topology Data 2Builds upon Topology Data demo; illustrates edge and face subdivision and retriangulation functions and proper face coloring function.
Polyhedra ViewerInteractive viewer of polyhedra (Platonic, Archimedean, Prisms, Antiprisms, Johnson Solids).
Function GrapherGraph a function of the form z = f( x, y ).
Parametric Surface GrapherGraph a parametric surface of the form x = f( u, v ), y = g( u, v ), z = h( u, v ).
Parametric Curve GrapherGraph a parametric curve of the form x = f( t ), y = g( t ), z = h( t ).
Voxel PainterPaint with voxels, Minecraft-style! (Think: 3D pixel editor.)
|
|
发表于 2022-7-20 15:13:09