-
Notifications
You must be signed in to change notification settings - Fork 3
/
SceneThree.js
115 lines (91 loc) · 3.57 KB
/
SceneThree.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React, { useEffect } from 'react';
import { Camera, Complexity } from '../animationComponents';
import { AnimationController } from '../AnimationController';
import useAppStore from '../useAppStore';
import { Environment, OrbitControls, Plane } from '@react-three/drei';
import { Physics } from '@react-three/rapier';
import { Perf } from 'r3f-perf'
import { AxesHelper } from 'three';
/****************************
Scene Description:
Demonstrate the concepts of bottom-up causation, top-down causation, emergent entities
The scene will be 2D viewed from above
In SceneOne there is an abstract concept of an Emergent Entity that is represented by a Circle.
In this scene we will not use an abstract circle to show the boundary of the entity.
The boundary of an Emergent Entity be formed by many small spheres.
Having the emergent entity with a fluid boundary is not obvious. It could use a soft body physics simulation.
Instead of top-down: outside-in
Instead of bottom-up: inside-out
****************************/
function SceneThree() {
// Delay, animationComponent id, animationState
const animationSequence = [
//[0, 'emergent1', { variant: "default" }],
];
const physicsDebug = useAppStore((state) => state.getOption("physicsDebug"));
const cameraInitialState = {
position: [0, -200, 350],
zoom: 5,
left: window.innerWidth / -2,
right: window.innerWidth / 2,
top: window.innerHeight / 2,
bottom: window.innerHeight / -2,
near: 0.1,
far: 100
};
//timestep defaults to 1 / 60 timeStep={"vary"}
// Physics allowSleep={true} ?
// Physics is paused so we can manually control the step from Complexity
// numSolverIterations={2} numAdditionalFrictionIterations={2} erp={0.5} allowedLinearError={0.01}
// numSolverIterations={2} numAdditionalFrictionIterations={2}
useEffect(() => {
console.log("SceneThree mounting");
}, []);
function MyAxesHelper() {
return <primitive object={new AxesHelper(5)} />;
}
function Narration({ text }) {
useEffect(() => {
if ('speechSynthesis' in window) {
speak(text);
} else {
console.error("Speech Synthesis not supported in this browser.");
}
}, [text]);
return null; // No visual component needed, just the speech
}
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.pitch = 1;
utterance.rate = 1;
window.speechSynthesis.speak(utterance);
}
return (
<>
{/*<Narration text="Welcome to the virtual world. Enjoy your journey!" />*/}
<AnimationController animations={animationSequence}>
<Physics timeStep={"vary"} gravity={[0, 0, 0]} paused={true} debug={physicsDebug} >
<Perf
position={"bottom-left"}
//minimal={true}
//colorBlind={true}
//antialias={true}
/>
<>
<Complexity
id={"complex"}
/>
<MyAxesHelper />
</>
</Physics>
</AnimationController>
<Camera
id={"camera"}
initialState={cameraInitialState}
/>
<Environment preset="sunset" />
<OrbitControls enablePan={true} />
</>
);
}
export default SceneThree;