three

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.4.0",
     "codemirror": "^6.0.1",
     "core-js": "^3.8.3",
+    "dat.gui": "^0.7.9",
     "reset-css": "^5.0.1",
     "three": "^0.156.1",
     "three-addons": "^1.2.0",
@@ -30,6 +31,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@types/dat.gui": "^0.7.10",
     "@types/three": "^0.155.1",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",

src/views/three/index.vue

@@ -4,6 +4,9 @@
 <script setup>
 import * as THREE from "three";
 import * as SceneUtils from "three/examples/jsm/utils/SceneUtils";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import Stats from "three/examples/jsm/libs/stats.module";
+import * as dat from "dat.gui";
 import { onMounted, ref } from "vue";
 
 /**
@@ -11,86 +14,369 @@ import { onMounted, ref } from "vue";
  */
 const wrap = ref();
 
-const [canvasW, canvasH] = [1000, 500];
+const [canvasW, canvasH] = [1500, 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);
+let renderer;
+function initRender() {
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setClearColor(0x444444, 1);
+  //告诉渲染器需要阴影效果
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
   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,
+}
+
+let camera;
+function initCamera() {
+  camera = new THREE.PerspectiveCamera(
+    50,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    10000
+  );
+  camera.position.set(0, 40, 100);
+  camera.lookAt(new THREE.Vector3(0, 0, 0));
+}
+
+let scene;
+function initScene() {
+  scene = new THREE.Scene();
+}
+
+//初始化dat.GUI简化试验流程
+let gui;
+
+let hemiLight, ambientLight, directionalLight, directionalLightHelper;
+function initGui() {
+  //声明一个保存需求修改的相关数据的对象
+  gui = {
+    directionalLight: "#ffffff", //点光源
+    directionalLightIntensity: 1, //灯光强度
+    visible: true, //是否可见
+    castShadow: true,
+    exponent: 30,
+    target: "plane",
+    debug: true,
+    groundColor: "#00ff00",
+    skyColor: "#0000ff",
+    hemiLightIntensity: 0.3,
+    dLightX: -40,
+    dLightY: 60,
+    dLightZ: -10,
+  };
+  let datGui = new dat.GUI();
+  //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
+
+  const ambientFolder = datGui.addFolder("环境光");
+
+  ambientFolder.addColor(gui, "skyColor").onChange(function (e) {
+    hemiLight.color = new THREE.Color(e);
   });
-  var materialLambert = new THREE.MeshLambertMaterial({
-    color: 0x777777,
-    wireframe: true,
+  ambientFolder.addColor(gui, "groundColor").onChange(function (e) {
+    hemiLight.groundColor = new THREE.Color(e);
   });
-  var materialNormal = new THREE.MeshNormalMaterial({
-    color: 0x777777,
-    wireframe: true,
+  ambientFolder.add(gui, "hemiLightIntensity", 0, 1).onChange(function (e) {
+    hemiLight.intensity = e;
   });
-  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;
+  ambientFolder.addColor(gui, "directionalLight").onChange(function (e) {
+    directionalLight.color = new THREE.Color(e);
+  });
+
+  datGui
+    .add(gui, "dLightX", {
+      left: -100,
+      center: 0,
+      right: 100,
+      // 左: -100,//可以用中文
+      // 中: 0,
+      // 右: 100
+    })
+    .onChange(function (e) {
+      directionalLight.position.setX(e);
+    });
+
+  datGui.add(gui, "dLightY", -100, 100).onChange(function (e) {
+    directionalLight.position.setY(e);
+  });
+
+  datGui.add(gui, "dLightZ", -100, 100).onChange(function (e) {
+    directionalLight.position.setZ(e);
+  });
+
+  datGui.add(gui, "directionalLightIntensity", 0, 5).onChange(function (e) {
+    directionalLight.intensity = e;
+  });
+  datGui.add(gui, "visible").onChange(function (e) {
+    directionalLight.visible = e;
+  });
+  datGui.add(gui, "castShadow").onChange(function (e) {
+    directionalLight.castShadow = e;
+  });
+  datGui.add(gui, "debug").onChange(function (e) {
+    if (e) {
+      let debug = new THREE.CameraHelper(directionalLight.shadow.camera);
+      debug.name = "debug";
+      scene.add(debug);
+    } else {
+      let debug = scene.getObjectByName("debug");
+      scene.remove(debug);
     }
-    camera.position.set(cx, cy, cz);
-    camera.lookAt(cube.position);
-    renderer.render(scene, camera);
+  });
+}
+
+function initLight() {
+  hemiLight = new THREE.HemisphereLight("#bcffb1", "#000000", 1);
+  scene.add(hemiLight);
+  // ambientLight = new THREE.AmbientLight("#111111");
+  // scene.add(ambientLight);
+
+  directionalLight = new THREE.DirectionalLight("#ffffff");
+  directionalLight.position.set(-40, 60, -10);
+
+  directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight);
+
+  directionalLight.shadow.camera.near = 20; //产生阴影的最近距离
+  directionalLight.shadow.camera.far = 200; //产生阴影的最远距离
+  directionalLight.shadow.camera.left = -100; //产生阴影距离位置的最左边位置
+  directionalLight.shadow.camera.right = 100; //最右边
+  directionalLight.shadow.camera.top = 100; //最上边
+  directionalLight.shadow.camera.bottom = -100; //最下面
+
+  //这两个值决定使用多少像素生成阴影 默认512
+  directionalLight.shadow.mapSize.height = 1024;
+  directionalLight.shadow.mapSize.width = 1024;
+
+  //告诉平行光需要开启阴影投射
+  directionalLight.castShadow = true;
+
+  // scene.add(directionalLightHelper);
+
+  scene.add(directionalLight);
+}
+
+let cube, plane;
+function initModel() {
+  //辅助工具
+  let helper = new THREE.AxesHelper(100);
+  scene.add(helper);
+
+  const bufferGeometry = new THREE.BufferGeometry();
+
+  bufferGeometry.attributes.position = new THREE.BufferAttribute(
+    new Float32Array([
+      -10,
+      0,
+      0, // 0
+      10,
+      0,
+      0, // 1
+      0,
+      10,
+      0, // 2
+      0,
+      0,
+      5, // 3
+      0,
+      10,
+      5, // 4
+      0,
+      0,
+      15, // 5
+    ]),
+    3
+  );
+
+  scene.add(
+    new THREE.Points(
+      bufferGeometry,
+      new THREE.MeshBasicMaterial({
+        color: 0x00ff00,
+        side: THREE.DoubleSide,
+      })
+    )
+  );
+
+  //球体
+  let sphereGeometry = new THREE.SphereGeometry(10, 30, 30);
+  let sphereMaterial = new THREE.MeshLambertMaterial({
+    color: 0xeeeeee,
+    transparent: true,
+    opacity: 0.5,
+  });
+
+  let material = new THREE.MeshPhongMaterial({
+    color: 0x0000ff,
+    specular: 0x4488ee,
+    shininess: 12,
   });
 
-  // 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);
+  let sphere = new THREE.Mesh(
+    sphereGeometry,
+    new THREE.MeshPhongMaterial({
+      color: 0xcccccc,
+      shininess: 20,
+      specular: 0xffffff,
+    })
+  );
+  sphere.position.set(-20, 20, 0);
+
+  sphere.castShadow = true;
+
+  scene.add(sphere);
+
+  const cylinderGeometry = new THREE.CylinderGeometry(5, 5, 10);
+  const cylinder = new THREE.Mesh(
+    cylinderGeometry,
+    new THREE.MeshLambertMaterial({
+      color: 0xeeeeee,
+    })
+  );
+  cylinder.castShadow = true;
+
+  cylinder.position.x = 50;
+  cylinder.position.y = 10;
+  cylinder.position.z = -10;
+
+  scene.add(cylinder);
+
+  const cylinderGeometry2 = new THREE.CylinderGeometry(0, 5, 10);
+  const cylinder2 = new THREE.Mesh(
+    cylinderGeometry2,
+    new THREE.MeshPhongMaterial({
+      color: 0xcccccc,
+      shininess: 20,
+      specular: 0xffffff,
+    })
+  );
+  cylinder2.castShadow = true;
+
+  cylinder2.position.x = 50;
+  cylinder2.position.y = 10;
+  cylinder2.position.z = -30;
+
+  scene.add(cylinder2);
+
+  //立方体
+  let cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
+
+  let cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x00ffff });
+
+  cube = new THREE.Mesh(
+    cubeGeometry,
+    new THREE.MeshPhongMaterial({
+      color: 0xcccccc,
+      shininess: 20,
+      specular: 0xffffff,
+    })
+  );
+  cube.position.x = 30;
+  cube.position.y = 5;
+  cube.position.z = -5;
+
+  //告诉立方体需要投射阴影
+  cube.castShadow = true;
+
+  scene.add(cube);
+
+  const geometry = new THREE.BoxGeometry(5, 5, 5);
+  //材质对象Material
+  const material2 = new THREE.MeshLambertMaterial({
+    color: 0x00ffff, //设置材质颜色
+  });
+  for (let i = 0; i < 10; i++) {
+    const mesh = new THREE.Mesh(geometry, material2); //网格模型对象Mesh
+    // 沿着x轴分布
+    mesh.position.set(-10, 5, -i * 10);
+    mesh.castShadow = true;
+
+    scene.add(mesh); //网格模型添加到场景中
   }
-  // 调用动画函数
+
+  //底部平面
+  let planeGeometry = new THREE.PlaneGeometry(5000, 5000, 20, 20);
+  let planeMaterial = new THREE.MeshLambertMaterial({ color: 0xaaaaaa });
+
+  plane = new THREE.Mesh(planeGeometry, planeMaterial);
+  plane.rotation.x = -0.5 * Math.PI;
+  plane.position.y = -0;
+
+  //告诉底部平面需要接收阴影
+  plane.receiveShadow = true;
+
+  scene.add(plane);
+}
+
+//初始化性能插件
+let stats;
+function initStats() {
+  stats = new Stats();
+  document.body.appendChild(stats.dom);
+}
+
+//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
+let controls;
+function initControls() {
+  controls = new OrbitControls(camera, renderer.domElement);
+
+  // 如果使用animate方法时，将此函数删除
+  //controls.addEventListener( 'change', render );
+  // 使动画循环使用时阻尼或自转 意思是否有惯性
+  controls.enableDamping = true;
+  //动态阻尼系数 就是鼠标拖拽旋转灵敏度
+  //controls.dampingFactor = 0.25;
+  //是否可以缩放
+  controls.enableZoom = true;
+  //是否自动旋转
+  controls.autoRotate = false;
+  //设置相机距离原点的最远距离
+  controls.minDistance = 50;
+  //设置相机距离原点的最远距离
+  controls.maxDistance = 200;
+  //是否开启右键拖拽
+  controls.enablePan = true;
+}
+
+function render() {
+  renderer.render(scene, camera);
+}
+
+//窗口变动触发的函数
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  render();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+function animate() {
+  //更新控制器
+  render();
+
+  //更新性能插件
+  stats.update();
+
+  controls.update();
+
+  requestAnimationFrame(animate);
+}
+
+function draw() {
+  initGui();
+  initRender();
+  initScene();
+  initCamera();
+  initLight();
+  initModel();
+  initControls();
+  initStats();
+
   animate();
+  window.onresize = onWindowResize;
+}
+
+onMounted(() => {
+  draw();
 });
 </script>

yarn.lock

@@ -1325,6 +1325,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/dat.gui@^0.7.10":
+  version "0.7.10"
+  resolved "https://registry.npmmirror.com/@types/dat.gui/-/dat.gui-0.7.10.tgz#e61b78c06ea5614397e8c2199fd0cd1afcd66675"
+  integrity sha512-sLifoNrvs4lgJkAUZcTB28dbWy0AM05Yc0BzTqHheK0tRYRVsJHoFLocB5heDbb5amaFLEXna41GOM6IG06oqA==
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.4"
   resolved "https://registry.npmmirror.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@@ -2957,6 +2962,11 @@ csstype@^3.1.1:
   resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+dat.gui@^0.7.9:
+  version "0.7.9"
+  resolved "https://registry.npmmirror.com/dat.gui/-/dat.gui-0.7.9.tgz#860cab06053b028e327820eabdf25a13cf07b17e"
+  integrity sha512-sCNc1OHobc+Erc1HqiswYgHdVNpSJUlk/Hz8vzOCsER7rl+oF/4+v8GXFUyCgtXpoCX6+bnmg07DedLvBLwYKQ==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"