imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

game designer

Browse Source
This commit is contained in:
goynov
2025-03-20 17:17:50 +02:00
parent 73ca07bcc0
commit 14f97924d3
11 changed files with 291 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/gameEngine.js
+120 -23
View File
@@ -1,33 +1,42 @@
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/Addons.js';
import { OrbitControls } from 'three/examples/jsm/Addons.js';
import { ViewportGizmo } from "three-viewport-gizmo";
//import { AnaglyphEffect } from './three/AnaglyphEffect';
import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
import { StereoEffect } from 'three/addons/effects/StereoEffect.js';
import { MapControls } from 'three/addons/controls/MapControls.js';
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js';
class GameEngine {
async init(domNode) {
const width = 1200, height = 800;
this.w = domNode.clientWidth || 1200, this.h = domNode.clientHeight || 800;
this.aspect = this.w / this.h
const gameEngine = this;
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
this.perspectiveCamera = new THREE.PerspectiveCamera(50, this.aspect, 0.01, 1000);
this.raycaster = new THREE.Raycaster();
camera.position.set(1, 0, 1);
this.perspectiveCamera.position.set(0, 0, 10);
this.camera = this.perspectiveCamera;
this.frustumSize = 50;
this.orthographicCamera = new THREE.OrthographicCamera(
this.frustumSize * this.aspect / - 2,
this.frustumSize * this.aspect / 2,
this.frustumSize / 2,
this.frustumSize / - 2,
0.01, 1000);
this.orthographicCamera.position.set( 0, 0, 100 );
const scene = new THREE.Scene();
// this.light = new THREE.AmbientLight( 0x404040, 0 ); // soft white light
// scene.add( this.light );
function animate(time) {
let delta = clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
controls.update();
}
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
preserveDrawingBuffer: true
// alpha: true,
// preserveDrawingBuffer: true
});
renderer.setPixelRatio( window.devicePixelRatio );
// renderer.toneMapping = THREE.CineonToneMapping;
@@ -35,16 +44,42 @@ class GameEngine {
// renderer.shadowMap.enabled = true;
// renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
renderer.outputEncoding = THREE.sRGBEncoding;
const controls = new OrbitControls( camera, renderer.domElement );
renderer.setSize(this.w, this.h);
renderer.setViewport( 0, 0, this.w, this.h );
renderer.autoClear = true;
this.anaglyph = new AnaglyphEffect( renderer );
this.anaglyph.setSize( this.w, this.h );
this.stereo = new StereoEffect(renderer);
this.stereo.setSize( this.w, this.h );
const controls = new OrbitControls( this.camera, renderer.domElement );
const gizmo = new ViewportGizmo(this.camera, renderer, {
container:'.renderer-gizmo',
//type:'cube'
});
gizmo.attachControls(controls);
this.gizmo = gizmo;
this.orbitControls = controls;
//controls.enableZoom = true;
//const controls = new MapControls( camera, renderer.domElement );
this.transformControls = new TransformControls( camera, renderer.domElement );
this.transformControls = new TransformControls( this.camera, renderer.domElement );
this.transformControls.addEventListener( 'dragging-changed', function ( event ) {
controls.enabled = ! event.value;
} );
// controls.enableDamping = true;
// controls.screenSpacePanning = true;
renderer.setSize(width, height);
this.renderType = 'ST';
function animate(time) {
let delta = clock.getDelta();
mixer.update(delta);
gameEngine.render(scene, gameEngine.camera);
gizmo.render();
}
renderer.setAnimationLoop(animate);
const mixer = new THREE.AnimationMixer(this.scene);
@@ -54,8 +89,6 @@ class GameEngine {
this.renderer = renderer;
this.scene = scene;
this.loader = new GLTFLoader();
this.camera = camera;
this.controls = controls;
this.mixer = mixer;
this.activeObjects = new THREE.Group();
@@ -72,10 +105,10 @@ class GameEngine {
scene.background = new THREE.Color(1,1,1);
console.log('GameEngine started')
renderer.domElement.addEventListener('wheel', (event)=>{
camera.zoom -= event.deltaY / 1000;
camera.zoom = Math.max(camera.zoom, .4);
controls.rotateSpeed = 1 / camera.zoom;
camera.updateProjectionMatrix();
gameEngine.camera.zoom -= event.deltaY / 1000;
gameEngine.camera.zoom = Math.max(gameEngine.camera.zoom, .4);
controls.rotateSpeed = 1 / gameEngine.camera.zoom;
gameEngine.camera.updateProjectionMatrix();
})
}
@@ -142,8 +175,7 @@ class GameEngine {
intersect(mouseEvent, domElement, objects, recursive = false, returnInputObjects = true){
let mouse = this.getMouseVector(mouseEvent, domElement);
this.raycaster.setFromCamera(mouse, this.camera);
console.log(objects)
let intersects = this.raycaster.intersectObjects(objects, recursive);
let intersects = this.raycaster.intersectObjects(objects.filter(o=>o.visible), recursive);
if (returnInputObjects && recursive){
intersects.forEach(o=>{
while (o.object && !objects.includes(o.object)) {
@@ -159,6 +191,71 @@ class GameEngine {
let k = Math.max(bb.max.x - bb.min.x, bb.max.y - bb.min.y, bb.max.z - bb.min.z);
object.scale.multiplyScalar(mk/k);
}
setCamera(camera){
//camera.updateProjectionMatrix();
this.camera = camera;
//this.transformControls.camera = camera;
this.orbitControls.object = camera;
}
setCameraOrthographic() {
let o = this.orthographicCamera;
// o.position.copy(o.position);
// const distance = o.position.distanceTo(this.orbitControls.target);
// const halfWidth = this.frustumWidthAtDistance(o, distance) / 2;
// const halfHeight = this.frustumHeightAtDistance(o, distance) / 2;
// o.top = halfHeight;
// o.bottom = -halfHeight;
// o.left = -halfWidth;
// o.right = halfWidth;
// o.zoom = 1;
// o.lookAt(this.orbitControls.target);
// o.updateProjectionMatrix();
this.camera = o;
this.transformControls.camera = o;
this.orbitControls.object = o;
this.gizmo.camera = o;
}
setCameraPerspective() {
let o = this.perspectiveCamera;
// const oldY = o.position.y;
// o.position.copy(o.position);
// o.position.y = oldY / o.zoom;
// o.updateProjectionMatrix();
this.camera = o;
this.transformControls.camera = o;
this.orbitControls.object = o;
this.gizmo.camera = o;
}
resize(w, h){
this.w = w;
this.h = h;
this.aspect = this.w / this.h
this.perspectiveCamera.aspect = this.aspect;
this.perspectiveCamera.updateProjectionMatrix();
this.orthographicCamera.left = - this.frustumSize * this.aspect / 2;
this.orthographicCamera.right = this.frustumSize * this.aspect / 2;
this.orthographicCamera.top = this.frustumSize / 2;
this.orthographicCamera.bottom = - this.frustumSize / 2;
this.renderer.setSize(w, h);
this.renderer.setViewport( 0, 0, this.w, this.h );
this.anaglyph.setSize( w, h );
this.stereo.setSize( w, h );
this.gizmo.update();
}
render(scene, camera){
if (this.renderType == 'VR'){
this.stereo?.render( scene, camera );
}else if (this.renderType == 'AG'){
this.anaglyph?.render( scene, camera );
}else{
this.renderer.render( scene, camera );
}
}
}
export {GameEngine}