Skip to content

Commit 088128f

Browse files
committed
✨ copy vite-* and rename them playground-*
for the future change
1 parent d942053 commit 088128f

File tree

13 files changed

+305
-0
lines changed

13 files changed

+305
-0
lines changed

templates/playground-js/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

templates/playground-js/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
10+
<body>
11+
<canvas id="renderCanvas"></canvas>
12+
<script type="module" src="/main.js"></script>
13+
</body>
14+
15+
</html>

templates/playground-js/main.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import './style.css';
2+
3+
import * as BABYLON from '@babylonjs/core';
4+
5+
var createScene = function () {
6+
// This creates a basic Babylon Scene object (non-mesh)
7+
var scene = new BABYLON.Scene(engine);
8+
9+
// This creates and positions a free camera (non-mesh)
10+
var camera = new BABYLON.FreeCamera(
11+
'camera1',
12+
new BABYLON.Vector3(0, 5, -10),
13+
scene
14+
);
15+
16+
// This targets the camera to scene origin
17+
camera.setTarget(BABYLON.Vector3.Zero());
18+
19+
// This attaches the camera to the canvas
20+
camera.attachControl(canvas, true);
21+
22+
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
23+
var light = new BABYLON.HemisphericLight(
24+
'light',
25+
new BABYLON.Vector3(0, 1, 0),
26+
scene
27+
);
28+
29+
// Default intensity is 1. Let's dim the light a small amount
30+
light.intensity = 0.7;
31+
32+
// Our built-in 'sphere' shape.
33+
var sphere = BABYLON.MeshBuilder.CreateSphere(
34+
'sphere',
35+
{ diameter: 2, segments: 32 },
36+
scene
37+
);
38+
39+
// Move the sphere upward 1/2 its height
40+
sphere.position.y = 1;
41+
42+
// Our built-in 'ground' shape.
43+
var ground = BABYLON.MeshBuilder.CreateGround(
44+
'ground',
45+
{ width: 6, height: 6 },
46+
scene
47+
);
48+
49+
return scene;
50+
};
51+
52+
let engine;
53+
let canvas;
54+
55+
const main = () => {
56+
canvas = document.getElementById('renderCanvas');
57+
if (!canvas) {
58+
return;
59+
}
60+
61+
engine = new BABYLON.Engine(canvas, true);
62+
const scene = createScene();
63+
64+
window.addEventListener('resize', () => {
65+
engine.resize();
66+
});
67+
68+
engine.runRenderLoop(() => {
69+
scene.render();
70+
});
71+
};
72+
73+
main();

templates/playground-js/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "playground-js",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"@babylonjs/core": "^7.11.1",
13+
"vite": "^5.3.1"
14+
}
15+
}

templates/playground-js/style.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
html,
2+
body,
3+
#renderCanvas {
4+
margin: 0;
5+
padding: 0;
6+
width: 100%;
7+
height: 100%;
8+
border: none !important;
9+
outline: none !important;
10+
display: block;
11+
}

templates/playground-ts/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

templates/playground-ts/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + TS</title>
8+
</head>
9+
10+
<body>
11+
<canvas id="renderCanvas"></canvas>
12+
<script type="module" src="/src/main.ts"></script>
13+
</body>
14+
15+
</html>

templates/playground-ts/package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "playground-ts",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"@babylonjs/core": "^7.11.1",
13+
"typescript": "^5.2.2",
14+
"vite": "^5.3.1"
15+
}
16+
}
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as BABYLON from '@babylonjs/core';
2+
3+
class Playground {
4+
public static CreateScene(
5+
engine: BABYLON.Engine,
6+
canvas: HTMLCanvasElement
7+
): BABYLON.Scene {
8+
// This creates a basic Babylon Scene object (non-mesh)
9+
var scene = new BABYLON.Scene(engine);
10+
11+
// This creates and positions a free camera (non-mesh)
12+
var camera = new BABYLON.FreeCamera(
13+
'camera1',
14+
new BABYLON.Vector3(0, 5, -10),
15+
scene
16+
);
17+
18+
// This targets the camera to scene origin
19+
camera.setTarget(BABYLON.Vector3.Zero());
20+
21+
// This attaches the camera to the canvas
22+
camera.attachControl(canvas, true);
23+
24+
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
25+
var light = new BABYLON.HemisphericLight(
26+
'light1',
27+
new BABYLON.Vector3(0, 1, 0),
28+
scene
29+
);
30+
31+
// Default intensity is 1. Let's dim the light a small amount
32+
light.intensity = 0.7;
33+
34+
// Our built-in 'sphere' shape. Params: name, options, scene
35+
var sphere = BABYLON.MeshBuilder.CreateSphere(
36+
'sphere',
37+
{ diameter: 2, segments: 32 },
38+
scene
39+
);
40+
41+
// Move the sphere upward 1/2 its height
42+
sphere.position.y = 1;
43+
44+
// Our built-in 'ground' shape. Params: name, options, scene
45+
var ground = BABYLON.MeshBuilder.CreateGround(
46+
'ground',
47+
{ width: 6, height: 6 },
48+
scene
49+
);
50+
51+
return scene;
52+
}
53+
}
54+
55+
export { Playground };

templates/playground-ts/src/main.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Playground } from './createScene';
2+
import './style.css';
3+
import { Engine } from '@babylonjs/core';
4+
5+
const main = () => {
6+
const renderCanvas = document.getElementById(
7+
'renderCanvas'
8+
) as HTMLCanvasElement;
9+
if (!renderCanvas) {
10+
return;
11+
}
12+
13+
const engine = new Engine(renderCanvas, true);
14+
15+
const scene = Playground.CreateScene(engine, renderCanvas);
16+
17+
window.addEventListener('resize', () => {
18+
engine.resize();
19+
});
20+
21+
engine.runRenderLoop(() => {
22+
scene.render();
23+
});
24+
};
25+
26+
main();

0 commit comments

Comments
 (0)