threejs实现视角平滑移动

最新推荐文章于 2024-11-29 09:36:37 发布

shineloom

最新推荐文章于 2024-11-29 09:36:37 发布

阅读量800

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/u010875133/article/details/135743407

版权

本文介绍了如何在Three.js中利用gsap库创建平滑的相机和OrbitControls视角动画，通过translateCamera函数实现视图在给定时间内平滑移动。

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

import * as THREE from 'three'
import {OrbitControls} from "three/addons";
import {gsap} from "gsap";

// const scene = new THREE.Scene()
// const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000)
// const renderer = new THREE.WebGLRenderer({
//   antialias: true
// })
// renderer.setSize(window.innerWidth, window.innerHeight)
// renderer.render(scene, camera)
// const controls = new OrbitControls(camera, renderer.domElement)


const timelineCamera = gsap.timeline()
const timelineControls = gsap.timeline()

// 实现视角平滑移动方法
function translateCamera(cameraPosition, controlsTarget, duration) {
  const _duration = duration ? duration : 1

  return new Promise((resolve) => {
    timelineCamera.to(camera.position, {
      x: cameraPosition.x,
      y: cameraPosition.y,
      z: cameraPosition.z,
      duration: _duration,
      ease: 'power2.inOut',
      onComplete: () => {
      }
    })
    timelineControls.to(controls.target, {
      x: controlsTarget.x,
      y: controlsTarget.y,
      z: controlsTarget.z,
      duration: _duration,
      ease: 'power2.inOut',
      onComplete: () => {
      }
    })
    
    setTimeout(() => {
      resolve()
    }, _duration)
  })
}