├── README.md └── threejs.sublime-completions /README.md: -------------------------------------------------------------------------------- 1 | threejs-sublime 2 | =============== 3 | Threejs sublime adds autocomplete functionallity to javascript files within Sublime Text 2 for THREE.js 4 | 5 | ## Author 6 | Jason Kadrmas 7 | @itooamaneatguy 8 | http://kadrmasconcepts.com/blog/ 9 | 10 | ## Installation 11 | Threejs sublime can be installed through package control. 12 | 13 | - Command+Shift+P 14 | - Package Control Install Package 15 | - Select Three.js Autocomplete 16 | 17 | ## Usage 18 | If everything is installed correctly you should be able to start typing 'THREE.' and get auto completion. Enjoy! 19 | 20 | ## Todos 21 | Next steps would be to add some commonly used code blocks as snippets. Possible example to create a new scene could be the shortcut 22 | 23 | ``` javascript 24 | tscene + tab 25 | ``` 26 | 27 | which would pull in the basic code to create a new scene. 28 | 29 | ``` javascript 30 | var camera, scene, renderer, 31 | geometry, material, mesh; 32 | 33 | init(); 34 | animate(); 35 | 36 | function init() { 37 | 38 | scene = new THREE.Scene(); 39 | 40 | camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); 41 | camera.position.z = 1000; 42 | scene.add( camera ); 43 | 44 | geometry = new THREE.CubeGeometry( 200, 200, 200 ); 45 | material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); 46 | 47 | mesh = new THREE.Mesh( geometry, material ); 48 | scene.add( mesh ); 49 | 50 | renderer = new THREE.CanvasRenderer(); 51 | renderer.setSize( window.innerWidth, window.innerHeight ); 52 | 53 | document.body.appendChild( renderer.domElement ); 54 | 55 | } 56 | 57 | function animate() { 58 | 59 | // note: three.js includes requestAnimationFrame shim 60 | requestAnimationFrame( animate ); 61 | render(); 62 | 63 | } 64 | 65 | function render() { 66 | 67 | mesh.rotation.x += 0.01; 68 | mesh.rotation.y += 0.02; 69 | 70 | renderer.render( scene, camera ); 71 | 72 | } 73 | ``` 74 | -------------------------------------------------------------------------------- /threejs.sublime-completions: -------------------------------------------------------------------------------- 1 | { 2 | "scope": "source.js,source.js.embedded.html,source.coffee", 3 | "version": "r71", // Based on r49 completions, with some fixes. 4 | "completions": 5 | [ 6 | "THREE", 7 | 8 | /** 9 | INDEX 10 | 11 | 1. Constants. 12 | 2. Methods. 13 | **/ 14 | 15 | /*================================== 16 | = 1. Constants. = 17 | ==================================*/ 18 | 19 | /*========== Custom Blending Equation. ==========*/ 20 | 21 | // Equations 22 | "THREE.AddEquation", 23 | "THREE.SubtractEquation", 24 | "THREE.ReverseSubtractEquation", 25 | "THREE.MinEquation", 26 | "THREE.MaxEquation", 27 | 28 | // Destination Factors 29 | "THREE.ZeroFactor", 30 | "THREE.OneFactor", 31 | "THREE.SrcColorFactor", 32 | "THREE.OneMinusSrcColorFactor", 33 | "THREE.SrcAlphaFactor", 34 | "THREE.OneMinusSrcAlphaFactor", 35 | "THREE.DstAlphaFactor", 36 | "THREE.OneMinusDstAlphaFactor", 37 | 38 | // Source Factors 39 | "THREE.DstColorFactor", 40 | "THREE.OneMinusDstColorFactor", 41 | "THREE.SrcAlphaSaturateFactor", 42 | 43 | /*========== Materials. ==========*/ 44 | 45 | // Side. 46 | "THREE.FrontSide", 47 | "THREE.BackSide", 48 | "THREE.DoubleSide", 49 | // Shading. 50 | "THREE.NoShading", 51 | "THREE.FlatShading", 52 | "THREE.SmoothShading", 53 | // Colors. 54 | "THREE.NoColors", 55 | "THREE.FaceColors", 56 | "THREE.VertexColors", 57 | // Blending Mode. 58 | "THREE.NoBlending", 59 | "THREE.NormalBlending", 60 | "THREE.AdditiveBlending", 61 | "THREE.SubtractiveBlending", 62 | "THREE.MultiplyBlending", 63 | "THREE.CustomBlending", 64 | 65 | /*========== GL State. ==========*/ 66 | 67 | // Cull Face 68 | "THREE.CullFaceNone", 69 | "THREE.CullFaceBack", 70 | "THREE.CullFaceFront", 71 | "THREE.CullFaceFrontBack", 72 | 73 | // Front Face Direction 74 | "THREE.FrontFaceDirectionCW", 75 | "THREE.FrontFaceDirectionCCW", 76 | 77 | /*========== Shadowing Type. ==========*/ 78 | 79 | // Shadow Map 80 | "THREE.BasicShadowMap", 81 | "THREE.PCFShadowMap", 82 | "THREE.PCFSoftShadowMap", 83 | 84 | /*========== Texture. ==========*/ 85 | 86 | // Operations 87 | "THREE.MultiplyOperation", 88 | "THREE.MixOperation", 89 | "THREE.AddOperation", 90 | 91 | // Mapping Modes 92 | "THREE.UVMapping", 93 | "THREE.CubeReflectionMapping", 94 | "THREE.CubeRefractionMapping", 95 | "THREE.EquirectangularReflectionMapping", 96 | "THREE.EquirectangularRefractionMapping", 97 | "THREE.SphericalReflectionMapping", 98 | 99 | // Wrapping Modes 100 | "THREE.RepeatWrapping", 101 | "THREE.ClampToEdgeWrapping", 102 | "THREE.MirroredRepeatWrapping", 103 | 104 | // Filters 105 | "THREE.NearestFilter", 106 | "THREE.NearestMipMapNearestFilter", 107 | "THREE.NearestMipMapLinearFilter", 108 | "THREE.LinearFilter", 109 | "THREE.LinearMipMapNearestFilter", 110 | "THREE.LinearMipMapLinearFilter", 111 | 112 | // Data Types 113 | "THREE.UnsignedByteType", 114 | "THREE.ByteType", 115 | "THREE.ShortType", 116 | "THREE.UnsignedShortType", 117 | "THREE.IntType", 118 | "THREE.UnsignedIntType", 119 | "THREE.FloatType", 120 | "THREE.HalfFloatType", 121 | 122 | // Pixel Types 123 | "THREE.UnsignedShort4444Type", 124 | "THREE.UnsignedShort5551Type", 125 | "THREE.UnsignedShort565Type", 126 | 127 | // Pixel Formats 128 | "THREE.AlphaFormat", 129 | "THREE.RGBFormat", 130 | "THREE.RGBAFormat", 131 | "THREE.LuminanceFormat", 132 | "THREE.LuminanceAlphaFormat", 133 | "THREE.RGBEFormat", 134 | 135 | // DDS / ST3C Compressed Texture Formats 136 | "THREE.RGB_S3TC_DXT1_Format", 137 | "THREE.RGBA_S3TC_DXT1_Format", 138 | "THREE.RGBA_S3TC_DXT3_Format", 139 | "THREE.RGBA_S3TC_DXT5_Format", 140 | 141 | // PVRTC Compressed Texture Formats 142 | "THREE.RGB_PVRTC_4BPPV1_Format", 143 | "THREE.RGB_PVRTC_2BPPV1_Format", 144 | "THREE.RGBA_PVRTC_4BPPV1_Format", 145 | "THREE.RGBA_PVRTC_2BPPV1_Format", 146 | 147 | /*================================ 148 | = 2. Methods. = 149 | ================================*/ 150 | 151 | { "trigger": "THREE.PerspectiveCamera", "contents": "THREE.PerspectiveCamera( ${1:fov}, ${2:aspect}, ${3:near}, ${4:far} );$0" }, 152 | { "trigger": "THREE.OrthographicCamera", "contents": "THREE.OrthographicCamera( ${1:left}, ${2:right}, ${3:top}, ${4:bottom}, ${5:near}, ${6:far} );$0" }, 153 | 154 | { "trigger": "THREE.Clock", "contents": "THREE.Clock( ${1:autoStart} );$0" }, 155 | { "trigger": "THREE.Color", "contents": "THREE.Color( ${1:hex} );$0" }, 156 | { "trigger": "THREE.Face3", "contents": "THREE.Face3( a, b, c, normal, color, materialIndex );$0" }, 157 | { "trigger": "THREE.Face4", "contents": "Face4( a, b, c, d, normal, color, materialIndex );$0" }, 158 | { "trigger": "THREE.Frustrum", "contents": "THREE.Frustrum();$0" }, 159 | { "trigger": "THREE.Geometry", "contents": "THREE.Geometry();$0" }, 160 | 161 | { "trigger": "THREE.Math", "contents": "THREE.Math;$0" }, 162 | { "trigger": "THREE.Matrix3", "contents": "THREE.Matrix3();$0" }, 163 | { "trigger": "THREE.Matrix4", "contents": "THREE.Matrix4( n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44 );$0" }, 164 | { "trigger": "THREE.Object3D", "contents": "THREE.Object3D();$0" }, 165 | 166 | { "trigger": "THREE.Projector", "contents": "THREE.Projector();$0" }, 167 | { "trigger": "THREE.Quaternion", "contents": "THREE.Quaternion();$0" }, 168 | { "trigger": "THREE.Ray", "contents": "THREE.Ray();$0" }, 169 | { "trigger": "THREE.Rectangle", "contents": "THREE.Rectangle();$0" }, 170 | { "trigger": "THREE.Spline", "contents": "THREE.Spline();$0" }, 171 | 172 | { "trigger": "THREE.UV", "contents": "THREE.UV( u, v );$0" }, 173 | { "trigger": "THREE.Vector2", "contents": "THREE.Vector2( ${1:x}, ${2:y} );$0" }, 174 | { "trigger": "THREE.Vector3", "contents": "THREE.Vector3( ${1:x}, ${2:y}, ${3:z} );$0" }, 175 | { "trigger": "THREE.Vector4", "contents": "THREE.Vector4( ${1:x}, ${2:y}, ${3:z}, ${4:w} );$0" }, 176 | 177 | { "trigger": "THREE.Light", "contents": "THREE.Light( ${1:hex} );$0" }, 178 | { "trigger": "THREE.AmbientLight", "contents": "THREE.AmbientLight( ${1:hex} );$0" }, 179 | { "trigger": "THREE.DirectionalLight", "contents": "THREE.DirectionalLight( ${1:hex}, ${2:intensity} );$0" }, 180 | { "trigger": "THREE.PointLight", "contents": "THREE.PointLight( ${1:color}, ${2:intensity}, ${3:distance} );$0" }, 181 | { "trigger": "THREE.SpotLight", "contents": "THREE.SpotLight();$0" }, 182 | 183 | { "trigger": "THREE.Loader", "contents": "THREE.Loader();$0" }, 184 | { "trigger": "THREE.BinaryLoader", "contents": "THREE.BinaryLoader();$0" }, 185 | { "trigger": "THREE.JSONLoader", "contents": "THREE.JSONLoader();$0" }, 186 | { "trigger": "THREE.SceneLoader", "contents": "THREE.SceneLoader();$0" }, 187 | 188 | { "trigger": "THREE.Material", "contents": "THREE.Material( ${1:id}, ${2:name}, ${3:opacity}, ${4:transparent}, ${5:blending} );$0" }, 189 | { "trigger": "THREE.LineBasicMaterial", "contents": "THREE.LineBasicMaterial( ${1:color}, ${2:linewidth}, ${3:linecap}, ${4:linejoin}, ${5:vertexColors} );$0" }, 190 | { "trigger": "THREE.MeshBasicMaterial", "contents": "THREE.MeshBasicMaterial( ${1:color}, ${2:map}, ${3:shading}, ${4:wireframe} );$0" }, 191 | { "trigger": "THREE.MeshDepthMaterial", "contents": "THREE.MeshDepthMaterial( ${1:morphTargets}, ${2:wireframe}, ${3:wireframeLinewidth} );$0" }, 192 | { "trigger": "THREE.MeshFaceMaterial", "contents": "THREE.MeshFaceMaterial( ${1:materials} );$0" }, 193 | { "trigger": "THREE.MeshLambertMaterial", "contents": "THREE.MeshLambertMaterial( ${1:color}, ${2:map}, ${3:shading}, ${4:wireframe} );$0" }, 194 | { "trigger": "THREE.MeshNormalMaterial", "contents": "THREE.MeshNormalMaterial( ${1:wireframe}, ${2:wireframeLinewidth}, ${3:morphTargets} );$0" }, 195 | { "trigger": "THREE.MeshPhongMaterial", "contents": "THREE.MeshPhongMaterial( ${1:color}, ${2:map}, ${3:shading}, ${4:wireframe} );$0" }, 196 | { "trigger": "THREE.PointCloudMaterial", "contents": "THREE.PointCloudMaterial( ${1:color}, ${2:map}, ${3:size}, ${4:vertexColors} );$0" }, 197 | //{ "trigger": "THREE.ParticleBasicMaterial", "contents": "THREE.ParticleBasicMaterial( ${1:parameters} );$0" }, 198 | //{ "trigger": "THREE.ParticleCanvasMaterial", "contents": "THREE.ParticleCanvasMaterial( ${1:parameters} );$0" }, 199 | //{ "trigger": "THREE.ParticleDOMMaterial", "contents": "THREE.ParticleDOMMaterial( ${1:parameters} );$0" }, 200 | { "trigger": "THREE.ShaderMaterial", "contents": "THREE.ShaderMaterial( ${1:uniforms}, ${2:attributes}, ${3:defines}, ${4:vertexShader} );$0" }, 201 | { "trigger": "THREE.RawShaderMaterial", "contents": "THREE.RawShaderMaterial( ${1:parameters} );$0" }, 202 | 203 | { "trigger": "THREE.Bone", "contents": "THREE.Bone( belongsToSkin );$0" }, 204 | { "trigger": "THREE.Line", "contents": "THREE.Line( geometry, material, type );$0" }, 205 | { "trigger": "THREE.LOD", "contents": "THREE.LOD( ${1:objects});$0" }, 206 | { "trigger": "THREE.Mesh", "contents": "THREE.Mesh( ${1:geometry}, ${2:material});$0" }, 207 | { "trigger": "THREE.MorphAnimMesh", "contents": "THREE.MorphAnimMesh( ${1:geometry}, ${2:material});$0;" }, 208 | { "trigger": "THREE.Particle", "contents": "THREE.Particle( ${1:material} );$0" }, 209 | { "trigger": "THREE.ParticleSystem", "contents": "THREE.ParticleSystem( ${1:geometry}, ${2:material});$0" }, 210 | { "trigger": "THREE.Ribbon", "contents": "THREE.Ribbon( ${1:geometry}, ${2:material});$0" }, 211 | { "trigger": "THREE.SkinnedMesh", "contents": "THREE.SkinnedMesh( ${1:geometry}, ${2:material});$0" }, 212 | { "trigger": "THREE.Sprite", "contents": "THREE.Sprite( ${1:parameters} );$0" }, 213 | 214 | { "trigger": "THREE.CanvasRenderer", "contents": "THREE.CanvasRenderer( ${1:parameters} );$0" }, 215 | { "trigger": "THREE.DOMRenderer", "contents": "THREE.DOMRenderer();$0" }, 216 | { "trigger": "THREE.SVGRenderer", "contents": "THREE.SVGRenderer();$0" }, 217 | { "trigger": "THREE.WebGLRenderer", "contents": "THREE.WebGLRenderer( ${1:parameters} );$0" }, 218 | { "trigger": "THREE.WebGLRenderTarget", "contents": "THREE.WebGLRenderTarget( width, height, options );$0" }, 219 | { "trigger": "THREE.WebGLRenderTargetCube", "contents": "THREE.WebGLRenderTargetCube( width, height, options );$0" }, 220 | { "trigger": "THREE.ShaderChunk", "contents": "THREE.ShaderChunk;$0" }, 221 | { "trigger": "THREE.ShaderLib", "contents": "THREE.ShaderLib;$0" }, 222 | 223 | { "trigger": "THREE.RenderableFace3", "contents": "THREE.RenderableFace3();$0" }, 224 | { "trigger": "THREE.RenderableFace4", "contents": "THREE.RenderableFace4();$0" }, 225 | { "trigger": "THREE.RenderableLine", "contents": "THREE.RenderableLine();$0" }, 226 | { "trigger": "THREE.RenderableObject", "contents": "THREE.RenderableObject();$0" }, 227 | { "trigger": "THREE.RenderableParticle", "contents": "THREE.RenderableParticle();$0" }, 228 | { "trigger": "THREE.RenderableVertex", "contents": "THREE.RenderableVertex();$0" }, 229 | 230 | { "trigger": "THREE.Fog", "contents": "THREE.Fog( hex, near, far );$0" }, 231 | { "trigger": "THREE.FogExp2", "contents": "THREE.FogExp2( hex, density );$0" }, 232 | 233 | { "trigger": "THREE.Scene", "contents": "THREE.Scene();$0" }, 234 | 235 | { "trigger": "THREE.DataTexture", "contents": "THREE.DataTexture( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter );$0" }, 236 | { "trigger": "THREE.Texture", "contents": "THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type );$0" }, 237 | 238 | { "trigger": "THREE.ColorUtils", "contents": "THREE.ColorUtils$0" }, 239 | { "trigger": "THREE.GeometryUtils", "contents": "THREE.GeometryUtils$0" }, 240 | { "trigger": "THREE.ImageUtils", "contents": "THREE.ImageUtils$0" }, 241 | { "trigger": "THREE.SceneUtils", "contents": "THREE.SceneUtils$0" }, 242 | { "trigger": "THREE.ShaderUtils", "contents": "THREE.ShaderUtils$0" }, 243 | 244 | { "trigger": "THREE.Animation", "contents": "THREE.Animation( root, data, interpolationType, JITCompile );$0" }, 245 | { "trigger": "THREE.AnimationHandler", "contents": "THREE.AnimationHandler();$0" }, 246 | { "trigger": "THREE.AnimationMorphTarget", "contents": "THREE.AnimationMorphTarget( root, data );$0" }, 247 | { "trigger": "THREE.KeyFrameAnimation", "contents": "THREE.KeyFrameAnimation( root, data, JITCompile );$0" }, 248 | 249 | { "trigger": "THREE.CombinedCamera", "contents": "THREE.CombinedCamera( width, height, fov, near, far, orthonear, orthofar );$0" }, 250 | { "trigger": "THREE.CubeCamera", "contents": "THREE.CubeCamera( near, far, cubeResolution );$0" }, 251 | 252 | { "trigger": "THREE.FirstPersonControls", "contents": "THREE.FirstPersonControls( object, domElement );$0" }, 253 | { "trigger": "THREE.FlyControls", "contents": "THREE.FlyControls( object, domElement );$0" }, 254 | { "trigger": "THREE.PathControls", "contents": "THREE.PathControls( object, domElement );$0" }, 255 | { "trigger": "THREE.RollControls", "contents": "THREE.RollControls( object, domElement );$0" }, 256 | { "trigger": "THREE.TrackballControls", "contents": "THREE.TrackballControls( object, domElement );$0" }, 257 | 258 | { "trigger": "THREE.BufferGeometry", "contents": "THREE.BufferGeometry();$0" }, 259 | { "trigger": "THREE.Curve", "contents": "THREE.Curve();$0" }, 260 | { "trigger": "THREE.CurvePath", "contents": "THREE.CurvePath();$0" }, 261 | { "trigger": "THREE.EventTarget", "contents": "THREE.EventTarget();$0" }, 262 | { "trigger": "THREE.Gyroscope", "contents": "THREE.Gyroscope();$0" }, 263 | { "trigger": "THREE.Path", "contents": "THREE.Path( points );$0" }, 264 | { "trigger": "THREE.Shape", "contents": "THREE.Shape();$0" }, 265 | { "trigger": "THREE.TextPath", "contents": "THREE.TextPath( text, parameters );$0" }, 266 | 267 | { "trigger": "THREE.CubeGeometry", "contents": "THREE.CubeGeometry( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides );$0" }, 268 | { "trigger": "THREE.CylinderGeometry", "contents": "THREE.CylinderGeometry( radiusTop, radiusBottom, height, segmentsRadius, segmentsHeight, openEnded );$0" }, 269 | { "trigger": "THREE.ExtrudeGeometry", "contents": "THREE.ExtrudeGeometry( shapes, options );$0" }, 270 | { "trigger": "THREE.IcosahedronGeometry", "contents": "THREE.IcosahedronGeometry( radius, detail );$0" }, 271 | { "trigger": "THREE.LatheGeometry", "contents": "THREE.LatheGeometry( points, steps, angle );$0" }, 272 | { "trigger": "THREE.OctahedronGeometry", "contents": "THREE.OctahedronGeometry( radius, detail );$0" }, 273 | { "trigger": "THREE.PlaneGeometry", "contents": "THREE.PlaneGeometry( width, depth, segmentsWidth, segmentsDepth );$0" }, 274 | { "trigger": "THREE.PolyhedronGeometry", "contents": "THREE.PolyhedronGeometry( vertices, faces, radius, detail );$0" }, 275 | { "trigger": "THREE.SphereGeometry", "contents": "THREE.SphereGeometry( radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength );$0" }, 276 | { "trigger": "THREE.TetrahedronGeometry", "contents": "THREE.TetrahedronGeometry( radius, detail );$0" }, 277 | { "trigger": "THREE.TextGeometry", "contents": "THREE.TextGeometry( text, parameters );$0" }, 278 | { "trigger": "THREE.TorusGeometry", "contents": "THREE.TorusGeometry( radius, tube, segmentsR, segmentsT, arc );$0" }, 279 | { "trigger": "THREE.TorusKnotGeometry", "contents": "THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p, q, heightScale );$0" }, 280 | 281 | { "trigger": "THREE.AxisHelper", "contents": "THREE.AxisHelper();$0" }, 282 | { "trigger": "THREE.CameraHelper", "contents": "THREE.CameraHelper();$0" }, 283 | 284 | { "trigger": "THREE.SubdivisionModifier", "contents": "THREE.SubdivisionModifier( subdivisions );$0" }, 285 | 286 | { "trigger": "THREE.LensFlare", "contents": "THREE.LensFlare( texture, size, distance, blending, color );$0" }, 287 | 288 | { "trigger": "THREE.LensFlarePlugin", "contents": "THREE.LensFlarePlugin();$0" }, 289 | { "trigger": "THREE.ShadowMapPlugin", "contents": "THREE.ShadowMapPlugin();$0" }, 290 | { "trigger": "THREE.SpritePlugin", "contents": "THREE.SpritePlugin();$0" }, 291 | 292 | { "trigger": "THREE.ShaderFlares", "contents": "THREE.ShaderFlares;$0" }, 293 | { "trigger": "THREE.ShaderSprite", "contents": "THREE.ShaderSprite;$0" } 294 | ] 295 | } 296 | --------------------------------------------------------------------------------