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

amazing

Browse Source
This commit is contained in:
goynov
2025-10-23 22:17:19 +03:00
parent d14f58b583
commit 7221733b47
5 changed files with 75 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InteractiveObjects/MazeQuizGame/Maze.js
-333
View File
@@ -1,333 +0,0 @@
import { Scene, Clock, PointLight, Group, TextGeometry, MeshStandardMaterial, MeshBasicMaterial, PlaneGeometry, Mesh, TextureLoader, sRGBEncoding,
AnimationMixer, LoopPingPong, Vector3, DirectionalLight, Matrix4, LoopRepeat, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import {FontLoader} from 'three/examples/jsm/loaders/FontLoader';
import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils';
import { Clickable } from '../lib/Clickable';
import { Draggable } from '../lib/Draggable';
import { GameObject } from '../lib/GameObject';
import { MotionEngine } from '../lib/MotionEngine';
class Maze {
constructor(context) {
const scene = new Scene();
const motionEngine = new MotionEngine();
this.context = context;
context.motionEngine = motionEngine;
context.scene = scene;
const clickable = new Clickable(2);
context.clickable = clickable;
context.draggable = new Draggable(2);
if (context.dashboard) context.dashboard.onpoints = context.onpoints;
context.wallSize = context.wallSize || .65;
context.tubeSize = context.tubeSize || .8;
context.wallDepth = context.wallDepth || .1;
context.fontPath = context.fontPath || './assets/fonts/ZapfChanceryC.otf';
scene.background = new TextureLoader().load('./assets/textures/room/a3-2.jpg');
scene.background.encoding = sRGBEncoding;
scene.background.mapping = EquirectangularRefractionMapping;
const _tf = {
rotation: {
r: 3 * Math.PI / 2, f: 0, l: Math.PI / 2, b: Math.PI
},
position: {
r: [-context.wallSize, context.wallSize],
f: [0, 2 * context.wallSize],
l: [context.wallSize, context.wallSize]
},
pNext: {
r: [-context.wallSize - (context.wallSize + context.wallDepth) / 2, context.wallSize],
f: [0, 2 * context.wallSize + context.wallSize / 2],
l: [context.wallSize + (context.wallSize + context.wallDepth) / 2, context.wallSize]
}
};
const _l = new PointLight(0xffffff, 1, 10, 0.5);
let pLoad = [];
const mixers = [];
context.mixers = mixers;
context.assets = {};
const clock = new Clock();
context.activate = function (what) {
scene.traverse(o => {
if (o.name == what) {
o.visible = true;
}
});
};
context.gameObject = function (name) {
let result;
scene.traverse(o => {
if (o.name == name) {
result = o;
}
});
return result;
};
const areas = [];
context.areas = areas;
let mazeGeometries = [];
const cameraNear = .2;
let heroDistance = .2;
let o = {};
var loader = new GLTFLoader().setPath(context.path);
loader.setDRACOLoader(new DRACOLoader().setDecoderPath('./lib/draco/'));
const fontLoader = new FontLoader().setPath(context.path);
pLoad.push(new Promise((resolve, reject) => {
loader.load('maze2.gltf', function (gltf) {
console.log(gltf);
gltf.scene.traverse(function (object) {
if (object.isMesh || object.isObject3D) {
//object.castShadow = true;
//object.receiveShadow = true;
}
if (object.name) {
context.assets[object.name] = object;
}
});
['tunnel', 'wall', 'door', 'floor'].forEach(e => {
o[e] = gltf.scene.getObjectByName(e);
});
resolve(gltf);
});
}));
pLoad.push(new Promise((resolve, reject) => {
loader.setPath(context.path + 'human2/');
loader.load('human.gltf', function (gltf) {
console.log(gltf);
gltf.scene.traverse(function (object) {
if (object.isMesh || object.isObject3D) {
//object.castShadow = true;
//object.receiveShadow = true;
object.frustumCulled = false;
}
});
o.hero = gltf.scene;
o.hero.scale.set(.033, .033, .033);
o.hero.position.y = 0;
let mixer = new AnimationMixer(gltf.scene);
mixers.push(mixer);
o.hero.actionWalk = mixer.clipAction(gltf.animations.find(a => a.name == 'walk'));
o.hero.actionIdle = mixer.clipAction(gltf.animations.find(a => a.name == 'idle'));
o.hero.actionIdle.play();
resolve(gltf);
});
loader.setPath(context.path);
}));
pLoad.push(new Promise((resolve, reject) => {
fontLoader.load('font.json', function (font) {
context.fontMaterial = new MeshBasicMaterial({
color: 0x885e2c,
transparent: true,
opacity: 0.73
});
context.font = font;
resolve(font);
});
}));
const staticThings = new Group();
const staticPointer = new Mesh(
new PlaneGeometry(.010, .010),
new MeshStandardMaterial({
map: new TextureLoader().load('./assets/maze/x.png'),
alphaTest: .5,
})
);
staticPointer.frustumCulled = false;
staticPointer.material.map.encoding = sRGBEncoding;
staticThings.add(staticPointer);
scene.add(staticThings);
Promise.all(pLoad).then(function () {
loadScene();
context.onload && context.onload();
});
var that = this;
function loadScene() {
mazeObject(context.maze, scene);
scene.add(o.hero);
scene.add(new Mesh(BufferGeometryUtils.mergeBufferGeometries(mazeGeometries, false), o.tunnel.material));
scene.add(_l);
that.ready = true;
}
function between(a, b, x) {
return (a < b && a < x && x < b) || (b < a && b < x && x < a);
}
function checkArea(x, z) {
let allowed = areas.filter(e => e.type != 'deny' && between(e.a[0].x, e.a[1].x, x) && between(e.a[0].z, e.a[1].z, z));
let denied = areas.filter(e => e.type == 'deny' && between(e.a[0].x, e.a[1].x, x) && between(e.a[0].z, e.a[1].z, z));
return { area: allowed, block: allowed.length == 0 || denied.length > 0 };
}
this.scene = scene;
const _vector = new Vector3();
let heroState = 0;
let lastCamera = new Vector3(0, .5, 0.5);
this.update = function (camera) {
let currentArea = checkArea(camera.position.x, camera.position.z);
if (currentArea.block) {
if (!checkArea(camera.position.x, lastCamera.z).block) {
camera.position.z = lastCamera.z;
} else if (!checkArea(lastCamera.x, camera.position.z).block) {
camera.position.x = lastCamera.x;
} else {
camera.position.copy(lastCamera);
}
currentArea = checkArea(camera.position.x, camera.position.z);
}
_l.position.copy(camera.position);
context.onupdate && context.onupdate();
motionEngine.update();
let delta = clock.getDelta();
mixers.forEach(m => m.update(delta));
if (o.hero) {
let dst = Math.abs(camera.position.distanceTo(lastCamera));
if (dst <= 0.005 && heroState == 1) {
o.hero.actionWalk.crossFadeTo(o.hero.actionIdle.play(), .5);
heroState = 0;
}
else if (dst <= 0.0005 && heroState == 0 && o.hero.actionWalk.isRunning()) {
o.hero.actionWalk.stop();
} else if (dst > 0.005 && heroState == 0) {
o.hero.actionIdle.crossFadeTo(o.hero.actionWalk.reset().play(), .5);
heroState = 1;
} else if (dst > 0.007 && heroState == 1 && o.hero.actionIdle.isRunning()) {
o.hero.actionIdle.stop();
}
_vector.setFromMatrixColumn(camera.matrix, 0);
_vector.crossVectors(camera.up, _vector);
o.hero.position.copy(camera.position);
o.hero.position.addScaledVector(_vector, heroDistance);
o.hero.position.y = 0;
o.hero.rotation.y = camera.rotation.y - Math.PI;
if (checkArea(o.hero.position.x, o.hero.position.z).block) {
o.hero.visible = false;
} else {
o.hero.visible = true;
}
staticThings.position.copy(camera.position);
camera.getWorldDirection(_vector);
staticThings.position.addScaledVector(_vector, .6);
staticThings.rotation.copy(camera.rotation);
}
lastCamera.copy(camera.position);
};
this.onclick = function (camera, mouse, event) {
mouse = mouse || new Vector3(0, 0, 0);
clickable.update(mouse, camera, event);
};
this.onpointer = function (camera, mouse, action) {
mouse = mouse || new Vector3(0, 0, 0);
context.draggable.update(mouse, camera, action);
};
var mazeObject = function (def, room, step = 0) {
let offsetZ = 0, e;
def.len = def.len || 0;
if (step == 0) {
e = o.door.geometry.clone();
e.rotateY(_tf.rotation.f);
mazeGeometries.push(e);
}
for (let i = 0; i < def.len; i++) {
let t = o.tunnel.geometry.clone();
t.translate(0, 0, i * context.tubeSize + context.wallDepth / 2);
def.matrix && t.applyMatrix4(def.matrix);
mazeGeometries.push(t);
}
offsetZ = context.wallDepth + def.len * context.tubeSize - context.tubeSize / 2;
if (!def.len) offsetZ = -.275;
areas.push({
a: [
room.localToWorld(new Vector3(-context.tubeSize / 2 + cameraNear, 0, -context.tubeSize / 2 - cameraNear)),
room.localToWorld(new Vector3(context.tubeSize / 2 - cameraNear, 0, offsetZ + cameraNear))
]
});
if (def.type == 'area') {
def.area.forEach(ar => {
areas.push({
a: [
room.localToWorld(new Vector3(ar[0] + cameraNear, 0, offsetZ + ar[1] - cameraNear)),
room.localToWorld(new Vector3(ar[2] - cameraNear, 0, offsetZ + ar[3] + cameraNear))
]
});
});
} else {
if (def.noRoom) {
// e = o.wall.geometry.clone();
// e.rotateY(_tf.rotation.f);
// e.translate(0,0,offsetZ + 0);
// def.matrix && e.applyMatrix4(def.matrix);
// mazeGeometries.push(e);
} else {
e = [o.floor.geometry.clone(), o.door.geometry.clone(), o[def.r ? 'door' : 'wall'].geometry.clone(),
o[def.f ? 'door' : 'wall'].geometry.clone(), o[def.l ? 'door' : 'wall'].geometry.clone()];
e[0].translate(0, 0, offsetZ + context.wallSize);
e[1].rotateY(_tf.rotation.b);
e[2].rotateY(_tf.rotation.r);
e[3].rotateY(_tf.rotation.f);
e[4].rotateY(_tf.rotation.l);
e[1].translate(0, 0, offsetZ + 0);
e[2].translate(-context.wallSize, 0, offsetZ + context.wallSize);
e[3].translate(0, 0, offsetZ + context.wallSize * 2);
e[4].translate(context.wallSize, 0, offsetZ + context.wallSize);
e.forEach(g => {
def.matrix && g.applyMatrix4(def.matrix);
mazeGeometries.push(g);
});
areas.push({
a: [
room.localToWorld(new Vector3(-context.wallSize + cameraNear, 0, offsetZ + cameraNear)),
room.localToWorld(new Vector3(context.wallSize - cameraNear, 0, offsetZ + context.wallSize * 2 - cameraNear))
]
});
}
}
def.objects && def.objects.forEach(obj => {
obj.room = room;
let go = new GameObject(obj, context);
go.ready.then(mesh => {
room.add(mesh);
});
});
def.room = room;
['r', 'f', 'l'].forEach((d, i) => {
if (!def[d]) return;
let mtx = new Matrix4();
mtx.makeRotationY(_tf.rotation[d]);
mtx.setPosition(_tf.pNext[d][0], 0, _tf.pNext[d][1] + offsetZ);
let rr = new Group();
scene.add(rr);
def[d].matrix = mtx.premultiply(def.matrix || new Matrix4());
rr.applyMatrix4(def[d].matrix);
rr.updateMatrixWorld();
mazeObject(def[d], rr, step + 1);
});
};
}
}
export { Maze };
src/components/InteractiveObjects/MazeQuizGame/MazeObject.js
+16 -5
View File
@@ -1,4 +1,4 @@
import { Group, Vector3, Matrix4, Mesh, Quaternion, BoxGeometry } from 'three';
import { Group, Vector3, Matrix4, Mesh, Quaternion, PlaneGeometry, MeshStandardMaterial, DoubleSide } from 'three';
import { InteractiveObject } from '../InteractiveObject';
class MazeObject {
@@ -8,6 +8,8 @@ class MazeObject {
this.object = room;
let context = {};
const bbox = {l:0, r:0, f:0}
const scale = 5;
context.wallSize = params.wallSize || 1.2*scale; //half
@@ -19,11 +21,11 @@ class MazeObject {
this.context = context;
let _tf = {
rotation: {
r: 3 * Math.PI / 2, f: 0, l: Math.PI / 2, b: Math.PI
r: 3 * Math.PI / 2, f: 0, l: Math.PI / 2, b: 0
},
pNext: {
r: [-context.wallSize/2, context.wallSize/2],
f: [0, context.wallSize / 2],
f: [0, context.wallSize],
l: [context.wallSize/2, context.wallSize/2]
}
};
@@ -62,7 +64,6 @@ class MazeObject {
e[4].rotateY(_tf.rotation.l);
e[1].position.set(0, 0, offsetZ + 0);
e[2].position.set(-context.wallSize/2, 0, offsetZ + context.wallSize/2);
e[3].position.set(0, 0, offsetZ + context.wallSize);
e[4].position.set(context.wallSize/2, 0, offsetZ + context.wallSize/2);
@@ -86,6 +87,9 @@ class MazeObject {
e.forEach(g => {
g.applyMatrix4(def.matrix);
root.add(g);
bbox.l = Math.min(g.position.x, bbox.l)
bbox.r = Math.max(g.position.x, bbox.r)
bbox.f = Math.max(g.position.z, bbox.f)
});
}
@@ -167,7 +171,14 @@ class MazeObject {
// //engine.phy.add(mesh, 'fixed')
// })
console.log(o.tunnel)
console.log(bbox, 'bbox')
const floorGeometry = new PlaneGeometry(bbox.r - bbox.l + 10*scale, bbox.f + 10*scale);
const floor = new Mesh(floorGeometry,new MeshStandardMaterial({
roughness: 0, metalness:1, color: 0x00ffff, side: DoubleSide
}))
floor.rotation.set(Math.PI/2, 0, 0)
floor.position.set((bbox.l + bbox.r)/2, 0.3, bbox.f/2);
root.add(floor);
//scene.add(new Mesh(BufferGeometryUtils.mergeGeometries(mazeGeometries, false), o.tunnel.material));
//console.log(room);
}
src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js
+25 -22
View File
@@ -5,12 +5,12 @@ const defaults = {
arrows:{
r: len => ({ type: 'image', value: '/static/textures/arrow.png', position:[-.5,.44,len+.96], rotation:[0,Math.PI, 0], scale: [0.03, 0.03, 0.03] }),
l: len => ({ type: 'image', value: '/static/textures/arrow.png', position:[.5,.44,len+.96], rotation:[0,Math.PI, Math.PI], scale: [0.03, 0.03, 0.03] }),
f: len => ({ type: 'image', value: '/static/textures/arrow.png', position:[0,.73,len+.96], rotation:[0,Math.PI, Math.PI/2], scale: [0.03, 0.03, 0.03] })
f: len => ({ type: 'image', value: '/static/textures/arrow.png', position:[0,.7,len+.96], rotation:[0,Math.PI, Math.PI/2], scale: [0.03, 0.03, 0.03] })
},
answers:{
r: (len, text) => ({ type: 'text', text, position:[-.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
l: (len, text) => ({ type: 'text', text, position:[.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
f: (len, text) => ({ type: 'text', text, position:[0,.7,len+.9], rotation:[0,Math.PI, 0] })
r: (len, text) => ({ type: 'text', width:0.5, text, fontSize:0.025, position:[-.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
l: (len, text) => ({ type: 'text', width:0.5, text, fontSize:0.025, position:[.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
f: (len, text) => ({ type: 'text', width:0.5, text, fontSize:0.025, position:[0,.55,len+.9], rotation:[0,Math.PI, 0] })
}
}
@@ -28,16 +28,16 @@ class MazeQuizGame {
return this.object;
}
generate(questions, idx = 0){
generate(questions, idx = 0, len){
let cq = questions[idx]
if (!cq) return {};
let len = Math.round(Math.random()*tl) + 2;
len = len || Math.round(Math.random()*tl) + 2;
let l = {
l: Math.round(Math.random()*tl) + 2,
r: Math.round(Math.random()*tl) + 2,
f: Math.round(Math.random()*tl) + 2
}
// let l = {
// l: Math.round(Math.random()*tl) + 2,
// r: Math.round(Math.random()*tl) + 2,
// f: Math.round(Math.random()*tl/2) + 2
// }
let directions = Utils.shuffleArray( ['l', 'r', 'f'] )
@@ -45,7 +45,7 @@ class MazeQuizGame {
len,
objects:[
{
type: 'text', text: cq.q, position:[0,.4,len + .96], rotation:[0,Math.PI, 0]
type: 'text', text: cq.q, fontSize:0.033, width:0.5, position:[0,.33,len + .96], rotation:[0,Math.PI, 0]
}
]
}
@@ -58,33 +58,36 @@ class MazeQuizGame {
)
let dd;
if (d == 'f'){
dd = l.l > l.r ? 'l' : 'r';
dd = Math.round() > 0.5 ? 'l' : 'r';
}else {
dd = d == 'l' ? 'r' : 'l'
}
if (i == 0){
mo[d] = {
len: l[d],
[dd]: this.generate(questions, idx + 1)
len: 4,
[dd]: this.generate(questions, idx + 1, 3)
}
}else{
mo[d] = {
len: l[d],
len: 4,
[dd]: {
len: 8 - l[d],
len: 2,
objects:[
{
type: 'text', text: cq.h, position:[0,.44,8 - l[d]+.96], rotation:[0,Math.PI, 0]
type: 'text', width:0.5, color:0xff0000, text: cq.h, fontSize:0.033, position:[0,.44,2+.96], rotation:[0,Math.PI, 0]
}
]
}
}
}
if (d == 'f'){
let path = mo[d][dd];
mo[d][dd] = {
len: 1,
[dd == 'r' ? 'l' : 'r']: path
mo[d].len = 2;
if (i == 0){
let path = mo[d][dd];
mo[d][dd] = {
len: 1,
[dd == 'r' ? 'l' : 'r']: path
}
}
}
})