ABI-Web-Apps · LinkunGao · Nov 23, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+/threejs-example/example_01/node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1 +1,16 @@
-# threejs-modules
+# threejs-modules
+
+- build a project
+
+  npm init @vitejs/app
+
+- intsall three.js pakeage
+
+  npm install --save three
+
+- run project
+  npm run dev
+
+## toturial
+
+https://threejsfundamentals.org/threejs/lessons/zh_cn/
diff --git a/threejs-example/example_01/.gitignore b/threejs-example/example_01/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/threejs-example/example_01/assets/img/icon/7.jpeg b/threejs-example/example_01/assets/img/icon/7.jpeg
diff --git a/threejs-example/example_01/assets/img/icon/Bulbasaur.png b/threejs-example/example_01/assets/img/icon/Bulbasaur.png
diff --git a/threejs-example/example_01/assets/img/icon/Charmander.png b/threejs-example/example_01/assets/img/icon/Charmander.png
diff --git a/threejs-example/example_01/assets/img/icon/Farfetch'd.png b/threejs-example/example_01/assets/img/icon/Farfetch'd.png
diff --git a/threejs-example/example_01/assets/img/icon/Jigglypuff.png b/threejs-example/example_01/assets/img/icon/Jigglypuff.png
diff --git a/threejs-example/example_01/assets/img/icon/Pikachu-music.png b/threejs-example/example_01/assets/img/icon/Pikachu-music.png
diff --git a/threejs-example/example_01/assets/img/icon/Pikachu.png b/threejs-example/example_01/assets/img/icon/Pikachu.png
diff --git a/threejs-example/example_01/assets/img/icon/Snorlax.png b/threejs-example/example_01/assets/img/icon/Snorlax.png
diff --git a/threejs-example/example_01/assets/img/icon/Squirtle.png b/threejs-example/example_01/assets/img/icon/Squirtle.png
diff --git a/threejs-example/example_01/assets/img/moon.jpg b/threejs-example/example_01/assets/img/moon.jpg
diff --git a/threejs-example/example_01/assets/img/normal.jpg b/threejs-example/example_01/assets/img/normal.jpg
diff --git a/threejs-example/example_01/assets/img/space.jpg b/threejs-example/example_01/assets/img/space.jpg
diff --git a/threejs-example/example_01/favicon.svg b/threejs-example/example_01/favicon.svg
diff --git a/threejs-example/example_01/index.html b/threejs-example/example_01/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <canvas id="bg"></canvas>
+    <main>
+      <h6>Three.js</h6>
+      <!-- <p>const array1 = [1, 2, 3, 4];</p>
+      <hr />
+      <p>// fill with 0 from position 2 until position 4</p>
+      <p>console.log(array1.fill(0, 2, 4));</p>
+      <p>// expected output: [1, 2, 0, 0]</p>
+      <p>// fill with 5 from position 1</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>// expected output: [1, 5, 5, 5]</p>
+      <p>console.log(array1.fill(6));// expected output: [6, 6, 6, 6]</p>
+      <p>// fill with 0 from position 2 until position 4</p>
+      <p>console.log(array1.fill(0, 2, 4));</p>
+      <p>// expected output: [1, 2, 0, 0]</p>
+      <p>// fill with 5 from position 1</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>// expected output: [1, 5, 5, 5]</p>
+      <p>console.log(array1.fill(6));// expected output: [6, 6, 6, 6]</p>
+      <p>// fill with 0 from position 2 until position 4</p>
+      <p>console.log(array1.fill(0, 2, 4));</p>
+      <p>// expected output: [1, 2, 0, 0]</p>
+      <p>// fill with 5 from position 1</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>// expected output: [1, 5, 5, 5]</p>
+      <p>console.log(array1.fill(6));// expected output: [6, 6, 6, 6]</p>
+      <p>// fill with 0 from position 2 until position 4</p>
+      <p>console.log(array1.fill(0, 2, 4));</p>
+      <p>// expected output: [1, 2, 0, 0]</p>
+      <p>// fill with 5 from position 1</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>// expected output: [1, 5, 5, 5]</p>
+      <p>console.log(array1.fill(6));// expected output: [6, 6, 6, 6]</p>
+      <p>// fill with 0 from position 2 until position 4</p>
+      <p>console.log(array1.fill(0, 2, 4));</p>
+      <p>// expected output: [1, 2, 0, 0]</p>
+      <p>// fill with 5 from position 1</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>console.log(array1.fill(5, 1));</p>
+      <p>// expected output: [1, 5, 5, 5]</p>
+      <p>console.log(array1.fill(6));// expected output: [6, 6, 6, 6]</p> -->
+    </main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/threejs-example/example_01/main.js b/threejs-example/example_01/main.js
@@ -0,0 +1,132 @@
+import "./style.css";
+
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
+// get a scene
+const scene = new THREE.Scene();
+//
+// get a camera
+const camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.01,
+  1000
+);
+// get a renderer to render the canvas
+const renderer = new THREE.WebGLRenderer({
+  canvas: document.querySelector("#bg"),
+});
+
+// set the renderer pixel
+renderer.setPixelRatio(window.devicePixelRatio);
+// set the render size
+renderer.setSize(window.innerWidth, window.innerHeight);
+camera.position.setZ(30);
+
+// then add object
+// the {x,y,z} points that makeup a shape
+const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
+// add color so use material -> the wrapping papper for an object
+
+// const material = new THREE.MeshBasicMaterial({
+//   color: 0xff6347,
+//   wireframe: true,
+// }); //this one does't need light
+
+// this material needs light
+const material = new THREE.MeshStandardMaterial({ color: 0xff6347 });
+
+// add object and material into a mesh
+const torus = new THREE.Mesh(geometry, material);
+
+// the let mesh be added into scene
+scene.add(torus);
+
+// so add a light here
+const pointLight = new THREE.PointLight(0xffffff);
+pointLight.position.set(5, 5, 5);
+
+const ambientLight = new THREE.AmbientLight(0xffffff);
+scene.add(pointLight, ambientLight);
+
+// add light helper here
+const lightHelper = new THREE.PointLightHelper(pointLight);
+const gridHelper = new THREE.GridHelper(200, 50);
+scene.add(lightHelper, gridHelper);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+
+function addStar() {
+  const geometry = new THREE.SphereGeometry(0.25, 24, 24);
+  const material = new THREE.MeshStandardMaterial({ color: "#ffffffff" });
+  const star = new THREE.Mesh(geometry, material);
+
+  const [x, y, z] = Array(3)
+    .fill()
+    .map(() => THREE.MathUtils.randFloatSpread(100));
+  star.position.set(x, y, z);
+  scene.add(star);
+}
+Array(200).fill().forEach(addStar);
+
+const spaceTexture = new THREE.TextureLoader().load("/assets/img/space.jpg");
+scene.background = spaceTexture;
+
+renderer.render(scene, camera);
+
+// Avatar
+const pikachu = new THREE.TextureLoader().load("/assets/img/icon/Pikachu.png");
+const pik = new THREE.Mesh(
+  new THREE.BoxGeometry(3, 3, 3),
+  new THREE.MeshBasicMaterial({ map: pikachu })
+);
+// pik.position.set(12, 10, 0);
+
+scene.add(pik);
+// Moon
+const moonTexture = new THREE.TextureLoader().load("/assets/img/moon.jpg");
+const normalTexture = new THREE.TextureLoader().load("/assets/img/normal.jpg");
+
+const moon = new THREE.Mesh(
+  new THREE.SphereGeometry(3, 32, 32),
+  new THREE.MeshStandardMaterial({
+    map: moonTexture,
+    normalMap: normalTexture,
+  })
+);
+
+// moon.position.set(20, 20, 20);
+moon.position.z = 20;
+moon.position.setX(-5);
+
+scene.add(moon);
+
+// function moveCamera() {
+//   const t = document.body.getBoundingClientRect().top;
+//   moon.rotation.x += 0.05;
+//   moon.rotation.y += 0.075;
+//   moon.rotation.z += 0.05;
+
+//   pik.rotation.y += 0.01;
+//   pik.rotation.z += 0.01;
+
+//   camera.position.z = t * -0.01;
+//   camera.position.x = t * -0.0002;
+//   camera.position.y = t * -0.0002;
+// }
+// document.body.onscroll = moveCamera;
+
+function animate() {
+  requestAnimationFrame(animate);
+  torus.rotation.x += 0.01;
+  torus.rotation.y += 0.005;
+  torus.rotation.z += 0.01;
+
+  moon.rotation.y += 0.01;
+
+  controls.update();
+  renderer.render(scene, camera);
+}
+
+animate();