일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 확률
- 빅 데이터
- WebGL
- Deep learning
- 주일설교
- 김양재 목사님
- probability
- Machine Learning
- 김양재
- R
- node.js
- 우리들교회
- 인공지능
- openCV
- 빅데이타
- data science
- 데이터 과학
- 통계
- c++
- 몽고디비
- 딥러닝
- nodeJS
- Big Data
- No SQL
- Statistics
- 빅 데이타
- 김양재 목사
- Artificial Intelligence
- 빅데이터
- MongoDB
Archives
- Today
- Total
Scientific Computing & Data Science
[WebGL] PhysiJS Freefall 본문
이번 예제는 PhysiJS라는 Three.js 기반 물리엔진 프레임웍을 이용하여 오브젝트의 낙하 시뮬레이션에 관한 것입니다.
PhysiJS 웹사이트를 방문해 보면 PhysiJS에 대하여 다음과 같이 소개하고 있습니다: "Physics Plugin for Three.js"
Download Projects
Click here to view with full screen mode
Operations
Mouse Left Button Click & Drag: Camera Rotating
Mouse Wheel: Camera Zoom In & Out
Mouse Right Button Click & Drag: Camera Panning
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 | // standard global variables var container, scene, camera, renderer, controls, render_stats, physics_stats; var keyboard = new THREEx.KeyboardState(); var clock = new THREE.Clock(); // custom global variables var groundMaterial, ground; var boxMaterial, box; var ballMaterial, ball; var light Physijs.scripts.worker = 'physijs_worker.js'; Physijs.scripts.ammo = 'js/ammo.js'; init(); animate(); // FUNCTIONS function init() { // SCENE scene = new Physijs.Scene; scene.setGravity(new THREE.Vector3( 0, -100, 0 )); scene.addEventListener( 'update', function() { scene.simulate( undefined, 1 ); physics_stats.update(); } ); // CAMERA var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.set( 60, 50, 60 ); camera.lookAt( scene.position ); scene.add(camera); // RENDERER if ( Detector.webgl ) renderer = new THREE.WebGLRenderer( {antialias:true} ); else renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); renderer.shadowMapEnabled = true; renderer.shadowMapSoft = true; container = document.getElementById( 'ThreeJS' ); container.appendChild( renderer.domElement ); // EVENTS THREEx.WindowResize(renderer, camera); THREEx.FullScreen.bindKey({ charCode : 'f'.charCodeAt(0) }); // CONTROLS controls = new THREE.OrbitControls( camera, renderer.domElement ); // STATS - RENDERER render_stats = new Stats(); render_stats.domElement.style.position = 'absolute'; render_stats.domElement.style.top = '1px'; render_stats.domElement.style.zIndex = 100; container.appendChild( render_stats.domElement ); // STATS - PHYSICS physics_stats = new Stats(); physics_stats.domElement.style.position = 'absolute'; physics_stats.domElement.style.top = '50px'; physics_stats.domElement.style.zIndex = 100; container.appendChild( physics_stats.domElement ); // LIGHT light = new THREE.DirectionalLight( 0xFFFFFF ); light.position.set( 20, 40, -15 ); light.target.position.copy( scene.position ); light.castShadow = true; light.shadowCameraLeft = -120; light.shadowCameraTop = -120; light.shadowCameraRight = 120; light.shadowCameraBottom = 120; light.shadowCameraNear = 20; light.shadowCameraFar = 2000; light.shadowBias = -.0001 light.shadowMapWidth = light.shadowMapHeight = 2048; light.shadowDarkness = .7; scene.add( light ); // SKYBOX/FOG var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 ); var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.BackSide } ); var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial ); scene.add(skyBox); //////////// // CUSTOM // //////////// // GROUND groundMaterial = Physijs.createMaterial( new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'img/Wood_floor.jpg' ) }), .95, // high friction .95 // low restitution ); groundMaterial.map.wrapS = groundMaterial.map.wrapT = THREE.RepeatWrapping; groundMaterial.map.repeat.set( 1, 1 ); ground = new Physijs.BoxMesh( new THREE.CubeGeometry(100, 1, 100), groundMaterial, 0 // mass ); ground.receiveShadow = true; scene.add( ground ); // create boxes and place them in random position boxMaterial = Physijs.createMaterial( new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'img/plywood.jpg' ) }), .4, // low friction .6 // high restitution ); boxMaterial.map.wrapS = boxMaterial.map.wrapT = THREE.RepeatWrapping; boxMaterial.map.repeat.set( .25, .25 ); for ( var i = 0; i < 50; i++ ) { box = new Physijs.BoxMesh( new THREE.CubeGeometry( 4, 4, 4 ), boxMaterial ); box.position.set( Math.random() * 50 - 25, 100 + Math.random() * 50, Math.random() * 50 - 25 ); box.rotation.set( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2 ); box.scale.set( Math.random() * 1 + .5, Math.random() * 1 + .5, Math.random() * 1 + .5 ); box.castShadow = true; scene.add( box ); } // create balls and place them in random position ballMaterial = Physijs.createMaterial( new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'img/stone.jpg' ) }), .95, // low friction .95 // high restitution ); ballMaterial.map.wrapS = ballMaterial.map.wrapT = THREE.RepeatWrapping; ballMaterial.map.repeat.set( .25, .25 ); for ( var i = 0; i < 100; i++ ) { ball = new Physijs.SphereMesh( new THREE.SphereGeometry( 4, 30, 30 ), ballMaterial ); ball.position.set( Math.random() * 50 - 25, 100 + Math.random() * 50, Math.random() * 50 - 25 ); ball.rotation.set( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2 ); ball.castShadow = true; scene.add( ball ); } } function animate() { // SIMULATION scene.simulate(); requestAnimationFrame( animate ); render(); update(); } function update() { if ( keyboard.pressed("z") ) { // do something } render_stats.update(); physics_stats.update(); controls.update(); } function render() { renderer.render( scene, camera ); } | cs |
'Programming > WebGL(ThreeJS)' 카테고리의 다른 글
[WebGL] Leap Motion Controller 2 (0) | 2015.08.07 |
---|---|
[WebGL] Leap Motion 1 (0) | 2015.08.07 |
[WebGL] Collision Detection (0) | 2015.08.07 |
[WebGL] Viewport 4분할 (0) | 2015.08.07 |
[WebGL] Model Animation Control (0) | 2015.08.07 |
Comments