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

最新推荐文章于 2024-11-18 05:00:00 发布

Henrik698

最新推荐文章于 2024-11-18 05:00:00 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

分类专栏： three js学习文章标签： javascript

本文链接：https://blog.csdn.net/m0_37755995/article/details/127490865

本文介绍了如何在threejs项目中使用Helper工具和GUI调试器，包括AxesHelper、SpotLightHelper的使用，并展示了在Vite项目中配置和实现GUI调试器的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(