Working on web examples
Reorganizing folders Review examples Work on makefile and loader.html
This commit is contained in:
parent
8374460c39
commit
f7bebf9861
421 changed files with 103013 additions and 524979 deletions
99
docs/examples/web/models/models_billboard.c
Normal file
99
docs/examples/web/models/models_billboard.c
Normal file
|
@ -0,0 +1,99 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [models] example - Drawing billboards (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// Define the camera to look into our 3d world
|
||||
Camera camera = {{ 5.0f, 4.0f, 5.0f }, { 0.0f, 2.0f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
|
||||
|
||||
Texture2D bill; // Our texture billboard
|
||||
Vector3 billPosition = { 0.0f, 2.0f, 0.0f }; // Position where draw billboard
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [models] example - drawing billboards");
|
||||
|
||||
bill = LoadTexture("resources/billboard.png"); // Our texture billboard
|
||||
|
||||
SetCameraMode(camera, CAMERA_ORBITAL); // Set an orbital camera mode
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(bill); // Unload texture
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
UpdateCamera(&camera); // Update internal camera and our camera
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
Begin3dMode(camera);
|
||||
|
||||
DrawBillboard(camera, bill, billPosition, 2.0f, WHITE);
|
||||
|
||||
DrawGrid(10, 1.0f); // Draw a grid
|
||||
|
||||
End3dMode();
|
||||
|
||||
DrawFPS(10, 10);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
BIN
docs/examples/web/models/models_billboard.data
Normal file
BIN
docs/examples/web/models/models_billboard.data
Normal file
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
239
docs/examples/web/models/models_billboard.html
Normal file
239
docs/examples/web/models/models_billboard.html
Normal file
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="models_billboard.js"></script>
|
||||
</body>
|
||||
</html>
|
39972
docs/examples/web/models/models_billboard.js
Normal file
39972
docs/examples/web/models/models_billboard.js
Normal file
File diff suppressed because one or more lines are too long
152
docs/examples/web/models/models_box_collisions.c
Normal file
152
docs/examples/web/models/models_box_collisions.c
Normal file
|
@ -0,0 +1,152 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [models] example - Detect basic 3d collisions (box vs sphere vs box) (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
|
||||
// Define the camera to look into our 3d world
|
||||
Camera camera = {{ 0.0f, 10.0f, 10.0f }, { 0.0f, 0.0f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
|
||||
|
||||
Vector3 playerPosition = { 0.0f, 1.0f, 2.0f };
|
||||
Vector3 playerSize = { 1.0f, 2.0f, 1.0f };
|
||||
Color playerColor;
|
||||
|
||||
Vector3 enemyBoxPos = { -4.0f, 1.0f, 0.0f };
|
||||
Vector3 enemyBoxSize = { 2.0f, 2.0f, 2.0f };
|
||||
|
||||
Vector3 enemySpherePos = { 4.0f, 0.0f, 0.0f };
|
||||
float enemySphereSize = 1.5f;
|
||||
|
||||
bool collision = false;
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [models] example - box collisions");
|
||||
|
||||
playerColor = GREEN;
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Move player
|
||||
if (IsKeyDown(KEY_RIGHT)) playerPosition.x += 0.2f;
|
||||
else if (IsKeyDown(KEY_LEFT)) playerPosition.x -= 0.2f;
|
||||
else if (IsKeyDown(KEY_DOWN)) playerPosition.z += 0.2f;
|
||||
else if (IsKeyDown(KEY_UP)) playerPosition.z -= 0.2f;
|
||||
|
||||
collision = false;
|
||||
|
||||
// Check collisions player vs enemy-box
|
||||
if (CheckCollisionBoxes(
|
||||
(BoundingBox){(Vector3){ playerPosition.x - playerSize.x/2,
|
||||
playerPosition.y - playerSize.y/2,
|
||||
playerPosition.z - playerSize.z/2 },
|
||||
(Vector3){ playerPosition.x + playerSize.x/2,
|
||||
playerPosition.y + playerSize.y/2,
|
||||
playerPosition.z + playerSize.z/2 }},
|
||||
(BoundingBox){(Vector3){ enemyBoxPos.x - enemyBoxSize.x/2,
|
||||
enemyBoxPos.y - enemyBoxSize.y/2,
|
||||
enemyBoxPos.z - enemyBoxSize.z/2 },
|
||||
(Vector3){ enemyBoxPos.x + enemyBoxSize.x/2,
|
||||
enemyBoxPos.y + enemyBoxSize.y/2,
|
||||
enemyBoxPos.z + enemyBoxSize.z/2 }})) collision = true;
|
||||
|
||||
// Check collisions player vs enemy-sphere
|
||||
if (CheckCollisionBoxSphere(
|
||||
(BoundingBox){(Vector3){ playerPosition.x - playerSize.x/2,
|
||||
playerPosition.y - playerSize.y/2,
|
||||
playerPosition.z - playerSize.z/2 },
|
||||
(Vector3){ playerPosition.x + playerSize.x/2,
|
||||
playerPosition.y + playerSize.y/2,
|
||||
playerPosition.z + playerSize.z/2 }},
|
||||
enemySpherePos, enemySphereSize)) collision = true;
|
||||
|
||||
if (collision) playerColor = RED;
|
||||
else playerColor = GREEN;
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
Begin3dMode(camera);
|
||||
|
||||
// Draw enemy-box
|
||||
DrawCube(enemyBoxPos, enemyBoxSize.x, enemyBoxSize.y, enemyBoxSize.z, GRAY);
|
||||
DrawCubeWires(enemyBoxPos, enemyBoxSize.x, enemyBoxSize.y, enemyBoxSize.z, DARKGRAY);
|
||||
|
||||
// Draw enemy-sphere
|
||||
DrawSphere(enemySpherePos, enemySphereSize, GRAY);
|
||||
DrawSphereWires(enemySpherePos, enemySphereSize, 16, 16, DARKGRAY);
|
||||
|
||||
// Draw player
|
||||
DrawCubeV(playerPosition, playerSize, playerColor);
|
||||
|
||||
DrawGrid(10, 1.0f); // Draw a grid
|
||||
|
||||
End3dMode();
|
||||
|
||||
DrawText("Move player with cursors to collide", 220, 40, 20, GRAY);
|
||||
|
||||
DrawFPS(10, 10);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
}
|
239
docs/examples/web/models/models_box_collisions.html
Normal file
239
docs/examples/web/models/models_box_collisions.html
Normal file
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="models_box_collisions.js"></script>
|
||||
</body>
|
||||
</html>
|
25337
docs/examples/web/models/models_box_collisions.js
Normal file
25337
docs/examples/web/models/models_box_collisions.js
Normal file
File diff suppressed because one or more lines are too long
115
docs/examples/web/models/models_cubicmap.c
Normal file
115
docs/examples/web/models/models_cubicmap.c
Normal file
|
@ -0,0 +1,115 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [models] example - Cubicmap loading and drawing (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// Define the camera to look into our 3d world
|
||||
Camera camera = {{ 16.0f, 14.0f, 16.0f }, { 0.0f, 0.0f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
|
||||
|
||||
Texture2D cubicmap;
|
||||
Model map;
|
||||
|
||||
Vector3 mapPosition = { -16.0f, 0.0f, -8.0f }; // Set model position
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [models] example - cubesmap loading and drawing");
|
||||
|
||||
Image image = LoadImage("resources/cubicmap.png"); // Load cubicmap image (RAM)
|
||||
cubicmap = LoadTextureFromImage(image); // Convert image to texture to display (VRAM)
|
||||
map = LoadCubicmap(image); // Load cubicmap model (generate model from image)
|
||||
|
||||
// NOTE: By default each cube is mapped to one part of texture atlas
|
||||
Texture2D texture = LoadTexture("resources/cubicmap_atlas.png"); // Load map texture
|
||||
map.material.texDiffuse = texture; // Set map diffuse texture
|
||||
|
||||
UnloadImage(image); // Unload cubesmap image from RAM, already uploaded to VRAM
|
||||
|
||||
SetCameraMode(camera, CAMERA_ORBITAL); // Set an orbital camera mode
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(cubicmap); // Unload cubicmap texture
|
||||
UnloadTexture(texture); // Unload map texture
|
||||
UnloadModel(map); // Unload map model
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
UpdateCamera(&camera); // Update internal camera and our camera
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
Begin3dMode(camera);
|
||||
|
||||
DrawModel(map, mapPosition, 1.0f, WHITE);
|
||||
|
||||
End3dMode();
|
||||
|
||||
DrawTextureEx(cubicmap, (Vector2){ screenWidth - cubicmap.width*4 - 20, 20 }, 0.0f, 4.0f, WHITE);
|
||||
DrawRectangleLines(screenWidth - cubicmap.width*4 - 20, 20, cubicmap.width*4, cubicmap.height*4, GREEN);
|
||||
|
||||
DrawText("cubicmap image used to", 658, 90, 10, GRAY);
|
||||
DrawText("generate map 3d model", 658, 104, 10, GRAY);
|
||||
|
||||
DrawFPS(10, 10);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
BIN
docs/examples/web/models/models_cubicmap.data
Normal file
BIN
docs/examples/web/models/models_cubicmap.data
Normal file
Binary file not shown.
After Width: | Height: | Size: 36 KiB |
239
docs/examples/web/models/models_cubicmap.html
Normal file
239
docs/examples/web/models/models_cubicmap.html
Normal file
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="models_cubicmap.js"></script>
|
||||
</body>
|
||||
</html>
|
42254
docs/examples/web/models/models_cubicmap.js
Normal file
42254
docs/examples/web/models/models_cubicmap.js
Normal file
File diff suppressed because one or more lines are too long
102
docs/examples/web/models/models_geometric_shapes.c
Normal file
102
docs/examples/web/models/models_geometric_shapes.c
Normal file
|
@ -0,0 +1,102 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [models] example - Draw some basic geometric shapes (cube, sphere, cylinder...) (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.0 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2014 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// Define the camera to look into our 3d world
|
||||
Camera camera = {{ 0.0f, 10.0f, 10.0f }, { 0.0f, 0.0f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [models] example - geometric shapes");
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
Begin3dMode(camera);
|
||||
|
||||
DrawCube((Vector3){-4.0f, 0.0f, 2.0f}, 2.0f, 5.0f, 2.0f, RED);
|
||||
DrawCubeWires((Vector3){-4.0f, 0.0f, 2.0f}, 2.0f, 5.0f, 2.0f, GOLD);
|
||||
DrawCubeWires((Vector3){-4.0f, 0.0f, -2.0f}, 3.0f, 6.0f, 2.0f, MAROON);
|
||||
|
||||
DrawSphere((Vector3){-1.0f, 0.0f, -2.0f}, 1.0f, GREEN);
|
||||
DrawSphereWires((Vector3){1.0f, 0.0f, 2.0f}, 2.0f, 16, 16, LIME);
|
||||
|
||||
DrawCylinder((Vector3){4.0f, 0.0f, -2.0f}, 1.0f, 2.0f, 3.0f, 4, SKYBLUE);
|
||||
DrawCylinderWires((Vector3){4.0f, 0.0f, -2.0f}, 1.0f, 2.0f, 3.0f, 4, DARKBLUE);
|
||||
DrawCylinderWires((Vector3){4.5f, -1.0f, 2.0f}, 1.0f, 1.0f, 2.0f, 6, BROWN);
|
||||
|
||||
DrawCylinder((Vector3){1.0f, 0.0f, -4.0f}, 0.0f, 1.5f, 3.0f, 8, GOLD);
|
||||
DrawCylinderWires((Vector3){1.0f, 0.0f, -4.0f}, 0.0f, 1.5f, 3.0f, 8, PINK);
|
||||
|
||||
DrawGrid(10, 1.0f); // Draw a grid
|
||||
|
||||
End3dMode();
|
||||
|
||||
DrawFPS(10, 10);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
239
docs/examples/web/models/models_geometric_shapes.html
Normal file
239
docs/examples/web/models/models_geometric_shapes.html
Normal file
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="models_geometric_shapes.js"></script>
|
||||
</body>
|
||||
</html>
|
25324
docs/examples/web/models/models_geometric_shapes.js
Normal file
25324
docs/examples/web/models/models_geometric_shapes.js
Normal file
File diff suppressed because one or more lines are too long
111
docs/examples/web/models/models_heightmap.c
Normal file
111
docs/examples/web/models/models_heightmap.c
Normal file
|
@ -0,0 +1,111 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [models] example - Heightmap loading and drawing (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// Define our custom camera to look into our 3d world
|
||||
Camera camera = {{ 18.0f, 16.0f, 18.0f }, { 0.0f, 0.0f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
|
||||
|
||||
Texture2D texture;
|
||||
Model map;
|
||||
|
||||
Vector3 mapPosition = { -8.0f, 0.0f, -8.0f }; // Set model position (depends on model scaling!)
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [models] example - heightmap loading and drawing");
|
||||
|
||||
Image image = LoadImage("resources/heightmap.png"); // Load heightmap image (RAM)
|
||||
texture = LoadTextureFromImage(image); // Convert image to texture (VRAM)
|
||||
map = LoadHeightmap(image, (Vector3){ 16, 8, 16 }); // Load heightmap model with defined size
|
||||
map.material.texDiffuse = texture; // Set map diffuse texture
|
||||
|
||||
UnloadImage(image); // Unload heightmap image from RAM, already uploaded to VRAM
|
||||
|
||||
SetCameraMode(camera, CAMERA_ORBITAL); // Set an orbital camera mode
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(texture); // Unload texture
|
||||
UnloadModel(map); // Unload model
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
UpdateCamera(&camera); // Update internal camera and our camera
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
Begin3dMode(camera);
|
||||
|
||||
// NOTE: Model is scaled to 1/4 of its original size (128x128 units)
|
||||
DrawModel(map, mapPosition, 1.0f, RED);
|
||||
|
||||
DrawGrid(20, 1.0f);
|
||||
|
||||
End3dMode();
|
||||
|
||||
DrawTexture(texture, screenWidth - texture.width - 20, 20, WHITE);
|
||||
DrawRectangleLines(screenWidth - texture.width - 20, 20, texture.width, texture.height, GREEN);
|
||||
|
||||
DrawFPS(10, 10);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
BIN
docs/examples/web/models/models_heightmap.data
Normal file
BIN
docs/examples/web/models/models_heightmap.data
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
239
docs/examples/web/models/models_heightmap.html
Normal file
239
docs/examples/web/models/models_heightmap.html
Normal file
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="models_heightmap.js"></script>
|
||||
</body>
|
||||
</html>
|
41460
docs/examples/web/models/models_heightmap.js
Normal file
41460
docs/examples/web/models/models_heightmap.js
Normal file
File diff suppressed because one or more lines are too long
106
docs/examples/web/models/models_obj_loading.c
Normal file
106
docs/examples/web/models/models_obj_loading.c
Normal file
|
@ -0,0 +1,106 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [models] example - Load and draw a 3d model (OBJ) (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2014 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// Define the camera to look into our 3d world
|
||||
Camera camera = {{ 3.0f, 3.0f, 3.0f }, { 0.0f, 1.5f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
|
||||
|
||||
Model dwarf; // Declare OBJ model
|
||||
Texture2D texture; // Declare model texture
|
||||
|
||||
Vector3 position = { 0.0f, 0.0f, 0.0f }; // Define model position
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [models] example - obj model loading");
|
||||
|
||||
dwarf = LoadModel("resources/model/dwarf.obj"); // Load OBJ model
|
||||
texture = LoadTexture("resources/model/dwarf_diffuse.png"); // Load model texture
|
||||
dwarf.material.texDiffuse = texture; // Set dwarf model diffuse texture
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(texture); // Unload texture
|
||||
UnloadModel(dwarf); // Unload model
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
//...
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
Begin3dMode(camera);
|
||||
|
||||
DrawModel(dwarf, position, 2.0f, WHITE); // Draw 3d model with texture
|
||||
|
||||
DrawGrid(10, 1.0f); // Draw a grid
|
||||
|
||||
DrawGizmo(position); // Draw gizmo
|
||||
|
||||
End3dMode();
|
||||
|
||||
DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, GRAY);
|
||||
|
||||
DrawFPS(10, 10);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
60390
docs/examples/web/models/models_obj_loading.data
Normal file
60390
docs/examples/web/models/models_obj_loading.data
Normal file
File diff suppressed because it is too large
Load diff
239
docs/examples/web/models/models_obj_loading.html
Normal file
239
docs/examples/web/models/models_obj_loading.html
Normal file
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="models_obj_loading.js"></script>
|
||||
</body>
|
||||
</html>
|
45249
docs/examples/web/models/models_obj_loading.js
Normal file
45249
docs/examples/web/models/models_obj_loading.js
Normal file
File diff suppressed because one or more lines are too long
239
docs/examples/web/models/models_ray_picking.c
Normal file
239
docs/examples/web/models/models_ray_picking.c
Normal file
|
@ -0,0 +1,239 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [models] example - Ray picking in 3d mode, ground plane, triangle, mesh
|
||||
*
|
||||
* This example has been created using raylib 1.7 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
* Example contributed by Joel Davis (@joeld42)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
#include "raymath.h"
|
||||
|
||||
#include <stdio.h>
|
||||
#include <float.h>
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
const int screenWidth = 800;
|
||||
const int screenHeight = 450;
|
||||
|
||||
Camera camera;
|
||||
|
||||
Vector3 cubePosition = { 0.0f, 1.0f, 0.0f };
|
||||
Vector3 cubeSize = { 2.0f, 2.0f, 2.0f };
|
||||
|
||||
Ray ray; // Picking line ray
|
||||
|
||||
Model tower;
|
||||
Texture2D texture;
|
||||
|
||||
Vector3 towerPos = { 0.0f, 0.0f, 0.0f };
|
||||
BoundingBox towerBBox;
|
||||
bool hitMeshBBox = false;
|
||||
bool hitTriangle = false;
|
||||
|
||||
// Test triangle
|
||||
Vector3 ta = (Vector3){ -25.0, 0.5, 0.0 };
|
||||
Vector3 tb = (Vector3){ -4.0, 2.5, 1.0 };
|
||||
Vector3 tc = (Vector3){ -8.0, 6.5, 0.0 };
|
||||
|
||||
Vector3 bary = { 0.0f, 0.0f, 0.0f };
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
InitWindow(screenWidth, screenHeight, "raylib [models] example - 3d ray picking");
|
||||
|
||||
// Define the camera to look into our 3d world
|
||||
camera.position = (Vector3){ 10.0f, 8.0f, 10.0f }; // Camera position
|
||||
camera.target = (Vector3){ 0.0f, 2.3f, 0.0f }; // Camera looking at point
|
||||
camera.up = (Vector3){ 0.0f, 1.6f, 0.0f }; // Camera up vector (rotation towards target)
|
||||
camera.fovy = 45.0f; // Camera field-of-view Y
|
||||
|
||||
tower = LoadModel("resources/tower.obj"); // Load OBJ model
|
||||
texture = LoadTexture("resources/tower.png"); // Load model texture
|
||||
tower.material.texDiffuse = texture; // Set model diffuse texture
|
||||
|
||||
towerBBox = CalculateBoundingBox(tower.mesh);
|
||||
|
||||
SetCameraMode(camera, CAMERA_FREE); // Set a free camera mode
|
||||
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadModel(tower); // Unload model from GPU
|
||||
UnloadTexture(texture); // Unload texture from GPU
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
UpdateCamera(&camera); // Update camera
|
||||
|
||||
// Display information about closest hit
|
||||
RayHitInfo nearestHit;
|
||||
char *hitObjectName = "None";
|
||||
nearestHit.distance = FLT_MAX;
|
||||
nearestHit.hit = false;
|
||||
Color cursorColor = WHITE;
|
||||
|
||||
// Get ray and test against ground, triangle, and mesh
|
||||
ray = GetMouseRay(GetMousePosition(), camera);
|
||||
|
||||
// Check ray collision aginst ground plane
|
||||
RayHitInfo groundHitInfo = GetCollisionRayGround(ray, 0.0f);
|
||||
|
||||
if ((groundHitInfo.hit) && (groundHitInfo.distance < nearestHit.distance))
|
||||
{
|
||||
nearestHit = groundHitInfo;
|
||||
cursorColor = GREEN;
|
||||
hitObjectName = "Ground";
|
||||
}
|
||||
|
||||
// Check ray collision against test triangle
|
||||
RayHitInfo triHitInfo = GetCollisionRayTriangle(ray, ta, tb, tc);
|
||||
|
||||
if ((triHitInfo.hit) && (triHitInfo.distance < nearestHit.distance))
|
||||
{
|
||||
nearestHit = triHitInfo;
|
||||
cursorColor = PURPLE;
|
||||
hitObjectName = "Triangle";
|
||||
|
||||
bary = Barycenter(nearestHit.hitPosition, ta, tb, tc);
|
||||
hitTriangle = true;
|
||||
}
|
||||
else hitTriangle = false;
|
||||
|
||||
RayHitInfo meshHitInfo;
|
||||
|
||||
// Check ray collision against bounding box first, before trying the full ray-mesh test
|
||||
if (CheckCollisionRayBox(ray, towerBBox))
|
||||
{
|
||||
hitMeshBBox = true;
|
||||
|
||||
// Check ray collision against mesh
|
||||
meshHitInfo = GetCollisionRayMesh(ray, &tower.mesh);
|
||||
|
||||
if ((meshHitInfo.hit) && (meshHitInfo.distance < nearestHit.distance))
|
||||
{
|
||||
nearestHit = meshHitInfo;
|
||||
cursorColor = ORANGE;
|
||||
hitObjectName = "Mesh";
|
||||
}
|
||||
|
||||
} hitMeshBBox = false;
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
Begin3dMode(camera);
|
||||
|
||||
// Draw the tower
|
||||
DrawModel(tower, towerPos, 1.0, WHITE);
|
||||
|
||||
// Draw the test triangle
|
||||
DrawLine3D(ta, tb, PURPLE);
|
||||
DrawLine3D(tb, tc, PURPLE);
|
||||
DrawLine3D(tc, ta, PURPLE);
|
||||
|
||||
// Draw the mesh bbox if we hit it
|
||||
if (hitMeshBBox) DrawBoundingBox(towerBBox, LIME);
|
||||
|
||||
// If we hit something, draw the cursor at the hit point
|
||||
if (nearestHit.hit)
|
||||
{
|
||||
DrawCube(nearestHit.hitPosition, 0.5, 0.5, 0.5, cursorColor);
|
||||
DrawCubeWires(nearestHit.hitPosition, 0.5, 0.5, 0.5, YELLOW);
|
||||
|
||||
Vector3 normalEnd;
|
||||
normalEnd.x = nearestHit.hitPosition.x + nearestHit.hitNormal.x;
|
||||
normalEnd.y = nearestHit.hitPosition.y + nearestHit.hitNormal.y;
|
||||
normalEnd.z = nearestHit.hitPosition.z + nearestHit.hitNormal.z;
|
||||
|
||||
DrawLine3D(nearestHit.hitPosition, normalEnd, YELLOW);
|
||||
}
|
||||
|
||||
DrawRay(ray, MAROON);
|
||||
|
||||
DrawGrid(100, 1.0f);
|
||||
|
||||
End3dMode();
|
||||
|
||||
// Draw some debug GUI text
|
||||
DrawText(FormatText("Hit Object: %s", hitObjectName), 10, 50, 10, BLACK);
|
||||
|
||||
if (nearestHit.hit)
|
||||
{
|
||||
int ypos = 70;
|
||||
|
||||
DrawText(FormatText("Distance: %3.2f", nearestHit.distance), 10, ypos, 10, BLACK);
|
||||
|
||||
DrawText(FormatText("Hit Pos: %3.2f %3.2f %3.2f",
|
||||
nearestHit.hitPosition.x,
|
||||
nearestHit.hitPosition.y,
|
||||
nearestHit.hitPosition.z), 10, ypos + 15, 10, BLACK);
|
||||
|
||||
DrawText(FormatText("Hit Norm: %3.2f %3.2f %3.2f",
|
||||
nearestHit.hitNormal.x,
|
||||
nearestHit.hitNormal.y,
|
||||
nearestHit.hitNormal.z), 10, ypos + 30, 10, BLACK);
|
||||
|
||||
if (hitTriangle) DrawText(FormatText("Barycenter: %3.2f %3.2f %3.2f", bary.x, bary.y, bary.z), 10, ypos + 45, 10, BLACK);
|
||||
}
|
||||
|
||||
DrawText("Use Mouse to Move Camera", 10, 430, 10, GRAY);
|
||||
|
||||
DrawFPS(10, 10);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
554
docs/examples/web/models/models_ray_picking.data
Normal file
554
docs/examples/web/models/models_ray_picking.data
Normal file
|
@ -0,0 +1,554 @@
|
|||
# Blender v2.78 (sub 0) OBJ File: 'lowpoly-tower.blend'
|
||||
# www.blender.org
|
||||
o Grid
|
||||
v -4.000000 0.000000 4.000000
|
||||
v -2.327363 0.000000 4.654725
|
||||
v 0.000000 0.000000 4.654725
|
||||
v 2.327363 0.000000 4.654725
|
||||
v 4.000000 0.000000 4.000000
|
||||
v -4.654725 0.955085 2.327363
|
||||
v -2.000000 0.815050 2.000000
|
||||
v 0.000000 0.476341 2.423448
|
||||
v 2.000000 0.476341 2.000000
|
||||
v 4.654725 0.000000 2.327363
|
||||
v -4.654725 1.649076 0.000000
|
||||
v -2.423448 1.092402 0.000000
|
||||
v 2.423448 0.198579 0.000000
|
||||
v 4.654725 0.000000 0.000000
|
||||
v -4.654725 1.649076 -2.327363
|
||||
v -2.000000 1.092402 -2.000000
|
||||
v 0.000000 0.476341 -2.423448
|
||||
v 2.000000 -0.012791 -2.000000
|
||||
v 4.654725 0.000000 -2.612731
|
||||
v -4.000000 0.955085 -4.000000
|
||||
v -2.327363 0.955085 -4.654725
|
||||
v 0.000000 0.955085 -4.654725
|
||||
v 2.327363 0.000000 -4.654725
|
||||
v 4.000000 0.000000 -4.000000
|
||||
v 2.423448 0.682825 0.000000
|
||||
v 2.000000 0.565423 -2.000000
|
||||
v -4.654725 -0.020560 2.327363
|
||||
v -4.654725 0.000000 0.000000
|
||||
v -4.654725 0.000000 -2.327363
|
||||
v -4.000000 0.000000 -4.000000
|
||||
v -2.327363 0.000000 -4.654725
|
||||
v 0.000000 -0.020560 -4.654725
|
||||
v 0.000000 0.709880 -1.230535
|
||||
v -0.000000 7.395413 0.000000
|
||||
v 0.962071 0.709880 -0.767226
|
||||
v -0.533909 0.709880 1.108674
|
||||
v -1.199683 0.709880 0.273820
|
||||
v -0.962071 0.709880 -0.767226
|
||||
v 1.506076 0.859071 1.325337
|
||||
v 1.199683 0.709880 0.273820
|
||||
v 0.533909 0.709880 1.108674
|
||||
v 0.000000 1.875340 -1.177842
|
||||
v -0.000000 2.293973 -0.649884
|
||||
v -0.000000 4.365648 -0.627970
|
||||
v 0.000000 6.167194 -0.942957
|
||||
v 0.000000 6.232434 -1.708677
|
||||
v 1.335898 6.232434 -1.065343
|
||||
v 0.737233 6.167195 -0.587924
|
||||
v 0.490966 4.365648 -0.391533
|
||||
v 0.508100 2.293973 -0.405196
|
||||
v 0.920874 1.875340 -0.734372
|
||||
v -0.741367 6.232434 1.539465
|
||||
v -0.409133 6.167195 0.849574
|
||||
v -0.272466 4.365648 0.565781
|
||||
v -0.281974 2.293973 0.585526
|
||||
v -0.511047 1.875340 1.061199
|
||||
v -1.665837 6.232434 0.380217
|
||||
v -0.919314 6.167195 0.209828
|
||||
v -0.612225 4.365648 0.139736
|
||||
v -0.633590 2.293973 0.144613
|
||||
v -1.148311 1.875340 0.262095
|
||||
v -1.335898 6.232434 -1.065343
|
||||
v -0.737233 6.167195 -0.587924
|
||||
v -0.490967 4.365648 -0.391533
|
||||
v -0.508100 2.293973 -0.405196
|
||||
v -0.920874 1.875340 -0.734372
|
||||
v 1.665837 6.232434 0.380216
|
||||
v 0.919315 6.167195 0.209828
|
||||
v 0.612225 4.365648 0.139736
|
||||
v 0.633590 2.293973 0.144613
|
||||
v 1.148311 1.875340 0.262095
|
||||
v 0.741367 6.232434 1.539465
|
||||
v 0.409133 6.167195 0.849575
|
||||
v 0.272466 4.365648 0.565781
|
||||
v 0.281974 2.293973 0.585526
|
||||
v 0.511046 1.875340 1.061199
|
||||
v 0.000000 5.012550 -0.969733
|
||||
v 0.758168 5.012550 -0.604618
|
||||
v -0.420751 5.012550 0.873699
|
||||
v -0.945419 5.012550 0.215786
|
||||
v -0.758168 5.012550 -0.604618
|
||||
v 0.945419 5.012550 0.215786
|
||||
v 0.420751 5.012550 0.873699
|
||||
vt 0.0523 0.5444
|
||||
vt 0.1817 0.4284
|
||||
vt 0.1641 0.5859
|
||||
vt 0.0177 0.4451
|
||||
vt 0.1526 0.3090
|
||||
vt 0.0189 0.1737
|
||||
vt 0.0188 0.3088
|
||||
vt 0.0561 0.0762
|
||||
vt 0.1757 0.1924
|
||||
vt 0.3024 0.4534
|
||||
vt 0.3071 0.5902
|
||||
vt 0.3413 0.2459
|
||||
vt 0.2906 0.1614
|
||||
vt 0.4116 0.1801
|
||||
vt 0.2834 0.3774
|
||||
vt 0.1526 0.0362
|
||||
vt 0.2917 0.1622
|
||||
vt 0.4446 0.5865
|
||||
vt 0.4443 0.2989
|
||||
vt 0.3711 0.3021
|
||||
vt 0.4396 0.0275
|
||||
vt 0.4094 0.1829
|
||||
vt 0.4219 0.4255
|
||||
vt 0.5474 0.5381
|
||||
vt 0.5811 0.4376
|
||||
vt 0.5715 0.1505
|
||||
vt 0.5811 0.2997
|
||||
vt 0.5272 0.0533
|
||||
vt 0.2208 0.2194
|
||||
vt 0.3456 0.3610
|
||||
vt 0.2878 0.0321
|
||||
vt 0.2321 0.3392
|
||||
vt 0.4432 0.0177
|
||||
vt 0.7347 0.7934
|
||||
vt 0.7382 0.7595
|
||||
vt 0.8982 0.7768
|
||||
vt 0.6169 0.7595
|
||||
vt 0.6139 0.7879
|
||||
vt 0.4951 0.7634
|
||||
vt 0.1551 0.6832
|
||||
vt 0.2925 0.6268
|
||||
vt 0.2925 0.6832
|
||||
vt 0.7795 0.6832
|
||||
vt 0.6421 0.6268
|
||||
vt 0.7795 0.6255
|
||||
vt 0.5046 0.7241
|
||||
vt 0.6421 0.7241
|
||||
vt 0.3986 0.6268
|
||||
vt 0.3986 0.6832
|
||||
vt 0.5046 0.6268
|
||||
vt 0.0177 0.6268
|
||||
vt 0.1551 0.6255
|
||||
vt 0.8856 0.6268
|
||||
vt 0.1899 0.9579
|
||||
vt 0.1194 0.8696
|
||||
vt 0.2324 0.8696
|
||||
vt 0.1899 0.7813
|
||||
vt 0.0943 0.7595
|
||||
vt 0.0177 0.8206
|
||||
vt 0.0177 0.9186
|
||||
vt 0.0943 0.9797
|
||||
vt 0.2793 0.2349
|
||||
vt 0.2304 0.2758
|
||||
vt 0.6597 0.0177
|
||||
vt 0.6954 0.0993
|
||||
vt 0.6367 0.0768
|
||||
vt 0.7558 0.0777
|
||||
vt 0.7238 0.0440
|
||||
vt 0.8840 0.1330
|
||||
vt 0.7385 0.1141
|
||||
vt 0.9157 0.0886
|
||||
vt 0.9781 0.1232
|
||||
vt 0.9224 0.1276
|
||||
vt 0.2677 0.8141
|
||||
vt 0.3463 0.8037
|
||||
vt 0.3086 0.8339
|
||||
vt 0.6387 0.3550
|
||||
vt 0.7130 0.3801
|
||||
vt 0.6596 0.4053
|
||||
vt 0.7245 0.3245
|
||||
vt 0.6919 0.3383
|
||||
vt 0.8655 0.3566
|
||||
vt 0.7351 0.3577
|
||||
vt 0.9770 0.3365
|
||||
vt 0.9078 0.3751
|
||||
vt 0.9174 0.3282
|
||||
vt 0.2677 0.9018
|
||||
vt 0.3086 0.8821
|
||||
vt 0.6803 0.2948
|
||||
vt 0.6251 0.3035
|
||||
vt 0.7194 0.2854
|
||||
vt 0.8764 0.2832
|
||||
vt 0.9221 0.2861
|
||||
vt 0.3363 0.9565
|
||||
vt 0.3464 0.9122
|
||||
vt 0.6751 0.2482
|
||||
vt 0.6178 0.2499
|
||||
vt 0.7179 0.2431
|
||||
vt 0.9823 0.2484
|
||||
vt 0.9247 0.2452
|
||||
vt 0.3935 0.9014
|
||||
vt 0.6755 0.1996
|
||||
vt 0.6164 0.1941
|
||||
vt 0.7201 0.1992
|
||||
vt 0.8793 0.2446
|
||||
vt 0.9823 0.2060
|
||||
vt 0.9257 0.2051
|
||||
vt 0.4598 0.8580
|
||||
vt 0.4144 0.8579
|
||||
vt 0.6819 0.1498
|
||||
vt 0.6222 0.1361
|
||||
vt 0.7266 0.1555
|
||||
vt 0.8831 0.1684
|
||||
vt 0.9252 0.1659
|
||||
vt 0.4218 0.7790
|
||||
vt 0.3934 0.8145
|
||||
vt 0.3363 0.7595
|
||||
vt 0.8815 0.2060
|
||||
vt 0.8720 0.3208
|
||||
vt 0.8825 0.1012
|
||||
vt 0.9735 0.0816
|
||||
vt 0.9718 0.3817
|
||||
vt 0.9807 0.2918
|
||||
vt 0.4218 0.9370
|
||||
vt 0.9810 0.1644
|
||||
vn 0.1035 0.8806 0.4623
|
||||
vn 0.0964 0.9481 0.3030
|
||||
vn 0.0000 0.9780 0.2088
|
||||
vn 0.0659 0.9835 0.1683
|
||||
vn 0.2325 0.9320 0.2779
|
||||
vn 0.0553 0.9960 -0.0702
|
||||
vn 0.2827 0.9564 0.0728
|
||||
vn 0.1873 0.9776 -0.0961
|
||||
vn 0.2421 0.9703 0.0000
|
||||
vn 0.0921 0.9772 -0.1913
|
||||
vn -0.0277 0.9947 -0.0993
|
||||
vn 0.2308 0.9274 -0.2944
|
||||
vn 0.2771 0.9572 -0.0837
|
||||
vn 0.3724 0.9074 0.1947
|
||||
vn 0.0777 0.9770 -0.1985
|
||||
vn -0.1094 0.9539 0.2794
|
||||
vn 0.0364 0.9844 0.1721
|
||||
vn 0.1683 0.9835 0.0659
|
||||
vn 0.0674 0.9901 0.1230
|
||||
vn 0.4338 0.8823 0.1829
|
||||
vn 0.2845 0.9565 0.0649
|
||||
vn 0.0886 0.9961 0.0000
|
||||
vn 0.2000 0.9789 0.0424
|
||||
vn 0.1417 0.9830 0.1171
|
||||
vn 0.3021 0.9524 0.0412
|
||||
vn -0.0193 0.9986 -0.0493
|
||||
vn 0.0000 0.9777 0.2098
|
||||
vn 0.0005 0.9781 -0.2083
|
||||
vn 0.1879 0.9782 -0.0887
|
||||
vn 0.2249 0.0000 0.9744
|
||||
vn 0.9783 0.0000 -0.2071
|
||||
vn 0.9783 0.0000 0.2071
|
||||
vn 0.0000 0.0000 -1.0000
|
||||
vn -1.0000 0.0000 0.0000
|
||||
vn -0.3645 0.0000 -0.9312
|
||||
vn -0.9312 0.0000 -0.3645
|
||||
vn -0.9312 0.0000 0.3645
|
||||
vn 0.2615 0.7979 -0.5431
|
||||
vn 0.5877 0.7979 -0.1341
|
||||
vn 0.4713 0.7979 0.3758
|
||||
vn -0.0000 0.7979 0.6028
|
||||
vn -0.4713 0.7979 0.3758
|
||||
vn -0.5877 0.7979 -0.1341
|
||||
vn -0.2615 0.7979 -0.5431
|
||||
vn -0.1285 0.9864 -0.1025
|
||||
vn 0.0929 0.8937 0.4389
|
||||
vn -0.4335 0.0407 -0.9002
|
||||
vn -0.2867 0.7507 -0.5952
|
||||
vn -0.4339 0.0095 -0.9009
|
||||
vn -0.4338 0.0209 -0.9008
|
||||
vn -0.0408 -0.9956 -0.0848
|
||||
vn -0.9741 0.0407 -0.2223
|
||||
vn -0.6441 0.7507 -0.1470
|
||||
vn -0.9749 0.0095 -0.2225
|
||||
vn -0.9747 0.0209 -0.2225
|
||||
vn -0.0918 -0.9956 -0.0209
|
||||
vn -0.7812 0.0407 0.6230
|
||||
vn -0.5165 0.7507 0.4119
|
||||
vn -0.7818 0.0095 0.6235
|
||||
vn -0.7817 0.0209 0.6234
|
||||
vn -0.0736 -0.9956 0.0587
|
||||
vn -0.0000 0.0407 0.9992
|
||||
vn 0.0000 0.7507 0.6607
|
||||
vn 0.0000 0.0095 1.0000
|
||||
vn -0.0000 0.0209 0.9998
|
||||
vn -0.0000 -0.9956 0.0941
|
||||
vn 0.7812 0.0407 0.6230
|
||||
vn 0.5165 0.7507 0.4119
|
||||
vn 0.7818 0.0095 0.6235
|
||||
vn 0.7817 0.0209 0.6234
|
||||
vn 0.0736 -0.9956 0.0587
|
||||
vn 0.9741 0.0407 -0.2223
|
||||
vn 0.6441 0.7507 -0.1470
|
||||
vn 0.9749 0.0095 -0.2225
|
||||
vn 0.9747 0.0209 -0.2225
|
||||
vn 0.0918 -0.9956 -0.0209
|
||||
vn 0.4335 0.0407 -0.9002
|
||||
vn 0.2867 0.7507 -0.5952
|
||||
vn 0.4339 0.0095 -0.9009
|
||||
vn 0.4338 0.0209 -0.9008
|
||||
vn 0.0408 -0.9956 -0.0848
|
||||
vn 0.3918 -0.4298 -0.8135
|
||||
vn 0.8803 -0.4298 -0.2009
|
||||
vn 0.7059 -0.4298 0.5630
|
||||
vn -0.0000 -0.4298 0.9029
|
||||
vn -0.7059 -0.4298 0.5630
|
||||
vn -0.8803 -0.4298 -0.2009
|
||||
vn -0.3918 -0.4298 -0.8135
|
||||
vn 0.0210 0.9998 -0.0048
|
||||
vn 0.0482 0.9981 -0.0385
|
||||
vn -0.0166 0.9914 -0.1301
|
||||
vn -0.0090 0.9904 -0.1379
|
||||
vn 0.2820 0.9576 0.0597
|
||||
vn -0.0000 0.9846 0.1749
|
||||
vn -0.0921 0.9772 -0.1913
|
||||
vn -0.1734 0.9794 0.1036
|
||||
s off
|
||||
f 1/1/1 7/2/1 6/3/1
|
||||
f 2/4/2 8/5/2 7/2/2
|
||||
f 4/6/3 8/5/3 3/7/3
|
||||
f 5/8/4 9/9/4 4/6/4
|
||||
f 6/3/5 12/10/5 11/11/5
|
||||
f 35/12/6 25/13/6 26/14/6
|
||||
f 7/2/7 37/15/7 12/10/7
|
||||
f 10/16/8 13/17/8 9/9/8
|
||||
f 12/10/9 15/18/9 11/11/9
|
||||
f 35/12/10 17/19/10 33/20/10
|
||||
f 13/17/11 19/21/11 18/22/11
|
||||
f 16/23/12 20/24/12 15/18/12
|
||||
f 17/19/13 21/25/13 16/23/13
|
||||
f 17/19/14 23/26/14 22/27/14
|
||||
f 26/14/15 24/28/15 23/26/15
|
||||
f 1/1/16 2/4/16 7/2/16
|
||||
f 2/4/3 3/7/3 8/5/3
|
||||
f 4/6/17 9/9/17 8/5/17
|
||||
f 5/8/18 10/16/18 9/9/18
|
||||
f 6/3/19 7/2/19 12/10/19
|
||||
f 25/13/20 39/29/20 9/9/20
|
||||
f 38/30/21 12/10/21 37/15/21
|
||||
f 10/16/22 14/31/22 13/17/22
|
||||
f 12/10/23 16/23/23 15/18/23
|
||||
f 8/5/24 36/32/24 7/2/24
|
||||
f 38/30/25 17/19/25 16/23/25
|
||||
f 13/17/22 14/31/22 19/21/22
|
||||
f 16/23/26 21/25/26 20/24/26
|
||||
f 17/19/27 22/27/27 21/25/27
|
||||
f 17/19/28 26/14/28 23/26/28
|
||||
f 26/14/29 19/33/29 24/28/29
|
||||
f 26/34/30 18/35/30 19/36/30
|
||||
f 26/34/31 13/37/31 18/35/31
|
||||
f 25/38/32 9/39/32 13/37/32
|
||||
f 22/40/33 31/41/33 21/42/33
|
||||
f 6/43/34 28/44/34 27/45/34
|
||||
f 15/46/34 28/44/34 11/47/34
|
||||
f 21/42/35 30/48/35 20/49/35
|
||||
f 20/49/36 29/50/36 15/46/36
|
||||
f 22/40/33 23/51/33 32/52/33
|
||||
f 6/43/37 27/45/37 1/53/37
|
||||
f 46/54/38 34/55/38 47/56/38
|
||||
f 47/56/39 34/55/39 67/57/39
|
||||
f 67/57/40 34/55/40 72/58/40
|
||||
f 72/58/41 34/55/41 52/59/41
|
||||
f 52/59/42 34/55/42 57/60/42
|
||||
f 57/60/43 34/55/43 62/61/43
|
||||
f 62/61/44 34/55/44 46/54/44
|
||||
f 40/62/45 41/63/45 39/29/45
|
||||
f 39/29/46 8/5/46 9/9/46
|
||||
f 38/64/47 42/65/47 33/66/47
|
||||
f 65/67/48 42/65/48 66/68/48
|
||||
f 65/67/49 44/69/49 43/70/49
|
||||
f 81/71/50 45/72/50 77/73/50
|
||||
f 62/74/51 45/75/51 63/76/51
|
||||
f 37/77/52 66/78/52 38/79/52
|
||||
f 60/80/53 66/78/53 61/81/53
|
||||
f 60/80/54 64/82/54 65/83/54
|
||||
f 58/84/55 81/85/55 80/86/55
|
||||
f 57/87/56 63/76/56 58/88/56
|
||||
f 56/89/57 37/77/57 36/90/57
|
||||
f 55/91/58 61/81/58 56/89/58
|
||||
f 54/92/59 60/80/59 55/91/59
|
||||
f 79/93/60 58/84/60 80/86/60
|
||||
f 52/94/61 58/88/61 53/95/61
|
||||
f 76/96/62 36/90/62 41/97/62
|
||||
f 75/98/63 56/89/63 76/96/63
|
||||
f 75/98/64 54/92/64 55/91/64
|
||||
f 73/99/65 79/93/65 83/100/65
|
||||
f 73/101/66 52/94/66 53/95/66
|
||||
f 71/102/67 41/97/67 40/103/67
|
||||
f 70/104/68 76/96/68 71/102/68
|
||||
f 70/104/69 74/105/69 75/98/69
|
||||
f 68/106/70 83/100/70 82/107/70
|
||||
f 67/108/71 73/101/71 68/109/71
|
||||
f 51/110/72 40/103/72 35/111/72
|
||||
f 50/112/73 71/102/73 51/110/73
|
||||
f 49/113/74 70/104/74 50/112/74
|
||||
f 78/114/75 68/106/75 82/107/75
|
||||
f 47/115/76 68/109/76 48/116/76
|
||||
f 42/65/77 35/111/77 33/66/77
|
||||
f 43/70/78 51/110/78 42/65/78
|
||||
f 44/69/79 50/112/79 43/70/79
|
||||
f 45/72/80 78/114/80 77/73/80
|
||||
f 46/117/81 48/116/81 45/75/81
|
||||
f 44/69/82 78/114/82 49/113/82
|
||||
f 49/113/83 82/107/83 69/118/83
|
||||
f 82/107/84 74/105/84 69/118/84
|
||||
f 83/100/85 54/92/85 74/105/85
|
||||
f 79/93/86 59/119/86 54/92/86
|
||||
f 80/86/87 64/82/87 59/119/87
|
||||
f 64/120/88 77/73/88 44/69/88
|
||||
f 35/12/89 40/62/89 25/13/89
|
||||
f 7/2/90 36/32/90 37/15/90
|
||||
f 35/12/91 26/14/91 17/19/91
|
||||
f 25/13/92 40/62/92 39/29/92
|
||||
f 38/30/93 16/23/93 12/10/93
|
||||
f 8/5/94 41/63/94 36/32/94
|
||||
f 38/30/95 33/20/95 17/19/95
|
||||
f 26/34/31 25/38/31 13/37/31
|
||||
f 22/40/33 32/52/33 31/41/33
|
||||
f 6/43/34 11/47/34 28/44/34
|
||||
f 15/46/34 29/50/34 28/44/34
|
||||
f 21/42/35 31/41/35 30/48/35
|
||||
f 20/49/36 30/48/36 29/50/36
|
||||
f 39/29/96 41/63/96 8/5/96
|
||||
f 38/64/47 66/68/47 42/65/47
|
||||
f 65/67/48 43/70/48 42/65/48
|
||||
f 65/67/49 64/120/49 44/69/49
|
||||
f 81/71/50 63/121/50 45/72/50
|
||||
f 62/74/51 46/117/51 45/75/51
|
||||
f 37/77/52 61/81/52 66/78/52
|
||||
f 60/80/53 65/83/53 66/78/53
|
||||
f 60/80/54 59/119/54 64/82/54
|
||||
f 58/84/55 63/122/55 81/85/55
|
||||
f 57/87/56 62/74/56 63/76/56
|
||||
f 56/89/57 61/81/57 37/77/57
|
||||
f 55/91/58 60/80/58 61/81/58
|
||||
f 54/92/59 59/119/59 60/80/59
|
||||
f 79/93/60 53/123/60 58/84/60
|
||||
f 52/94/61 57/87/61 58/88/61
|
||||
f 76/96/62 56/89/62 36/90/62
|
||||
f 75/98/63 55/91/63 56/89/63
|
||||
f 75/98/64 74/105/64 54/92/64
|
||||
f 73/99/65 53/123/65 79/93/65
|
||||
f 73/101/66 72/124/66 52/94/66
|
||||
f 71/102/67 76/96/67 41/97/67
|
||||
f 70/104/68 75/98/68 76/96/68
|
||||
f 70/104/69 69/118/69 74/105/69
|
||||
f 68/106/70 73/99/70 83/100/70
|
||||
f 67/108/71 72/124/71 73/101/71
|
||||
f 51/110/72 71/102/72 40/103/72
|
||||
f 50/112/73 70/104/73 71/102/73
|
||||
f 49/113/74 69/118/74 70/104/74
|
||||
f 78/114/75 48/125/75 68/106/75
|
||||
f 47/115/76 67/108/76 68/109/76
|
||||
f 42/65/77 51/110/77 35/111/77
|
||||
f 43/70/78 50/112/78 51/110/78
|
||||
f 44/69/79 49/113/79 50/112/79
|
||||
f 45/72/80 48/125/80 78/114/80
|
||||
f 46/117/81 47/115/81 48/116/81
|
||||
f 44/69/82 77/73/82 78/114/82
|
||||
f 49/113/83 78/114/83 82/107/83
|
||||
f 82/107/84 83/100/84 74/105/84
|
||||
f 83/100/85 79/93/85 54/92/85
|
||||
f 79/93/86 80/86/86 59/119/86
|
||||
f 80/86/87 81/85/87 64/82/87
|
||||
f 64/120/88 81/71/88 77/73/88
|
||||
‰PNG
|
||||
|
||||
|