threejs实现3d物体跳跃效果+屏幕自适应+阴影

要实现效果如下: 屏幕可控制3d物体跳跃的自转的速度 , 屏幕自适应处理 , 有阴影

1 实现立方体+地面+坐标轴+聚光灯(阴影)
 

<template>
  <div class=""></div>
</template>

<script setup>
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js"; // 导入轨道控制器

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(-30, 40);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;               // 可以渲染阴影
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);  // 将染器添加到页面


// 创建立方体
const geometry = new THREE.BoxGeometry(4, 4, 4);
const material = new THREE.MeshLambertMaterial({ color: 0xff2288 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(4, 8, 10);
cube.castShadow = true;                      // 能投射阴影
scene.add(cube);


// 添加网格
// const gridHelper = new THREE.GridHelper(20, 20);
// scene.add(gridHelper);


// 添加地面
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI; 
plane.receiveShadow = true;                // 接收阴影
scene.add(plane);


// 添加轨道控制器  接受俩个参数(相机,当前页面)  就可以实现鼠标拖动效果了
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;  // 阻尼效果,可以让滑动的时候更丝滑
controls.dampingFactor = 0.01;  // 阻尼程度


// controls.autoRotate = true;  // 实现页面自己旋转,且还可以手动控制 利用轨道控制器
// controls.autoRotateSpeed = 0.5; // 实现页面自己旋转,且还可以手动控制 利用轨道控制器


// 添加坐标轴,用来识别3d的方向,通常x红色,y绿色,z蓝色
const axesHelper = new THREE.AxesHelper(50);
// axesHelper.position.set(3, 3, 0);
scene.add(axesHelper);


// 聚光灯和半球光
const spotLight = new THREE.SpotLight(0xffffff, 300);   // 光照强度必须设置否则阴影不显示
spotLight.position.set(20, 50, 25);
spotLight.castShadow = true;                       // 能投射阴影
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 1;
spotLight.shadow.camera.far = 100;
spotLight.shadow.focus = 1;
scene.add(spotLight);
// scene.add(new THREE.CameraHelper(spotLight.shadow.camera));
const hemisphereLight = new THREE.HemisphereLight(0xaaaaaa);
scene.add(hemisphereLight);



// 让立方体动起来
function animate() {
  // 告浏览器一你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01;

  // 轨道控制器更新
  controls.update();
  renderer.render(scene, camera);
}
animate();
</script>

2 跳跃效果+屏幕自适应

下载dat.gui插件 
是一个 GUI 组件，可以为你的 demo 提供参数的设置
npm i dat.gui @types/dat.gui --save --registry=https://registry.npm.taobao.org

<template>
  <div class=""></div>
</template>

<script setup>
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js"; // 导入轨道控制器
import * as dat from "dat.gui"; // 导入gui组件

// 创建场景

// 创建相机

// 创建渲染器

// 创建立方体

// 添加网格

// 添加地面

// 添加轨道控制器  接受俩个参数(相机,当前页面)  就可以实现鼠标拖动效果了

// 添加坐标轴,用来识别3d的方向,通常x红色,y绿色,z蓝色

// 聚光灯和半球光


// 添加旋转速度和跳跃速度参数
const ctrlObj = { rotationSpeed: 0.01, jumpSpeed: 0.01 };
const ctrl = new dat.GUI();
ctrl.add(ctrlObj, "rotationSpeed", 0.1);
ctrl.add(ctrlObj, "jumpSpeed", 0.1);


// 实现屏幕自适应
window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateWorldMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

// 设置初始间隙
let gap = 0;

// 让立方体动起来
function animate() {
  requestAnimationFrame(animate);
  // cube.rotation.x += 0.01
  // cube.rotation.y += 0.01;

  cube.rotation.x += ctrlObj.rotationSpeed;
  cube.rotation.y += ctrlObj.rotationSpeed;

  gap += ctrlObj.jumpSpeed;
  cube.position.x = 6 + 10 * Math.sin(gap);
  cube.position.y = 6 + 10 * Math.abs(Math.cos(gap));

  // 轨道控制器更新
  controls.update();
  renderer.render(scene, camera);
}
animate();
</script>