threejs基本知识3

threejs基本知识3 （基本常用材质）

AmbientLight / 基础环境光，MeshBasicMaterial / 基础材质，MeshNormalMaterial / 普通材质，MeshLambertMaterial / 兰伯特材质，MeshPhongMaterial / 高光材质，MeshStandardMaterial / 标准材质，MeshToonMaterial / 卡通材质，DirectionalLight / 类太阳光

	 const w = window.innerWidth; // 浏览器宽度

      const h = window.innerHeight; // 浏览器高度

      const scene = new THREE.Scene(); // 创建场景

      const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000); // 创建相机 （视角 宽高比 最近距离 最远距离）
      camera.position.set(1, 1, 5); // 相机位置
      camera.lookAt(0, 0, 0); // 相机视角

      基础环境光
      const light = new THREE.AmbientLight("#ffffff", 0.2); 

      模拟太阳光
      const directionalLight = new THREE.DirectionalLight("#ffffff");
      directionalLight.position.set(2, 2, 2); // 灯光位置

      const sphereGeometry = new THREE.SphereGeometry(0.5);

      基本材质 无需灯光可见
      const material = new THREE.MeshBasicMaterial({
      color: "red",
      wireframe: true,  // 展示线框结构
      visible: true,   // 控制材质显示隐藏
      });
      const material = new THREE.MeshBasicMaterial();
      material.color = new THREE.Color('red');

      普通材质 无需灯光可见
      const material = new THREE.MeshNormalMaterial({
      wireframe: true,   // 展示线框结构
      flatShading: true, // 棱角分明
      });

      兰伯特材质 更加贴近立体感 需要光源才可见
      const material = new THREE.MeshLambertMaterial({ color: "red" });

      高光材质 比兰伯特材质多了高光效果 需要光源才可见
      const material = new THREE.MeshPhongMaterial({
      color: "red",
      shininess: 50,  闪亮程度 默认是30 如果设置为0 则等同于兰伯特材质
      });

      标准材质 需要光源才可见 比高光材质多了金属程度
      const material = new THREE.MeshStandardMaterial({
      color: "red",
      roughness: 0.5, // 粗糙程度
      metalness: 0.5, // 金属程度
      });

      卡通材质
      const material = new THREE.MeshToonMaterial({ color: "red" });
      const mesh = new THREE.Mesh(sphereGeometry, material);

      scene.add(mesh);
      scene.add(light); // 灯光放入场景中
      scene.add(directionalLight);
      scene.add(axes);