threejs — 8 全屏、不同设备像素比自适应屏幕变化

TaiXinF

已于 2022-10-10 07:11:41 修改

阅读量615

点赞数

分类专栏： webgl threejs 文章标签：前端 vue.js npm node.js javascript

于 2022-10-08 10:42:11 首次发布

本文链接：https://blog.csdn.net/Tx457973/article/details/127204481

版权

本文介绍了如何使用ThreeJS实现全屏显示，并针对不同设备的像素比进行自适应调整，确保在各种屏幕尺寸下都能完美呈现。通过结合CSS样式和JavaScript技术，确保在Vue.js项目中实现流畅的屏幕适配效果。

摘要由CSDN通过智能技术生成

import './style.css'
import * as THREE from "three";
import {
    OrbitControls
} from "three/examples/jsm/controls/OrbitControls";

//canvas
const canvas = document.querySelector(".webgl");

//scene
const scene = new THREE.Scene();


//mesh!!!!!
const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({
        color: 0xff0000
    })
);
scene.add(mesh);

//size
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight,
};
//屏幕尺寸变化事件
window.addEventListener('resize', () => {
    //update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    //update camera
    camera.aspect = sizes.width / sizes.height

    //还需要调用两个个函数
    //update camera
    camera.updateProjectionMatrix()

    //update renderer
    renderer.setSize(sizes.width, sizes.height)
    //设置设备像素比。通常用于避免HiDPI设备上绘图模糊--每次都可以用上--最小值---主要是适应更多的屏幕变化
    ren