Three.js 3D Renderer
High-performance 3D graphics rendering
Active
main.js
import { Game } from "kernelplay-js";
import { Level1 } from "./scenes/Level1.js";
import { ThreeRenderer } from "@kernelplay/three-renderer";
class MyGame extends Game {
init() {
this.sceneManager.addScene(new Level1("Level1"));
this.sceneManager.startScene("Level1");
}
}
const game = new MyGame({
renderer: new ThreeRenderer(),
width: 800,
height: 600,
fps: 60
});
game.start();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>KernelPlay Game</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/",
"kernelplay-js": "https://cdn.jsdelivr.net/npm/kernelplay-js@latest/dist/kernelplay.es.js",
"@kernelplay/three-renderer": "https://cdn.jsdelivr.net/npm/@kernelplay/three-renderer/dist/three-renderer.es.js"
}
}
</script>
<script type="module" src="./main.js"></script>
</body>
</html>
scene.js
import { Scene } from "kernelplay-js";
import { PlayerCube } from "../prefabs/PlayerCube.js";
import { Cube } from "../prefabs/Cube.js";
export class Level1 extends Scene {
init() {
this.addEntity(new PlayerCube(0, 0, 0));
this.addEntity(new Cube(3, 0, 0));
this.addEntity(new Cube(-3, 0, 0, true));
}
}
player.js
import * as THREE from "three";
import { Entity, ColliderComponent } from "kernelplay-js";
import { CubeScript } from "../scripts/CubeScript.js";
import { Layers } from "kernelplay-js";
import { MeshComponent } from "@kernelplay/three-renderer";
import { BoxCollider3D } from "@kernelplay/three-renderer";
import { TransformComponent } from "kernelplay-js";
import { RigidbodyComponent } from "kernelplay-js";
export function PlayerCube(x, y, z = 0) {
const e = new Entity("Player");
e.layer = Layers.Player;
e.addComponent("transform", new TransformComponent({
position: { x, y, z},
scale: { x: 1, y: 1, z: 1}
}));
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({ color: "blue" })
);
e.addComponent("mesh", new MeshComponent(mesh));
e.addComponent("collider3D", new BoxCollider3D());
e.addComponent("rigidbody", new RigidbodyComponent({
useGravity: false
}));
e.addComponent("CubeScript", new CubeScript());
return e;
}
player.js
import * as THREE from "three";
import { Entity, ColliderComponent } from "kernelplay-js";
import { MeshComponent } from "@kernelplay/three-renderer";
import { BoxCollider3D } from "@kernelplay/three-renderer";
import { TransformComponent } from "kernelplay-js";
export function Cube(x, y, z = 0, isTrigger = false) {
const e = new Entity("Cube");
e.addComponent("transform", new TransformComponent({
position: { x, y, z},
scale: { x: 1, y: 2, z: 3 }
}));
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({ color: "red" })
);
e.addComponent("mesh", new MeshComponent(mesh));
e.addComponent("collider3D", new BoxCollider3D(isTrigger));
return e;
}
player.js
import { ScriptComponent, Keyboard, Mouse } from "kernelplay-js";
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/controls/OrbitControls.js';
import { Layers } from "kernelplay-js";
export class CubeScript extends ScriptComponent {
onStart() {
const renderer = this.entity.scene.game.renderer;
// OrbitControls
const controls = new OrbitControls(renderer.camera, renderer.renderer.domElement);
controls.enableDamping = true; // smooth motion
controls.dampingFactor = 0.05;
controls.target.set(0, 1, 0); // focus point
controls.update();
}
update(dt) {
const transform = this.entity.getComponent("transform");
const rb = this.entity.getComponent("rigidbody");
rb.velocity.x = 0;
rb.velocity.z = 0;
if (Keyboard.isPressed("ArrowRight")) rb.velocity.x = 200 * dt;
if (Keyboard.isPressed("ArrowLeft")) rb.velocity.x = -200 * dt;
if (Keyboard.isPressed("ArrowUp")) rb.velocity.z = -200 * dt;
if (Keyboard.isPressed("ArrowDown")) rb.velocity.z = 200 * dt;
if (Mouse.wasPressed(0)) {
const hit = this.entity.scene.raycast(Mouse.x, Mouse.y);
// const hit = this.entity.scene.raycast(Mouse.x, Mouse.y,{
// layerMask: Layers.Player
// });
// const hit = this.entity.scene.pick(Mouse.x, Mouse.y);
if (hit) {
// raycast
console.log("Clicked:", hit.entity.name, hit.distance, hit.point);
// pick
// console.log("Clicked:", hit.name, hit.tag);
// console.log("Clicked:", hit);
}
}
}
onCollision(other) {
// Called when a solid collision occurs
console.log("Player hit:", other.name);
}
onTriggerEnter(other) {
// Called when entering a trigger collider
console.log("Player entered trigger:", other.name);
}
}