티스토리 뷰

Application/Miscellaneous

WebGL 모듈 써보기

drake_kr 2019. 6. 20. 09:19

시작하기부터 보면 three.js를 가져오는데 내가 보기엔 어차피 three.js도 cdn 통해서 쓰면 별 문제 없을듯 한데..

역시나 프로젝트의 수명이 길다면 수동업데이트를 해줘야 하는 문제가 있다고 한다.

그래서 프로젝트에 npm을 추천하고 있다.

npm install three

뭐 사실 소규모 프로젝트에서는 별 상관이 없는데, webpack이나 browserify같은거 쓰게 되면 아무래도 종속 항목을 묶을 수 있으니 편하다는 얘기.

var THREE = require('three');

var scene = new THREE.Scene();
...

es6 import로도 사용가능.

import * as THREE from 'three';

const scene = new THREE.Scene();

three.js의 scene 라이브러리만 올려놓고 사용하고 싶은 경우.

import { Scene } from 'three';

const scene = new Scene();

import 예제

three.js는 3D Engine의 가장 중요한 요소만 들고 있다..고 하는데 그거만으로도 일단 덩치가 큰 편이다. 모듈 관련 예제를 보려면 examples/jsm 디렉토리를 확인할 수 있다.

npm으로 받아서 활용할 경우 다음 예제처럼 import할 수 있다.

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

 

살펴볼 수 있는 예제들

  • cameras
    • CinematicCamera
  • controls
    • DeviceOrientationControls
    • DragControls
    • EditorControls
    • FirstPersonControls
    • FlyControls
    • MapControls
    • OrbitControls
    • OrthographicTrackballControls
    • PointerLockControls
    • TrackballControls
    • TransformControls
  • curves
    • NURBSCurve
    • NURBSSurface
    • NURBSUtils
  • effects
    • AnaglyphEffect
    • AsciiEffect
    • OutlineEffect
    • ParallaxBarrierEffect
    • PeppersGhostEffect
    • StereoEffect
  • exporters
    • ColladaExporter
    • GLTFExporter
    • MMDExporter
    • OBJExporter
    • PLYExporter
    • STLExporter
    • TypedGeometryExporter
  • geometries
    • BoxLineGeometry
    • ConvexGeometry
    • DecalGeometry
    • ParametricGeometries
    • TeapotBufferGeometry
  • loaders
    • 3MFLoader
    • AMFLoader
    • AssimpJSONLoader
    • AssimpLoader
    • BabylonLoader
    • BVHLoader
    • ColladaLoader
    • DDSLoader
    • EXRLoader
    • FBXLoader
    • GCodeLoader
    • GLTFLoader
    • KMZLoader
    • KTXLoader
    • MTLLoader
    • OBJLoader
    • PCDLoader
    • PDBLoader
    • PlayCanvasLoader
    • PLYLoader
    • RGBELoader
    • STLLoader
    • SVGLoader
    • TGALoader
    • VRMLLoader
  • math
    • ColorConverter
    • ConvexHull
    • ImprovedNoise
    • Lut
    • SimplexNoise
  • modifiers
    • ExplodeModifier
    • SimplifyModifier
    • SubdivisionModifier
    • TessellateModifier
  • objects
    • Lensflare
    • Reflector
    • Refractor
    • ReflectorRTT
    • ShadowMesh
    • Sky
    • Water
    • Water2
  • pmrem
    • PMREMCubeUVPacker
    • PMREMGenerator
  • postprocessing
    • AdaptiveToneMappingPass
    • AfterimagePass
    • BloomPass
    • BokehPass
    • ClearPass
    • CubeTexturePass
    • DotScreenPass
    • EffectComposer
    • FilmPass
    • GlitchPass
    • HalftonePass
    • MaskPass
    • OutlinePass
    • RenderPass
    • SAOPass
    • SavePass
    • ShaderPass
    • SMAAPass
    • SSAARenderPass
    • SSAOPass
    • TAARenderPass
    • TexturePass
    • UnrealBloomPass
  • renderers
    • CSS2DRenderer
    • CSS3DRenderer
    • Projector
    • SoftwareRenderer
    • SVGRenderer
    • RaytracingRenderer
    • WebGLDeferredRenderer
  • shaders
    • AfterimageShader
    • BasicShader
    • BleachBypassShader
    • BlendShader
    • BokehShader
    • BokehShader2
    • BrightnessContrastShader
    • ColorCorrectionShader
    • ColorifyShader
    • ConvolutionShader
    • CopyShader
    • DepthLimitedBlurShader
    • DigitalGlitch
    • DOFMipMapShader
    • DotScreenShader
    • FilmShader
    • FocusShader
    • FreiChenShader
    • FresnelShader
    • FXAAShader
    • GammaCorrectionShader
    • HalftoneShader
    • HorizontalBlurShader
    • HorizontalTiltShiftShader
    • HueSaturationShader
    • KaleidoShader
    • LuminosityHighPassShader
    • LuminosityShader
    • MirrorShader
    • NormalMapShader
    • ParallaxShader
    • PixelShader
    • RGBShiftShader
    • SAOShader
    • SepiaShader
    • SMAAShader
    • SobelOperatorShader
    • SSAOShader
    • TechnicolorShader
    • ToneMapShader
    • TriangleBlurShader
    • UnpackDepthRGBAShader
    • VerticalBlurShader
    • VerticalTiltShiftShader
    • VignetteShader
    • WaterRefractionShader
  • utils
    • BufferGeometryUtils
    • GeometryUtils
    • MathUtils
    • SceneUtils
    • ShadowMapViewer
    • SkeletonUtils
    • TypedArrayUtils
    • UVsDebug

https://threejs.org/examples

 

three.js examples

 

threejs.org

어차피 웹브라우저로 보이니, 샘플을 보고 필요한 모듈을 찾아보면 될듯.

 

추천이나 댓글은 뭐 저한테 큰 힘이 되거나 하는건 모르겠고, 궁금한건 제가 아는 선에서 답해 드릴게요.

'Application > Miscellaneous' 카테고리의 다른 글

WebGL 시작해보기.  (0) 2019.06.14
C++한테 깝치다 쳐맞는 JAVA  (6) 2016.02.22