(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{77:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return s})),a.d(t,"metadata",(function(){return o})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return u}));var n=a(2),r=a(6),i=(a(0),a(131)),l=a(132),c=a(133),b=a.n(c),s={title:"ThreeJS Introduction"},o={unversionedId:"tutorials/three_intro",id:"tutorials/three_intro",isDocsHomePage:!1,title:"ThreeJS Introduction",description:"ThreeJS",source:"@site/docs\\tutorials\\three_intro.md",slug:"/tutorials/three_intro",permalink:"/docs/tutorials/three_intro",version:"current",sidebar:"docs",previous:{title:"PixiJS Positioning",permalink:"/docs/tutorials/pixi_positions"},next:{title:"Matter JS",permalink:"/docs/tutorials/matterjs"}},p=[{value:"ThreeJS",id:"threejs",children:[{value:"Links",id:"links",children:[]}]},{value:"Architecture",id:"architecture",children:[{value:"Namespaces",id:"namespaces",children:[]},{value:"DisplayEntities",id:"displayentities",children:[]}]},{value:"Basic setup",id:"basic-setup",children:[{value:"WebGLRenderer parameters",id:"webglrenderer-parameters",children:[]},{value:"Camera attributes",id:"camera-attributes",children:[]},{value:"Update loop",id:"update-loop",children:[]},{value:"Loading",id:"loading",children:[]},{value:"Positioning",id:"positioning",children:[]}]},{value:"Exercise",id:"exercise",children:[]}],m={rightToc:p};function u(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},m,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("h2",{id:"threejs"},"ThreeJS"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"HTML5 3D Animation Engine"),Object(i.b)("li",{parentName:"ul"},"3D JavaScript library"),Object(i.b)("li",{parentName:"ul"},"WebGL-based"),Object(i.b)("li",{parentName:"ul"},"Full scene graph, sprites, meshes, LOD, camera, shaders, animations"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Ideal for any 3D scene incorporated into a web page"))),Object(i.b)("h3",{id:"links"},"Links"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"https://threejs.org/"}),"main page")),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"https://github.com/mrdoob/three.js/"}),"github")),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"https://threejs.org/docs/index.html"}),"documentation")),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"https://threejs.org/examples"}),"examples"))),Object(i.b)("h2",{id:"architecture"},"Architecture"),Object(i.b)("h3",{id:"namespaces"},"Namespaces"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"this is just a subset, there are over 600 classes")),Object(i.b)("div",{className:b.a.figure},Object(i.b)("img",{src:Object(l.a)("img/docs/tutorials/02-threejs/diag_threejs_packages.svg")})),Object(i.b)("h3",{id:"displayentities"},"DisplayEntities"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"EventDispatcher")," - parent of all displayable classes, implements event-based system"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Object3D")," - base class for 3D objects"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Audio")," - non-positional audio object"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Bone")," - bone which is part of a Skeleton"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Sprite")," - a plane that always faces towards the camera"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Camera")," - abstract class for all cameras"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"CubeCamera")," - a group of 6 cameras that render to a WebGLCubeRenderTarget"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Group")," - adds ability to properly work with groups"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Points")," - 3D points in space"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"SVGObject")," - class that displays SVG vector images"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"LightHelper")," - displays a helper object for lights (e.g. cone for SpotLight)"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Light")," - abstract base class for lights"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Line")," - line segment"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"LOD")," - wrapper for objects rendered with LOD technique"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Mesh")," - triangular polygon mesh-based objects"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Scene")," - a scene to which you can place objects, lights and cameras")),Object(i.b)("div",{className:b.a.figure},Object(i.b)("img",{src:Object(l.a)("img/docs/tutorials/02-threejs/diag_threejs_classes.svg")})),Object(i.b)("h2",{id:"basic-setup"},"Basic setup"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-typescript"}),"import * as THREE from 'three';\n\nlet canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;\nlet camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 0.1, 1000 );\n\nlet renderer = new THREE.WebGLRenderer({ canvas });\nrenderer.setSize( canvas.width, canvas.height );\n\n// add a cube\nlet geometry = new THREE.BoxGeometry();\nlet material = new THREE.MeshBasicMaterial( { color: 0xFF00FF } );\nlet cube = new THREE.Mesh( geometry, material );\n\nlet scene = new THREE.Scene();\nscene.add( cube );\n\ncamera.position.z = 5;\n\n// game loop\nfunction animate() {\n    requestAnimationFrame( animate );\n    renderer.render( scene, camera );\n}\nanimate();\n")),Object(i.b)("h3",{id:"webglrenderer-parameters"},"WebGLRenderer parameters"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-typescript"}),"export interface WebGLRendererParameters {\n    canvas?: HTMLCanvasElement | OffscreenCanvas; // canvas for rendering\n    context?: WebGLRenderingContext; // webgl rendering context\n    alpha?: boolean; // enables alpha channel\n    antialias?: boolean; // enable antialias\n    depth?: boolean; // enables depth buffer\n    stencil?: boolean; // enables stencil buffer\n")),Object(i.b)("h3",{id:"camera-attributes"},"Camera attributes"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-typescript"}),"    fov: number,     // field of view\n    aspect: number,  // aspect ratio\n    near: number,  // near plane\n    far: number  // far plane\n")),Object(i.b)("h3",{id:"update-loop"},"Update loop"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"there is no ticker. You need to attach the animation loop to the event loop by calling ",Object(i.b)("inlineCode",{parentName:"li"},"requestAnimationFrame()")),Object(i.b)("li",{parentName:"ul"},"you can use the ",Object(i.b)("inlineCode",{parentName:"li"},"Clock")," object to measure time")),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-typescript"}),"const clock = new THREE.Clock();\n\n// start the clock\nclock.start();\n\nfunction animate() {\n    requestAnimationFrame( animate );\n\n    // get delta\n    const elapsedTime = clock.getDelta();\n    // ... update your model\n\n    // render your scene\n    renderer.render( scene, camera );\n}\nanimate();\n")),Object(i.b)("h3",{id:"loading"},"Loading"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"There is a special loader for each asset type",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"AudioLoader")," for audio"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"FileLoader")," for files"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"FontLoader")," for fonts"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ImageLoader")," for images"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"LoadingManager")," for event-based loading"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"MaterialLoader")," for materials"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"TextureLoader")," for textures")))),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-typescript"}),"let textureLoader = new THREE.TextureLoader();\nlet texture = textureLoader.load('./assets/icon.png');\n")),Object(i.b)("h3",{id:"positioning"},"Positioning"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"transformations are similar to PixiJS",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"position")),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"rotation")," (Euler angles)"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"quaternion")," (for global rotation)"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"scale"))))),Object(i.b)("h2",{id:"exercise"},"Exercise"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("p",{parentName:"li"},Object(i.b)("strong",{parentName:"p"},"the exercise is relevant to a project version with a tag of 4.2"))),Object(i.b)("li",{parentName:"ul"},Object(i.b)("p",{parentName:"li"},"go to ",Object(i.b)("inlineCode",{parentName:"p"},"examples\\src\\02-three-intro\\sprites.ts"))),Object(i.b)("li",{parentName:"ul"},Object(i.b)("p",{parentName:"li"},"follow the instructions in TODO blocks and render animated particles by the picture below")),Object(i.b)("li",{parentName:"ul"},Object(i.b)("p",{parentName:"li"},"you can access the canvas in ",Object(i.b)("inlineCode",{parentName:"p"},"http://localhost:1234/02_sprites.html")))),Object(i.b)("div",{className:b.a.figure},Object(i.b)("img",{src:Object(l.a)("img/docs/tutorials/02-threejs/exercise_particles.jpg")})))}u.isMDXComponent=!0}}]);