T.M. SoftStudio

feci quod potui, faciant meliora potentes

Three.js

Библиотека Three.js (https://github.com/mrdoob/three.js) упрощает использование программного интерфейса WebGL API для создания 3D-графики на странице веб-браузера.

Библиотека Three.js предоставляет высокоуровневый программный интерфейс, позволяющий оперировать такими привычными понятиями компьютерной графики как сцена, графический объект и камера.

Библиотека Three.js определяет класс THREE, инкапсулирующий классы сцены, камеры, освещения, материалов, текстур и др.

Модель программирования Three.js

Для создания 3D-графики на странице веб-браузера с помощью библиотеки Three.js необходимо:

  • Создать объект сцены:

var scene = new THREE.Scene();
  • Создать объект камеры:

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.z = 5;

  • Создать объект визуализации:

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );

  • Добавить DOM-элемент объекта визуализации в HTML-документ:

document.body.appendChild( renderer.domElement );

  • Объект визуализации внутри использует элемент <canvas>, поэтому необходимо определить CSS-свойства данного элемента:

<style>canvas { width: 100%; height: 100% }</style>

  • Добавить в сцену графические объекты:

var geometry = new THREE.CubeGeometry(1,1,1);

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var cube = new THREE.Mesh( geometry, material );

scene.add( cube );

  • Определить цикл визуализации, обеспечивающий перерисовку сцены 60 раз в секунду:

function render()

{ requestAnimationFrame(render);

//Анимация объекта

cube.rotation.x += 0.1; cube.rotation.y += 0.1;

renderer.render(scene, camera); }

render();



Программный интерфейс Three.js

Константы класса THREE

Базовый класс Object3D объектов графа сцены

Визуализация

Класс WebGLRenderer
Класс CanvasRenderer
Класс WebGLDeferredRenderer
Класс SVGRenderer
Класс SoftwareRenderer
Класс CSS3DRenderer
Класс WebGLRenderTarget
Класс WebGLRenderTargetCube
Файл WebGLShaders.js
Класс RenderableFace3
Класс RenderableFace4
Класс RenderableLine
Класс RenderableObject
Класс RenderableParticle
Класс RenderableVertex
Класс DepthPassPlugin
Класс LensFlarePlugin
Класс ShadowMapPlugin
Класс SpritePlugin
Класс ShaderFlares
Класс ShaderSprite

Геометрия

Класс BufferGeometry
Класс Geometry
Класс Face3
Класс Face4
Класс CircleGeometry
Класс ConvexGeometry
Класс CubeGeometry
Класс CylinderGeometry
Класс ExtrudeGeometry
Класс IcosahedronGeometry
Класс LatheGeometry
Класс OctahedronGeometry
Класс ParametricGeometry
Класс PlaneGeometry
Класс PolyhedronGeometry
Класс ShapeGeometry
Класс SphereGeometry
Класс TetrahedronGeometry
Класс TextGeometry
Класс TorusGeometry
Класс TorusKnotGeometry
Класс TubeGeometry

Камеры

Класс Camera
Класс OrthographicCamera
Класс PerspectiveCamera
Класс CubeCamera
Класс CombinedCamera

Материалы

Класс Material
Класс LineBasicMaterial
Класс LineDashedMaterial
Класс MeshBasicMaterial
Класс MeshDepthMaterial
Класс MeshFaceMaterial
Класс MeshLambertMaterial
Класс MeshNormalMaterial
Класс MeshPhongMaterial
Класс ParticleBasicMaterial
Класс ParticleCanvasMaterial
Класс ShaderMaterial
Класс SpriteMaterial

Освещение

Класс AmbientLight
Класс AreaLight
Класс DirectionalLight
Класс HemisphereLight
Класс PointLight
Класс SpotLight

Сцена

Класс Scene
Класс Fog
Класс FogExp2

Текстуры

Класс Texture
Класс DataTexture
Класс CompressedTexture

Объекты

Класс Bone
Класс Line
Класс LOD
Класс Mesh
Класс MorphAnimMesh
Класс Particle
Класс ParticleSystem
Класс Ribbon
Класс SkinnedMesh
Класс Sprite
Класс ImmediateRenderObject
Класс LensFlare
Класс MorphBlendMesh

Core

Класс Clock
Класс EventDispatcher
Класс Projector
Класс Raycaster
Классы LineCurve и LineCurve3
Классы QuadraticBezierCurve и QuadraticBezierCurve3
Классы CubicBezierCurve и CubicBezierCurve3
Классы SplineCurve и SplineCurve3
Класс EllipseCurve
Класс ArcCurve
Класс Curve.Utils
Класс ClosedSplineCurve3
Класс CurvePath
Класс Gyroscope
Класс Path
Класс Shape
Класс Shape.Utils

Math

Класс Box2
Класс Box3
Класс Color
Класс Frustum
Класс Line3
Класс Math
Класс Matrix3
Класс Matrix4
Класс Plane
Класс Quaternion
Класс Ray
Класс Sphere
Класс Spline
Класс Triangle
Класс UV
Класс Vector2
Класс Vector3
Класс Vector4
Класс Vertex
Класс ColorConverter
Класс TypeArrayVector3

Загрузка

Класс Loader
Класс ImageLoader
Класс JSONLoader
Класс LoadingMonitor
Класс SceneLoader
Класс TextureLoader
Класс BinaryLoader
Класс ColladaLoader
Класс MTLLoader
Класс OBJLoader
Класс OBJMTLLoader
Класс PDBLoader
Класс SceneLoader2
Класс STLLoader
Класс UTF8Loader
Класс VTKLoader
Класс CTMLoader

Утилиты

Класс FontUtils
Класс GeometryUtils
Класс ImageUtils
Класс SceneUtils
Класс ArrowHelper
Класс AxisHelper
Класс CameraHelper
Класс DirectionalLightHelper
Класс HemisphereLightHelper
Класс PointLightHelper
Класс SpotLightHelper

Postprocessing

Класс EffectComposer
Класс BloomPass
Класс DotScreenPass
Класс FilmPass
Класс MaskPass
Класс ClearMaskPass
Класс RenderPass
Класс SavePass
Класс ShaderPass
Класс TexturePass

Инструменты

join_ctm.py
convert_to_threejs.py
convert_obj_three.py
split_obj.py
export_threejs.py и import_threejs.py
ThreeJSExporter.ms
threeJsFileTranlator.py и ThreeJsExportScript.mel

Анимация

Класс Animation
Класс AnimationHandler
Класс AnimationMorphTarget
Класс KeyFrameAnimation