threejs学习02-聚光灯和投影 (GeometryCylinder 、GeometryPlane、OrbitControls、AmbientLight、Spotlight & Shadow)

Henrik698

已于 2022-10-24 13:34:53 修改

阅读量365

点赞数

CC 4.0 BY-SA版权

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

于 2022-10-24 13:29:43 首次发布

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

本文是ThreeJS学习系列的第二部分，主要讲解如何使用WebGLRenderer、PerspectiveCamera、Scene、AxesHelper、GeometryCylinder、GeometryPlane、OrbitControls、AmbientLight、Spotlight及Shadow来创建聚光灯和投影效果。通过调整02-spot-light-shadow.js和main.js，实现了在场景中应用聚光灯和阴影的交互展示。

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

threejs学习02-聚光灯和投影 (WebGLRenderer \ PerspectiveCamera \ Scene \ AxesHelper \ GeometryCylinder \ GeometryPlane \ OrbitControls \ AmbientLight \ Spotlight \ Shadow)

我们在之前vite项目中，新建一个js文件，命名为02-spot-light-shadow.js：
在这里插入图片描述

02-spot-light-shadow.js：

import * as THREE from 'three';
import {
   
    Plane } from 'three';

//控制器需要引入这个js。实现控制器。
import {
   
   OrbitControls} from 'three/examples/jsm/controls/OrbitControls';


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

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

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

initAmbientLight();
initSpotLight();

initMashes();
initShadow();

render();

//自适应窗口大小：使得camera和renderer随着窗体的变化而变化。
window.addEventListener('resize',function(){
   
   
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
})

//初始化渲染器
function initR