three.js学习 07- 1.屏幕宽高适配2.让操作带有阻尼感3.开启关闭全屏模式

1. 屏幕宽高适配效果

使用addEventListener方法实现上面适配效果

//监听画面变化，更新渲染画面
window.addEventListener('resize', () => {console.log('画面变化了，宽高适配执行');//更新摄像头camera.aspect = window.innerWidth / window.innerHeight// 更新摄像机的投影矩阵camera.updateProjectionMatrix()// 更新渲染器renderer.setSize(window.innerWidth,window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)
})

2. 让cube被操作的时候带有阻尼感

// 设置控制器的阻尼感  有真实感  必须在循环调用update()
controls.enableDamping = true
// 设置一个渲染函数，浏览器每次刷新重新加载渲染器
// function render(time) {
function render() {controls.update()renderer.render(scene, camera) //渲染器requestAnimationFrame(render) //requestAnimationFrame==》请求动画帧 接收一个渲染函数  渲染下一帧的时候就会执行render函数
}

3. 双击开启关闭全屏模式

// 双击控制开启关闭全屏
window.addEventListener('dblclick', () => {const fullscreenElement =document.fullscreenElementconsole.log('执行了双击',fullscreenElement);if (fullscreenElement) {document.exitFullscreen()}else{renderer.domElement.requestFullscreen()}
})

4. 页面完整代码

import * as THREE from 'three'
// 导入轨道控制器
import {OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
// console.log(THREE);// 2023.05.02  导入gsap动画库
import gsap from 'gsap'// 基础内容// 1.创建场景
const scene = new THREE.Scene()
// 2.创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
) //透视相机(角度,宽高比,近端,远端)camera.position.set(0, 0, 10) //修改相机位置scene.add(camera) //将相机添加到场景中// 添加物体
// 创建一个几何体对象
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00
})
// 根据几何体和材质创建一个物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)// 将几何体添加到场景中
scene.add(cube)//初始化渲染器
const renderer = new THREE.WebGLRenderer()//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
console.log(renderer);// 将webgl渲染的canves内容添加到body上
document.body.appendChild(renderer.domElement)// 使用渲染器,通过相机,将场景渲染进来
// renderer.render(scene, camera)// 2023.04.26 使用控制器查看3d物体
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement) //第一个参数是相机对象，第二个参数是渲染器
// 设置控制器的阻尼感  有真实感  必须在循环调用update()
controls.enableDamping = true
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5) //参数5代表长度
scene.add(axesHelper) //添加完成后出现坐标轴辅助器// 2023.05.02  使用补间动画实现动画的操作
// 设置动画
let animate1 = gsap.to(cube.position, {x: 5,duration: 5,ease: "bounce.out",repeat: 3, //重复次数// repeat:-1,//-1表示无限循环yoyo: true, //开启往返运动// delay:2,//延迟两秒移动onComplete: () => {console.log('动画完成了：');},onStart: () => {console.log('动画开始了：');}
}) //参数解释：让（要操作的对象，{哪一条轴：运动到什么位置，duration:花费多少秒}）
// 设置旋转
gsap.to(cube.rotation, {x: 2 * Math.PI,duration: 5,ease: "power4.in"
})
// 双击暂停/开始动画  2023.05.03
// window.addEventListener('dblclick', () => {
//     console.log(animate1);
//     if (animate1.isActive()) {
//         animate1.pause() //暂停
//     } else {
//         animate1.resume() //恢复
//     }
// })
// 双击控制开启关闭全屏  2023.05.04
window.addEventListener('dblclick', () => {const fullscreenElement =document.fullscreenElementconsole.log('执行了双击',fullscreenElement);if (fullscreenElement) {document.exitFullscreen()}else{renderer.domElement.requestFullscreen()}
})// 设置一个渲染函数，浏览器每次刷新重新加载渲染器
// function render(time) {
function render() {controls.update()renderer.render(scene, camera) //渲染器requestAnimationFrame(render) //requestAnimationFrame==》请求动画帧 接收一个渲染函数  渲染下一帧的时候就会执行render函数
}// 2023.05.04  监听画面变化，更新渲染画面
window.addEventListener('resize', () => {console.log('画面变化了，宽高适配执行');//更新摄像头camera.aspect = window.innerWidth / window.innerHeight// 更新摄像机的投影矩阵camera.updateProjectionMatrix()// 更新渲染器renderer.setSize(window.innerWidth,window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)
})render() //一开始的时候渲染一下

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！