feature: 灯光

src/views/three/index-1.vue

@@ -134,7 +134,7 @@ function initGui() {
   datGui.add(cube.position, "x").name("cube-x").min(-5).max(5).step(1);
 }
 
-function initLight() {
+function initPointLight() {
   hemiLight = new THREE.HemisphereLight("#bcffb1", "#000000", 1);
   scene.add(hemiLight);
   // ambientLight = new THREE.AmbientLight("#111111");
@@ -393,7 +393,7 @@ function draw() {
   initRender();
   initScene();
   initCamera();
-  initLight();
+  initPointLight();
   initModel();
   initControls();
   initStats();

src/views/three/index-2.vue

@@ -125,7 +125,7 @@ function initGui() {
   });
 }
 
-function initLight() {
+function initPointLight() {
   hemiLight = new THREE.HemisphereLight("#bcffb1", "#000000", 1);
   scene.add(hemiLight);
   // ambientLight = new THREE.AmbientLight("#111111");
@@ -255,7 +255,7 @@ function draw() {
   initRender();
   initScene();
   initCamera();
-  initLight();
+  initPointLight();
   initModel();
   initControls();
   initStats();

src/views/three/index.vue

@@ -18,11 +18,14 @@ import {
   initControl,
   initGui,
   initHemiLight,
-  initLight,
+  initPointLight,
   initPlaneMesh,
   initRender,
+  initSphereMesh,
   initStatus,
   startAnimate,
+  makeStar,
+  initSpotLight,
 } from "./util";
 
 /**
@@ -40,30 +43,19 @@ onMounted(() => {
 
   const plane = initPlaneMesh();
   const box = initBoxMesh();
-  const light = initLight();
-  const hemiLight = initHemiLight();
+  const sphere = initSphereMesh();
+  const plight = initPointLight();
+  const star = makeStar();
+  const slight = initSpotLight();
 
-  activeShadow(box, plane, hemiLight);
-  scene.add(box).add(plane).add(light).add(hemiLight);
+  box.position.set(0, 5, 0);
+  sphere.position.set(20, 10, 10);
+  plight.position.set(40, 30, 0);
+  star.position.set(0, 20, 0);
+  slight.position.set(-30, 20, 0);
+  activeShadow(box, plane, sphere, plight, star, slight);
 
-  // const directionalLight = new THREE.DirectionalLight("#ffffff");
-  // directionalLight.position.set(-40, 60, -10);
-
-  // 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(directionalLight);
+  scene.add(box).add(plane).add(sphere).add(plight).add(star).add(slight);
 
   const gui = initGui();
 
@@ -73,6 +65,42 @@ onMounted(() => {
   scene.add(axes);
   render.render(scene, camera);
   addResizeAdapter(camera, render);
+  const starFolder = gui.addFolder("星星");
+  starFolder.add(star.position, "x").min(-50).max(50).name("坐标X");
+  starFolder.add(star.position, "y").min(20).max(100).name("坐标Y");
+  starFolder
+    .add(star.material, "emissiveIntensity")
+    .min(1)
+    .max(10)
+    .name("自发光强度");
+
+  starFolder
+    .add(star.children[0], "intensity")
+    .min(0)
+    .max(1000)
+    .name("光照强度");
+
+  const slightFolder = gui.addFolder("聚光灯");
+  slightFolder
+    .add(slight.position, "x")
+    .min(-50)
+    .max(50)
+    .name("聚光灯X")
+    .onChange(() => {
+      slight.target.position.set(0, 0, 0);
+    });
+  slightFolder
+    .add(slight.position, "y")
+    .min(0)
+    .max(50)
+    .name("聚光灯Y")
+    .onChange(() => {
+      slight.target.position.set(0, 0, 0);
+    });
+
+  slightFolder.add(slight, "angle").min(0).max(Math.PI).name("angle");
+  slightFolder.add(slight, "penumbra").min(0).max(1).name("penumbra");
+  slightFolder.add(slight, "decay").min(0).max(10).name("decay");
 
   startAnimate(() => {
     status.update();

src/views/three/util.js

@@ -92,19 +92,40 @@ export function initBoxMesh() {
   );
 }
 
+export function initSphereMesh() {
+  return new THREE.Mesh(
+    new THREE.SphereGeometry(5),
+    new THREE.MeshStandardMaterial({
+      color: 0xffffff,
+    })
+  );
+}
+
 export function initPlaneMesh() {
   const mesh = new THREE.Mesh(
     new THREE.PlaneGeometry(100, 100),
     new THREE.MeshStandardMaterial({
-      color: 0x0000ff,
-      side: THREE.DoubleSide,
+      color: 0xcccccc,
     })
   );
-
   mesh.rotation.x = -Math.PI / 2;
   return mesh;
 }
 
+export function makeStar() {
+  const sphere = new THREE.Mesh(
+    new THREE.SphereGeometry(0.4),
+    new THREE.MeshStandardMaterial({
+      color: 0xffffff,
+      emissive: 0xffffff, // 自发光颜色
+      emissiveIntensity: 10, // 自发光强度
+    })
+  );
+  const plight = initPointLight();
+  sphere.add(plight);
+  return sphere;
+}
+
 const hemiLight = new THREE.HemisphereLight("#ffffff", "#000000", 1);
 scene.add(hemiLight);
 
@@ -112,10 +133,18 @@ export function initHemiLight() {
   return new THREE.HemisphereLight("#ffffff", "#000000", 1);
 }
 
-export function initLight() {
-  const light = new THREE.PointLight(0xffffff, 100);
+export function initPointLight() {
+  const light = new THREE.PointLight(0xffffff, 200);
+  light.castShadow = true;
+  return light;
+}
+
+export function initSpotLight() {
+  const light = new THREE.SpotLight(0xffffff, 200, 100, 1.7, 1, 0.8);
   light.castShadow = true;
-  light.position.set(50, 50, 0);
+  light.target.position.set(0, 0, 0);
+  light.shadow.mapSize.width = 1024;
+  light.shadow.mapSize.height = 1024;
   return light;
 }