Skip to content

Commit

Permalink
successfully set up react
Browse files Browse the repository at this point in the history
  • Loading branch information
99-Knots committed Jun 3, 2024
1 parent aa7d102 commit 2a9a327
Show file tree
Hide file tree
Showing 8 changed files with 746 additions and 374 deletions.
839 changes: 593 additions & 246 deletions package-lock.json

Large diffs are not rendered by default.

12 changes: 11 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
"main": "index.ts",
"scripts": {
"test": "webpack --mode development",
"start": "webpack serve --mode development --open",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/99-Knots/EditorDemo.git"
"url": "git+https://github.com/99-Knots/EditorDemoCode.git"
},
"author": "99-Knots",
"license": "ISC",
Expand All @@ -20,12 +21,21 @@
"devDependencies": {
"@babylonjs/core": "^7.8.2",
"@babylonjs/materials": "^7.8.2",
"@types/node": "^20.13.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"javascript-obfuscator": "^4.1.0",
"ts-loader": "^9.5.1",
"typescript": "^5.4.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4",
"webpack-obfuscator": "^3.5.1"
},
"dependencies": {
"html-webpack-plugin": "^5.6.0",
"process": "^0.11.10",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}
4 changes: 2 additions & 2 deletions index.html → public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editor Demo</title>
</head>
<body>
<div>Babylon Demo</div>
<script src="dist/bundle.js"></script>
<div id="react-root"></div>
</body>
</html>
85 changes: 85 additions & 0 deletions src/components/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@

import { Engine } from '@babylonjs/core/Engines/engine';
import { Scene } from '@babylonjs/core/scene';
import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder'
import { Vector3, Color3 } from '@babylonjs/core/Maths/math';
import { SkyMaterial } from '@babylonjs/materials/sky';
import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
import { Texture } from '@babylonjs/core/Materials/Textures/texture';
import { Tools } from '@babylonjs/core/Misc/tools'

import floor_tex from '../../assets/floortiles.png';
import floor_norm from '../../assets/floortiles_normal.png';

const canvas = document.createElement('canvas');
canvas.id = 'render-canvas';
canvas.style.width = '100%';
canvas.style.height = '100%';
document.body.appendChild(canvas);

export function setupEngine() {

const engine = new Engine(canvas, true);
const scene = new Scene(engine);

const setupCamera = async () => {
const arcRotCamera = new ArcRotateCamera('camera1arc', Tools.ToRadians(-90), Tools.ToRadians(60), 10, Vector3.Zero(), scene);
arcRotCamera.lowerRadiusLimit = 2;
arcRotCamera.upperRadiusLimit = 45;
arcRotCamera.upperBetaLimit = Tools.ToRadians(89.9); // todo: Adjust to mouse wheel ? like in unreal
arcRotCamera.wheelDeltaPercentage = 0.01;
arcRotCamera.speed = 1;
arcRotCamera.attachControl(canvas, true);
}

const setupSky = async () => {
const sunPosition = new Vector3(50, 120, -100);

const skyMaterial = new SkyMaterial('skyMat', scene);
skyMaterial.backFaceCulling = false;
skyMaterial.useSunPosition = true;
skyMaterial.sunPosition = sunPosition;

const skybox = MeshBuilder.CreateBox('skyBox', { size: 1000.0 }, scene);
skybox.material = skyMaterial;

const light = new HemisphericLight('hemisphereLight', sunPosition, scene);
}

const setupFloor = async () => {
const ground = MeshBuilder.CreateGround('ground', {width:15, height:15}, scene);
const groundMat = new StandardMaterial('groundMat', scene);
const tileTex = new Texture(floor_tex, scene);
tileTex.uScale = ground._width;
tileTex.vScale = ground._height;
const tileNormal = new Texture(floor_norm, scene);
tileNormal.uScale = ground._width;
tileNormal.vScale = ground._height;
groundMat.diffuseTexture = tileTex;
groundMat.bumpTexture = tileNormal;
groundMat.specularColor = new Color3(0.4, 0.4, 0.4);
groundMat.backFaceCulling = false;
ground.material = groundMat;

}

setupCamera();
setupSky();
setupFloor();

const cube = MeshBuilder.CreateBox('box', {size: 1}, scene);
cube.translate(new Vector3(0, 1, 0), 0.5001); // avoid clipping with ground

engine.runRenderLoop(() => {
scene.render();
});

window.addEventListener('resize', () => {
engine.resize();
});

}

//setupEngine();
85 changes: 0 additions & 85 deletions src/index.ts

This file was deleted.

6 changes: 6 additions & 0 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import {setupEngine} from './components/main'

setupEngine();
ReactDOM.render(<h1>React Test</h1>, document.getElementById('react-root'));
25 changes: 11 additions & 14 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
{
"compilerOptions": {
/* Language and Environment */
"target": "es2016",
// "lib": [],

/* Modules */
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"sourceMap": false,

/* Type Checking */
"strict": true,
"skipLibCheck": true,
"outDir": "./dist"
"target": "es2016",
"lib": ["dom", "dom.iterable", "esnext"],
"skipLibCheck": true,
"module": "commonjs",
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"sourceMap": false,
"strict": true,
"jsx": "react",
"outDir": "./dist"
},
"include": ["src", "assets"]
}
64 changes: 38 additions & 26 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,51 +1,63 @@
const path = require('path');
const WebpackObfuscator = require('webpack-obfuscator');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const WebpackObfuscator = require('webpack-obfuscator');
//const webpack = require('webpack');
//new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);

module.exports = {
entry: './src/index.ts',
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.js$/,
exclude: [
path.resolve(__dirname, 'bundle.js')
],
enforce: 'post',
use: {
loader: WebpackObfuscator.loader,
options: {
rotateStringArray: true,
compact: true,
}
}
}
//{
// test: /\.js$/,
// exclude: [
// path.resolve(__dirname, 'bundle.js')
// ],
// enforce: 'post',
// use: {
// loader: WebpackObfuscator.loader,
// options: {
// rotateStringArray: true,
// compact: true,
// }
// }
// }
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
plugins: [
new WebpackObfuscator ({
rotateStringArray: true,
compact: true,
}, ['bundle.js'])
new HtmlWebpackPlugin({
template: './public/index.html',
}),
//new WebpackObfuscator ({
// rotateStringArray: true,
// compact: true,
//}, ['bundle.js']),
//new webpack.ProvidePlugin({
// process: 'process/browser',
//}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000
port: 3000,
open: true,
},
};

0 comments on commit 2a9a327

Please sign in to comment.