修改文字

src/App.js

@@ -19,7 +19,8 @@ function App() {
     <div className="App">
       <Router>
         <Routes>
-          <Route element={ <Home /> } path="/" />
+          <Route element={ <Olympic /> } path="/" />
+          <Route element={ <Home /> } path="/home" />
           <Route element={ <City /> } path="/city" />
           <Route element={ <Earth /> } path="/earth" />
           <Route element={ <Demo /> } path="/demo" />

src/containers/Olympic/index.css

@@ -1,3 +1,13 @@
+.title{
+  position: fixed;
+  top:0;
+  left: 0;
+  right: 0;
+  height:10vh;
+  background: inherit;
+  text-align: center;
+  color:#DA1b18;
+}
 .olympic_loading {
   position: fixed;
   top: 0;

src/containers/Olympic/index.jsx

@@ -13,6 +13,7 @@ import skyTexture from './images/sky.jpg';
 import snowTexture from './images/snow.png';
 import treeTexture from './images/tree.png';
 import flagTexture from './images/flag.png';
+// import htc from './images/htc.png';
 require('./libs/GLTFLoader.js');
 import './index.css';
 
@@ -23,10 +24,23 @@ export default class Olympic extends React.Component {
   }
 
   state = {
-    loadingProcess: 0
+    loadingProcess: 0,
+    id:1,
+    idObj:{
+      1:'汪！',
+      5201314:'杨紫薇',
+      1210:'谢沛岑',
+      'xs':'谢思',
+      '月月1314':'月月5',
+    }
   }
 
   componentDidMount () {
+    const id =location.search.split('=')[1];
+    this.setState({
+      id:id||1
+    })
+    // console.log(id);
     this.initThree()
   }
 
@@ -159,6 +173,7 @@ export default class Olympic extends React.Component {
               child.material.metalness = .1;
               child.material.roughness = .1;
               child.material.map = new THREE.TextureLoader().load(flagTexture);
+              // child.material.map = new THREE.TextureLoader().load(htc);
             }
 
             // 旗杆
@@ -308,7 +323,7 @@ export default class Olympic extends React.Component {
 
       fiveCyclesGroup.scale.set(.036, .036, .036);
       fiveCyclesGroup.position.set(0, 10, -8);
-      scene.add(fiveCyclesGroup);
+      // scene.add(fiveCyclesGroup);
 
       // 创建雪花
       let texture = new THREE.TextureLoader().load(snowTexture);
@@ -407,8 +422,10 @@ export default class Olympic extends React.Component {
   }
 
   render () {
+    const {id ,idObj} =this.state;
     return (
       <div>
+        <h1 className="title">{idObj[id]} 情人节快乐！</h1>
         <div id="container"></div>
         {this.state.loadingProcess === 100 ? '' : (
           <div className="olympic_loading">