Files
Kepler/demos/new.htm
2025-11-17 17:18:43 +01:00

175 lines
4.7 KiB
HTML
Executable File

<html>
<head>
<title>Kepler</title>
</head>
<link rel="stylesheet" type="text/css" href="../loading-bar.css"/>
<script type="text/javascript" src="../loading-bar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
<link rel="stylesheet" href="../style.css" type="text/css">
<script type="module">
import keplerEngine from '../engine/kepler.js';
import entity from '../engine/entity.js';
import material from '../engine/material.js';
import sampler2D from '../engine/sampler2D.js';
import {matrix4} from '../engine/math.js';
var kepler = new keplerEngine();
kepler.bar = new ldBar(".preloader");
kepler.initialize = function() {
this.resources.addTexture("media/textures/white.png", 'white');
this.resources.addTexture("media/textures/rotrandom.png", 'random');
this.resources.addTexture("media/textures/0_floorTiles_diff.png", 'floorTiles_diff');
this.resources.addTexture("media/textures/0_floorTiles_ddn.png", 'floorTiles_normal');
this.resources.addTexture("media/textures/cubemaps-1024/positive_x.png", 'positive_x');
this.resources.addTexture("media/textures/cubemaps-1024/positive_y.png", 'positive_y');
this.resources.addTexture("media/textures/cubemaps-1024/positive_z.png", 'positive_z');
this.resources.addTexture("media/textures/cubemaps-1024/negative_x.png", 'negative_x');
this.resources.addTexture("media/textures/cubemaps-1024/negative_y.png", 'negative_y');
this.resources.addTexture("media/textures/cubemaps-1024/negative_z.png", 'negative_z');
//this.assimpLoader.load("room.json");
//this.assimpLoader.load("laren2.json");
}
kepler.callback = function() {
var engine = this;
var light = new entity( engine );
light.type = "PointLight";
light.name = "PhotometricLight003";
light.transform.local = matrix4.identity();
light.transform.world = matrix4.setTranslation( light.transform.local, [100.0702958800057496, 120.042, 4100] );
light.mesh = false;
light.attenuation = 1.5;
light.SourceRadius = 0;
light.SourceLength = 0;
engine.system.scene.rootEntity.addChild(light);
engine.system.scene.addEntity( light );
console.log(engine);
var currentMaterial = new material(engine);
var normalTexture = engine.resources.getTexture("floorTiles_normal");
var normalSampler = new sampler2D(engine);
normalSampler.addTexture(normalTexture);
currentMaterial.addNormal(normalSampler);
var diffuseTexture = engine.resources.getTexture("floorTiles_diff");
var diffuseSampler = new sampler2D(engine);
diffuseSampler.addTexture(diffuseTexture);
currentMaterial.addTexture( diffuseSampler );
currentMaterial.roughness = .0;
currentMaterial.shadingModelID = 256;
//material.diffuseColor = [88,175,255];
currentMaterial.alpha = 1;
var currentMesh = engine.primitives.createCube(10);
//var mesh = this.primitives.createSphere(2.6, 200, 200)
currentMesh.addMaterial(currentMaterial);
var box = new entity( engine );
box.addMesh(currentMesh);
box.name = "new box";
box.alpha = 0;
box.transform.position = [0, -10, 0];
box.transform.update();
box.mesh.boundingBox.fitBoxToPoints_(box.mesh.vertexPositionBuffer.data, box.transform.world);
engine.system.scene.addEntity( box );
engine.system.scene.rootEntity.addChild(box);
var skyMaterial = new material(engine);
var diffuseTexture = engine.resources.getTexture("white");
var diffuseSampler = new sampler2D( engine );
diffuseSampler.addTexture(diffuseTexture);
skyMaterial.addTexture(diffuseSampler);
skyMaterial.roughness = .0;
skyMaterial.shadingModelID = 100.0;
skyMaterial.diffuseColor = [88,175,255];
skyMaterial.alpha = 1;
skyMaterial.create();
var sphere = engine.primitives.createSphere(712.6, 200, 200)
sphere.addMaterial(skyMaterial);
var sky = new entity( engine );
sky.addMesh(sphere);
sky.name = "sky sphere";
sky.transform.position = [0, 20, 0];
sky.transform.update();
//engine.system.scene.addEntity( sky );
//engine.system.scene.rootEntity.addChild( sky );
}
kepler.application();
</script>
<body style="margin: 0;">
<div class="preloader_holder">
<div class="preloader"
data-preset="fan"
class="ldBar label-center"
style="width:100%;height:100%;margin:auto"
>
</div>
<div class="preloader_text">
</div>
</div>
<img src="media/textures/logo.png" style="position: absolute;left:0; top:10px;" >
<canvas id="keplerEngine" style="width: 100%; height: 100%;"></canvas>
</body>
</html>