three.js 分别用自由视角和固定视角实现3D模型展示

效果展示

需求：做一个3D模型展示，需要灯光、底座、模型旋转、阴影等，先看效果
ps：项目架构 vue3+ts，其他架构的改方法就行

Video_2024-05-10_165926

整体代码展示

1，创建场景，渲染器，相机，这步不在赘述
2，创建地板及地板材质

    const geometry = new THREE.CircleGeometry(200, 200)
    const material = new THREE.MeshLambertMaterial({
   
    color: 0xffffff })
    material.lightMapIntensity = 0
    const base = new THREE.Mesh(geometry, material)
    base.castShadow = true
    base.receiveShadow = true
    base.rotation.x = (Math.PI * 3) / 2
    scene.add(base)

2，添加灯光

// 环境灯光
    const hemiLight