threejs学习03-helper和Gui(调试器)的使用（AxesHelper、SpotLightHelper、GUI调试器）

threejs学习03-helper和Gui(调试器)的使用（AxesHelper、SpotLightHelper、GUI调试器）

在新建一个js文件在vite项目中：

03-helper-gui.js：

import * as THREE from 'three';
import {
    Plane } from 'three';
import {
   OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {
   GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'

let scene  ,camera , renderer ;
let axesHelper, controls, spotLightHelper;
let ambientLight, spotLight;
let plane, cylinder;
let gui;


initRenderer();
initCamera();
initScene();

initAxesHelper(); //目标物、坐标轴一定要在初始化Scene后面。
initControls(); //控制器

initAmbientLight();
initSpotLight();

initSpotLightHelper();

initMashes();
initShadow();

buildGUI();

render();

window.addEventListener('resize',function(){
   
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
})

function initRenderer(){
   
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio); //像素比率的设置
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

function initCamera(){
   
    camera = new THREE.PerspectiveCamera(40