three

package.json

@@ -20,6 +20,8 @@
     "codemirror": "^6.0.1",
     "core-js": "^3.8.3",
     "reset-css": "^5.0.1",
+    "three": "^0.156.1",
+    "three-addons": "^1.2.0",
     "vue": "^3.2.13",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.0.3",
@@ -28,6 +30,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@types/three": "^0.155.1",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
     "@vue/cli-plugin-babel": "~5.0.0",

src/components/navBar.vue

@@ -4,6 +4,7 @@
       <h1>Ludash</h1>
     </div>
     <div class="menu">
+      <RouterLink to="/three">three</RouterLink>
       <RouterLink to="/webgl">webgl</RouterLink>
       <RouterLink to="/flow">Flow</RouterLink>
       <RouterLink to="/install">安装</RouterLink>

src/router/index.js

@@ -58,6 +58,19 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/three",
+    name: "three",
+    component: DynamicComponent,
+    children: [
+      {
+        path: "",
+        name: "threeIndex",
+        component: () =>
+          import(/* webpackChunkName: "three" */ "../views/three/index.vue"),
+      },
+    ],
+  },
   {
     path: "/sdk",
     name: "sdk",

src/tsconfig.json

@@ -11,6 +11,7 @@
     "noUnusedLocals": true,
     "allowJs": true,
     "moduleResolution": "node",
+    "noEmit": true,
     "paths": {
       "@/*": ["*"]
     },

src/views/three/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="wrap"></div>
+</template>
+<script setup>
+import * as THREE from "three";
+import * as SceneUtils from "three/examples/jsm/utils/SceneUtils";
+import { onMounted, ref } from "vue";
+
+/**
+ * @type {import("vue").Ref<HTMLDivElement>}
+ */
+const wrap = ref();
+
+const [canvasW, canvasH] = [1000, 500];
+
+onMounted(() => {
+  var scene = new THREE.Scene();
+  var camera = new THREE.PerspectiveCamera(50, canvasW / canvasH, 0.1, 1000);
+  camera.position.set(10, 10, 10);
+  var renderer = new THREE.WebGLRenderer();
+  renderer.setSize(canvasW, canvasH);
+  wrap.value.appendChild(renderer.domElement);
+  var geometry = new THREE.BoxGeometry(4, 4, 4, 4, 4, 4);
+  var materialBasic = new THREE.MeshBasicMaterial({
+    color: 0xffffff,
+    wireframe: true,
+  });
+  var materialLambert = new THREE.MeshLambertMaterial({
+    color: 0x777777,
+    wireframe: true,
+  });
+  var materialNormal = new THREE.MeshNormalMaterial({
+    color: 0x777777,
+    wireframe: true,
+  });
+  var cube = SceneUtils.createMultiMaterialObject(geometry, [
+    // materialBasic,
+    materialNormal,
+    // materialLambert,
+  ]);
+
+  // var cube = new THREE.Mesh(geometry, materialLambert);
+  cube.position.set(0, 0, 0);
+  camera.lookAt(cube.position);
+  scene.add(cube);
+  var spotLight = new THREE.SpotLight(0xffffff);
+  spotLight.position.set(20, 20, 20);
+  spotLight.intensity = 1;
+  scene.add(spotLight);
+  var axes = new THREE.AxesHelper(1000);
+  scene.add(axes);
+  renderer.render(scene, camera);
+  let [cx, cy, cz] = [10, 10, 10];
+  window.addEventListener("keydown", function (e) {
+    console.log(e.keyCode);
+    switch (e.keyCode) {
+      case 38: // up
+        cy -= 1;
+        cx -= 1;
+        cz -= 1;
+        break;
+      case 40: // down
+        cy += 1;
+        cx += 1;
+        cz += 1;
+        break;
+      case 37: // left
+        cube.rotation.x -= 0.01;
+        cube.rotation.y -= 0.01;
+        break;
+      case 39: // right
+        cube.rotation.x += 0.01;
+        cube.rotation.y += 0.01;
+        break;
+    }
+    camera.position.set(cx, cy, cz);
+    camera.lookAt(cube.position);
+    renderer.render(scene, camera);
+  });
+
+  // 9、创建动画循环渲染函数
+  function animate() {
+    // 9.1 循环调用函数
+    requestAnimationFrame(animate);
+    // 每一次animate函数调用，都让网格比上一次 X 轴、Y 轴各旋转增加 0.01 弧度
+    cube.rotation.x += 0.01;
+    cube.rotation.y += 0.01;
+    cube.rotation.z += 0.01;
+    // cube.rotation.y += 0.01;
+    // 3.3 结合场景和相机进行渲染，即用摄像机拍下此刻的场景
+    renderer.render(scene, camera);
+  }
+  // 调用动画函数
+  animate();
+});
+</script>

yarn.lock

@@ -1290,6 +1290,11 @@
   resolved "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@tweenjs/tween.js@~18.6.4":
+  version "18.6.4"
+  resolved "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-18.6.4.tgz#40a3d0a93647124872dec8e0fd1bd5926695b6ca"
+  integrity sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.npmmirror.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -1464,6 +1469,28 @@
   dependencies:
     "@types/node" "*"
 
+"@types/stats.js@*":
+  version "0.17.0"
+  resolved "https://registry.npmmirror.com/@types/stats.js/-/stats.js-0.17.0.tgz#0ed81d48e03b590c24da85540c1d952077a9fe20"
+  integrity sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==
+
+"@types/three@^0.155.1":
+  version "0.155.1"
+  resolved "https://registry.npmmirror.com/@types/three/-/three-0.155.1.tgz#03e1cc9bf7132f50606254611ff5f68ccd682b05"
+  integrity sha512-uNUwnz/wWRxahjIqTtDYQ1qdE1R1py21obxfuILkT+kKrjocMwRLQQA1l8nMxfQU7VXb7CXu04ucMo8OqZt4ZA==
+  dependencies:
+    "@tweenjs/tween.js" "~18.6.4"
+    "@types/stats.js" "*"
+    "@types/webxr" "*"
+    fflate "~0.6.9"
+    lil-gui "~0.17.0"
+    meshoptimizer "~0.18.1"
+
+"@types/webxr@*":
+  version "0.5.4"
+  resolved "https://registry.npmmirror.com/@types/webxr/-/webxr-0.5.4.tgz#3d55a6427f9281d456843d754c99bf7804657fe3"
+  integrity sha512-41gfGLTtqXZhcmoDlLDHqMJDuwAMwhHwXf9Q2job3TUBsvkNfPNI/3IWVEtLH4tyY1ElWtfwIaoNeqeEX238/Q==
+
 "@types/ws@^8.5.5":
   version "8.5.5"
   resolved "https://registry.npmmirror.com/@types/ws/-/ws-8.5.5.tgz#af587964aa06682702ee6dcbc7be41a80e4b28eb"
@@ -3528,6 +3555,11 @@ faye-websocket@^0.11.3:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fflate@~0.6.9:
+  version "0.6.10"
+  resolved "https://registry.npmmirror.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
+  integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
+
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
@@ -4313,6 +4345,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lil-gui@~0.17.0:
+  version "0.17.0"
+  resolved "https://registry.npmmirror.com/lil-gui/-/lil-gui-0.17.0.tgz#b41ae55d0023fcd9185f7395a218db0f58189663"
+  integrity sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==
+
 lilconfig@^2.0.3:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
@@ -4505,6 +4542,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+meshoptimizer@~0.18.1:
+  version "0.18.1"
+  resolved "https://registry.npmmirror.com/meshoptimizer/-/meshoptimizer-0.18.1.tgz#cdb90907f30a7b5b1190facd3b7ee6b7087797d8"
+  integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmmirror.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -6089,6 +6131,23 @@ thread-loader@^3.0.0:
     neo-async "^2.6.2"
     schema-utils "^3.0.0"
 
+three-addons@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/three-addons/-/three-addons-1.2.0.tgz#a36293e2489bdda08be8efc31291485b41de1560"
+  integrity sha512-tmPGLtcsDb0Bt6bVU82y9KX0rdAzizr7t2rFjBecWq4pvfGMY3l+yCfvntGYeZGJ9cjsli10cHSWHsN1pTy4mA==
+  dependencies:
+    three "^0.92.0"
+
+three@^0.156.1:
+  version "0.156.1"
+  resolved "https://registry.npmmirror.com/three/-/three-0.156.1.tgz#bab4fec121a5b3975eb4f4d227d9c912171eb399"
+  integrity sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==
+
+three@^0.92.0:
+  version "0.92.0"
+  resolved "https://registry.npmmirror.com/three/-/three-0.92.0.tgz#8d3d1f5af890e62da7f4cb45d20c09fa51057dcd"
+  integrity sha512-yQzuwMDEyxc+TFHn8c+LtpK1Sqpy8I3FAr+1EoqqLmNmv6hjfFqB8PlYztRLuM4FMFb4hIbpUoP7Gc9bPQvkCg==
+
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"