创建一个有阴影的threejs三维几何体

import * as THREE from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const width = window.innerWidth;
const height = window.innerHeight;

//创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color('#65762c'); 

//创建几何体
const geometry = new THREE.SphereGeometry(50,50,50)
const material = new THREE.MeshLambertMaterial({
	color:0x00ffff,
})
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh)

//创建平行光
const dirLight2 = new THREE.DirectionalLight(0xFFFFFF, 1);
dirLight2.position.set(100,100,100);
scene.add(dirLight2);

//添加环境光
const ambient = new THREE.AmbientLight(0xffffff, 1)
scene.add(ambient)

//光源辅助观察
// const pointLightHelper = new THREE.DirectionalLightHelper(dirLight2, 2)
// scene.add(pointLightHelper)

//AxesHelper 辅助观察坐标系
// const axesHelper = new THREE.AxesHelper(100);
// scene.add(axesHelper)

//相机
const camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
//相机在three.js三维坐标系中的位置,根据需要设置相机位置具体值
camera.position.set(100,200,250);
//相机观察目标指向three.js坐标系原点,相机的位置
camera.lookAt(0,0,0)

//创建渲染器对象
const renderer = new THREE.WebGLRenderer();
//设置three.js渲染区域的尺寸
renderer.setSize(width,height);

//three.js执行渲染命令会输出一个canvas画布
document.body.appendChild(renderer.domElement);

//循环渲染
function render(){
	renderer.render(scene,camera);
	requestAnimationFrame(render);
}

render();

//设置相机轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

//如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景,监听键盘、鼠标事件
controls.addEventListener('change',function(){
  renderer.render(scene,camera);  //执行渲染操作
  // console.log('camera.position',camera.position)
  // console.log('controls.target',controls.target) 
})