generated from lucien/actix-react-template
Compare commits
No commits in common. "1e956a54d26ec9c3ad6685da536e25a51127a327" and "ee692fec27c4d648054a445b249e66c83f525b9a" have entirely different histories.
1e956a54d2
...
ee692fec27
9 changed files with 5 additions and 385 deletions
|
|
@ -10,14 +10,9 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^9.120.0",
|
||||
"@react-three/fiber": "^8.17.10",
|
||||
"@types/three": "^0.170.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router": "^7.0.2",
|
||||
"three": "^0.171.0",
|
||||
"three-stdlib": "^2.34.0"
|
||||
"react-router": "^7.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.15.0",
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,31 +0,0 @@
|
|||
import React from 'react'
|
||||
import { LineBasicMaterial, Line, Group } from 'three'
|
||||
import { useFrame } from '@react-three/fiber'
|
||||
import * as THREE from 'three'
|
||||
|
||||
export default function Axes() {
|
||||
const axes = new Group()
|
||||
|
||||
const x = new Line(
|
||||
new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0),
|
||||
new THREE.Vector3(100, 0, 0)]),
|
||||
new LineBasicMaterial({ color: 0xff0000 }) // red
|
||||
)
|
||||
const y = new Line(
|
||||
new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0),
|
||||
new THREE.Vector3(0, 100, 0)]),
|
||||
new LineBasicMaterial({ color: 0x00ff00 }) // green
|
||||
)
|
||||
const z = new Line(
|
||||
new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0),
|
||||
new THREE.Vector3(0, 0, 100)]),
|
||||
new LineBasicMaterial({ color: 0x0000ff }) // blue
|
||||
)
|
||||
|
||||
axes.add(x)
|
||||
axes.add(y)
|
||||
axes.add(z)
|
||||
|
||||
|
||||
return <primitive object={axes} />
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { Group, Mesh, MeshStandardMaterial, BufferGeometry } from 'three'
|
||||
import { useGLTF } from '@react-three/drei'
|
||||
|
||||
export default function Character() {
|
||||
// import glb file
|
||||
|
||||
// load the glb file in "/models/BASEmodel.glb"
|
||||
const { nodes, materials, scene } = useGLTF('/models/man.glb')
|
||||
|
||||
// rotate the character
|
||||
scene.rotation.x = -Math.PI / 2
|
||||
scene.rotation.y = 0
|
||||
|
||||
// enfoncer le personnage dans le sol
|
||||
scene.position.y = -1
|
||||
|
||||
return (
|
||||
<group>
|
||||
<primitive object={scene} />
|
||||
<directionalLight position={[0, 10, 0]} intensity={5} />
|
||||
</group>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Group } from 'three'
|
||||
import * as THREE from 'three'
|
||||
|
||||
|
||||
export default function Floor() {
|
||||
const floor = new Group()
|
||||
|
||||
const floorGeometry = new THREE.PlaneGeometry(100, 100, 100, 100)
|
||||
const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, side: THREE.DoubleSide })
|
||||
const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial)
|
||||
|
||||
floorMesh.rotation.x = -Math.PI / 2
|
||||
floorMesh.position.y = -2
|
||||
|
||||
floor.add(floorMesh)
|
||||
|
||||
return <primitive object={floor} />
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import React from 'react'
|
||||
import { Group } from 'three'
|
||||
import * as THREE from 'three'
|
||||
|
||||
interface MarkerProps {
|
||||
position: [number, number, number],
|
||||
color: string,
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
export default function Marker({ position, color, onClick }: MarkerProps) {
|
||||
|
||||
const [positionState, setPositionState] = React.useState(position)
|
||||
|
||||
// Return the marker object
|
||||
// return <primitive object={marker} />
|
||||
return (
|
||||
<mesh position={positionState} rotation={[Math.PI,0,0]} onClick={onClick} onPointerOver={(e) => setPositionState([positionState[0], positionState[1], positionState[2] + 0.1])} onPointerOut={(e) => setPositionState(position)}>
|
||||
<coneGeometry args={[0.15, 0.6, 6]} />
|
||||
<meshStandardMaterial color={color} side={THREE.DoubleSide} />
|
||||
</mesh>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
// src/components/Ocean.tsx
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { Water, WaterOptions } from 'three/examples/jsm/objects/Water.js';
|
||||
import { WaterMesh, WaterMeshOptions } from 'three/examples/jsm/objects/Water2Mesh.js';
|
||||
|
||||
const Ocean: React.FC = () => {
|
||||
|
||||
const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
|
||||
const waterOption:WaterOptions = {
|
||||
textureWidth: 512,
|
||||
textureHeight: 512,
|
||||
waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function (texture) {
|
||||
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
||||
}),
|
||||
alpha: 0.9,
|
||||
sunDirection: new THREE.Vector3(),
|
||||
sunColor: 0xffffff,
|
||||
waterColor: '#001e0f',
|
||||
distortionScale: 3.7,
|
||||
fog: true,
|
||||
|
||||
|
||||
};
|
||||
const water = new Water(waterGeometry, waterOption);
|
||||
water.rotation.x = -Math.PI / 2;
|
||||
water.position.y = -1;
|
||||
|
||||
|
||||
const waterRef = useRef<THREE.Mesh>(null);
|
||||
useEffect(() => {
|
||||
if (waterRef.current) {
|
||||
waterRef.current.add(water);
|
||||
}
|
||||
}, [waterRef]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
water.material.uniforms['time'].value += 0.1 / 60.0;
|
||||
};
|
||||
animate();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<mesh ref={waterRef}>
|
||||
<meshStandardMaterial />
|
||||
</mesh>
|
||||
);
|
||||
};
|
||||
|
||||
export default Ocean;
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
interface ModalProps {
|
||||
state: "none" | "flex",
|
||||
setState: (state: "none" | "flex") => void
|
||||
question : {
|
||||
question: string,
|
||||
reponse_idx: number,
|
||||
choix: string[]
|
||||
},
|
||||
valides?: [boolean[], React.Dispatch<React.SetStateAction<boolean[]>>],
|
||||
markerIndex?: number
|
||||
}
|
||||
|
||||
export default function Modal({ state, setState, question, valides, markerIndex }: ModalProps) {
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
console.log(state, setState, question)
|
||||
return (
|
||||
<div style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
display: state
|
||||
}}>
|
||||
<div style={{
|
||||
width: "40%",
|
||||
height: "40%",
|
||||
backgroundColor: "white",
|
||||
borderRadius: 10,
|
||||
padding: 20
|
||||
}}>
|
||||
{
|
||||
isSuccess ? <p>CONGRATULATIONS</p> : isSubmitted && !isSuccess && <p>WRONG : CORRECT ANSWER IS {question.choix[question.reponse_idx]}</p>
|
||||
}
|
||||
<h2>{question.question}</h2>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
{
|
||||
question.choix.map((choix, index) => (
|
||||
<button key={index} onClick={() => {
|
||||
setIsSubmitted(true);
|
||||
if (index === question.reponse_idx) {
|
||||
console.log("Correct")
|
||||
setIsSuccess(true);
|
||||
const newValides = [...valides![0]];
|
||||
newValides[markerIndex!] = true;
|
||||
valides;
|
||||
|
||||
|
||||
} else {
|
||||
console.log("Wrong")
|
||||
setIsSuccess(false);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: isSubmitted && index === question.reponse_idx ? "green" : isSubmitted && index !== question.reponse_idx ? "red" : "white",
|
||||
color: isSubmitted && index === question.reponse_idx ? "white" : "black"
|
||||
}}
|
||||
disabled={isSubmitted}
|
||||
>{choix}</button>
|
||||
))
|
||||
}
|
||||
<div/>
|
||||
<button onClick={() => {
|
||||
setIsSubmitted(false);
|
||||
setIsSuccess(false);
|
||||
setState("none");
|
||||
}}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
|
@ -1,154 +1,9 @@
|
|||
import { Canvas } from "@react-three/fiber";
|
||||
import { OrbitControls, PerspectiveCamera, Sky } from "@react-three/drei";
|
||||
import * as THREE from "three";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import Ocean from "../components/3d/Ocean";
|
||||
import Axes from "../components/3d/Axes";
|
||||
import Character from "../components/3d/Character";
|
||||
import Floor from "../components/3d/Floor";
|
||||
import Marker from "../components/3d/Marker";
|
||||
import Modal from "../components/Modal";
|
||||
import { randInt } from "three/src/math/MathUtils.js";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default function GamePage() {
|
||||
const [stateModal, setStateModal] = useState("none" as "none" | "flex");
|
||||
const [questionIndex, setQuestionIndex] = useState(0);
|
||||
|
||||
const QuestionList = [
|
||||
// Ensemble de questions sur la polution des océans
|
||||
// {question:string, reponse_idx:int, choix:[string, string, string, string]}
|
||||
{
|
||||
question: "Quel est le plus grand océan du monde ?",
|
||||
reponse_idx: 1,
|
||||
choix: ["Océan Atlantique", "Océan Pacifique", "Océan Indien", "Océan Arctique"]
|
||||
},
|
||||
{
|
||||
question: "Comment s'appelle les continents de plastique dans les océans ?",
|
||||
reponse_idx: 2,
|
||||
choix: ["Plastico", "Plastiland", "Plastiques", "Plastiques"]
|
||||
},
|
||||
{
|
||||
question: "Quel est le nom de la grande masse d'eau salée qui recouvre la majorité de la surface de la Terre ?",
|
||||
reponse_idx: 3,
|
||||
choix: ["Mer", "Lac", "Océan", "Rivière"]
|
||||
},
|
||||
{
|
||||
question: "Quel est l'océan le plus froid ?",
|
||||
reponse_idx: 0,
|
||||
choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
|
||||
},
|
||||
{
|
||||
question: "Quel est l'océan le plus chaud ?",
|
||||
reponse_idx: 1,
|
||||
choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
|
||||
},
|
||||
{
|
||||
question: "Quel est l'océan le plus profond ?",
|
||||
reponse_idx: 1,
|
||||
choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
|
||||
},
|
||||
{
|
||||
question: "Quel est l'océan le plus grand ?",
|
||||
reponse_idx: 2,
|
||||
choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const [valides, setValides] = useState([false, false, false, false, false, false]);
|
||||
const [markerIndex, setMarkerIndex] = useState(0);
|
||||
|
||||
const askQuestion = (markerIndex: number) => {
|
||||
setQuestionIndex(randInt(0, QuestionList.length - 1));
|
||||
setStateModal("flex");
|
||||
setMarkerIndex(markerIndex);
|
||||
}
|
||||
|
||||
const MakerList = [
|
||||
{ position: [0, -0.1, 0], onClick: () => askQuestion(0) }, // body
|
||||
{ position: [-0.5, -0.1, 2.5], onClick: () => askQuestion(1) }, // left foot
|
||||
{ position: [0.5, -0.1, 2.5], onClick: () => askQuestion(2) }, // right foot
|
||||
{ position: [-1, -0.1, 1], onClick: () => askQuestion(3) }, // left hand
|
||||
{ position: [1, -0.1, 1], onClick: () => askQuestion(4) }, // right hand
|
||||
{ position: [0, -0.1, -1], onClick: () => askQuestion(5) }, // head
|
||||
]
|
||||
|
||||
// Win condition
|
||||
useEffect(() => {
|
||||
if (valides.every(valide => valide)) {
|
||||
|
||||
}
|
||||
}, [valides])
|
||||
|
||||
|
||||
console.log(stateModal, setStateModal);
|
||||
return (
|
||||
<div id="canvas-container"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: -1
|
||||
}}
|
||||
>
|
||||
{ !valides.every(valide => valide) === true ?
|
||||
<p
|
||||
style={{
|
||||
position: "relative",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "5%",
|
||||
backgroundColor: "rgba(0, 0, 0, 1)",
|
||||
color: "white",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: 0
|
||||
}}
|
||||
> <strong>Hint : </strong> Répondez correctement aux questions pour sauver le personnage</p>
|
||||
: <p
|
||||
style={{
|
||||
position: "relative",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "5%",
|
||||
backgroundColor: "rgba(0, 0, 0, 1)",
|
||||
color: "white",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: 0
|
||||
}}
|
||||
> <strong>Good Game : </strong> Bravo, vous avez sauvé le personnage</p>
|
||||
}
|
||||
<Canvas>
|
||||
<Sky sunPosition={[100, 10, 100]} />
|
||||
<OrbitControls />
|
||||
<Ocean />
|
||||
<Axes />
|
||||
<Character />
|
||||
<Floor />
|
||||
{/* <Marker position={[0, 1, 0]} color="red" /> */}
|
||||
{MakerList.map((marker, index) => (
|
||||
<Marker key={index} position={marker.position} color={valides[index] ? "green" : "red"} onClick={marker.onClick} />
|
||||
))}
|
||||
<PerspectiveCamera makeDefault position={[0, 10, 3]} />
|
||||
</Canvas>
|
||||
<Modal state={stateModal} setState={setStateModal} question={QuestionList[questionIndex]} valides={[valides, setValides]} markerIndex={markerIndex} />
|
||||
<div>
|
||||
<h1>Game Page</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue