ThreeJs学习笔记【day12】光照【1】

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 >>

探索光照之前，首先需要调整一下相机的位置和角度，然后还需要添加一个控制模块，方便我们进行观察,OrbitControls是可选模块，我们需要手动引入进来，因为是script的方式引入，需要把script的type设置为module，还需要修改OrbitControls.js import three 的部分，修改node_modules路径为绝对路径

update in 2022年8月22日11:04:34 这里其实可以直接用npm 包的形式去使用，这里用html实现仅仅是想图个方便，但是没想到反而更麻烦了，因为通过npm包下载然后复制出的threeJs，他的examples里都是基于npm 模块化 去引入的，需要改动threejs的地址才能正常运行，假如是react项目内引入或者vue项目内引入，直接import对应对象就可以了

import * as THREE from 'https://pic.qy566.com/threeJs/three.module.js';
import {OrbitControls} from 'https://pic.qy566.com/threeJs/examples/jsm/controls/OrbitControls.js'
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});

const fov = 45;
const aspect = 2;  // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 10, 20);

const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 5, 0);
controls.update();

接下来，我们利用上一篇学习的纹理知识，来创建一个地平面，来承载接下来要展示的物体

纹理图片是这样一个2x2的方格，图片地址是 2x2图片地址

首先加载这个纹理，设置重复模式wrapS, wrapT，采样模式magFilter以及重复的次数。因为贴图是 2x2 大小，通过设置成平铺模式，并且重复次数是边长的一半，就可以让每个格子正好是1个单位的大小。然后创建一个平面几何体一个网格，让网格去加载纹理和平面几何体，设置渲染模式为双面，因为默认渲染是Y是正轴，所以渲染出来的平面是XY的，需要对网格进行旋转，我们旋转90°也就是0.5 PI，（2PI = 360deg）

  {
    const planeSize = 40;

    const loader = new THREE.TextureLoader();
    const texture = loader.load('https://threejs.org/manual/examples/resources/images/checker.png');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.magFilter = THREE.NearestFilter;
    const repeats = planeSize / 2;
    texture.repeat.set(repeats, repeats);

    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshPhongMaterial({
      map: texture,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -.5;
    scene.add(mesh);
  }

然后就会形成这个40x40的平面

接下来我们再添加一个球体，一个正方体，接下来就可以观察光源了，代码将会以代码片段的方式进行引入