threejs 浏览器窗口resize变化 自适应 html 全屏

全屏：画布全屏和body页面全屏；

// 导入 threejs 
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 创建场景 scene
const scene = new THREE.Scene();
// console.log(scene,'scene');
// 创建相机 -- 观看物体的不同视角
const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight,  // 宽高比
    0.1,  // 近平面
    1000 // 远平面
);
// const camera1 = new THREE.OrthographicCamera();
// console.log('透视投影相机',camera); // 和人的眼睛看的东西一样 近大远小
// console.log('正投影相机',camera1);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// console.log('渲染器',renderer);
// 置canvas画设布的尺寸  -- 设置threejs渲染区域的尺寸 像素 px
renderer.setSize(window.innerWidth,window.innerHeight); 
// domElement 就是一个 canvas 标签  结果 -- 把 canvas 渲染到了页面上
document.body.appendChild(renderer.domElement);

// 添加坐标轴
const axesHelper = new THREE.AxesHelper(5); // 参数为轴的长度
scene.add(axesHelper);

// 创建一个集合体 -- 正方体
const gemetry = new THREE.BoxGeometry(1,1,1);
// 创建材质 material  --- 网格基础材质
const material = new THREE.MeshBasicMaterial({
    color: 0x9ac833,  // # 使用 0x 替代  十六进制
});
const material1 = new THREE.MeshBasicMaterial({
    color: 0xee502d,  // # 使用 0x 替代  十六进制
});

// 创建网格模型 -- 就是 3D 物体了 -- 由几何体 gemetry 和 材质 material 构成
const mesh = new THREE.Mesh(gemetry,material); 
const meshParent = new THREE.Mesh(gemetry,material1); 
// console.log('网格',mesh);

// 缩放 scale 设置立方体的放大效果  父元素放大子元素也会随着放大
// 子元素放大是按照父元素的位置放大的
// meshParent.scale.set(2,2,2);  
mesh.scale.set(2,2,2);
// 创建了父元素  把子元素放到 父元素中  ps：position 位置是相对与父元素的位置来说的 即相对位置
meshParent.position.set(-3,0,0);
mesh.position.set(1,0,0);  // 设置物体的位置 x y z  y 轴就是垂直的  （-3，0，0） 才是原点

// 旋转 按照某个坐标轴旋转o3d  -- 欧拉角  -- 指定了顺序和坐标轴
// 绕着x轴旋转  父元素的旋转会使子元素跟随旋转
console.log(Math.PI);
mesh.rotation.x = Math.PI / 4;   // 180 / 4 = 45 度

// 把物体放到场景中间
// scene.add(mesh);
meshParent.add(mesh);
scene.add(meshParent);

// 设置相机的位置 position 
camera.position.set(10,10,10);  // 远距离和近距离
// camera.position.y = 50;  // 远距离和近距离
camera.lookAt(0,0,0);
// camera.lookAt(mesh.position);// 指向mesh对应的位置

// 引入相机控件  -- 轨道控制器
// console.log('OrbitControls',OrbitControls);
const controls = new OrbitControls(camera,renderer.domElement);
// controls.addEventListener('change', function () {
//     renderer.render(scene, camera); //执行渲染操作
// });//监听鼠标、键盘事件

// 浏览器大小调整事件监听  -- 监听窗口的变化
window.addEventListener("resize", () => {
    // console.log('test');
    renderer.setSize(window.innerWidth,innerHeight);  // 根据缩放的窗口重新设置画布的大小
    // 垂直相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
});

// 全屏
var btn = document.createElement("button");
btn.innerHTML =  "全屏";
btn.style.position = "absolute";
btn.style.top = "10px";
btn.style.left = "10px";
btn.style.zIndex = 9919;
btn.onclick = function() {
    // renderer.domElement.requestFullscreen();  // 画布全屏
    // body 全屏
    document.body.requestFullscreen();
};
document.body.appendChild(btn);

// 退出全屏
var btn = document.createElement("button");
btn.innerHTML =  "退出全屏";
btn.style.position = "absolute";
btn.style.top = "10px";
btn.style.left = "100px";
btn.style.zIndex = 9919;
btn.onclick = function() {
    document.exitFullscreen();
};
document.body.appendChild(btn);



// 添加带阻尼的惯性
controls.enableDamping = true;   //  设置后会有滑动的效果
controls.dampingFactor = 0.2011;   // 时间越小 滑动的时间越小

controls.autoRotate = false;  // 自动旋转
// console.log(controls);
// controls.addEventListener('change', function () {
//     // 浏览器控制台查看相机位置变化
//     console.log('camera.position',camera.position);
// });
// renderer.render(scene,camera);
// controls.autoRotate = true;  // 自动旋转
// controls.autoRotateSpeed = 10030; // 设置的转速
// controls.dampingFactor = true;
// 动态的渲染函数
function animate() {
    controls.update(); // 如果使用了 autoRotate 属性等 需要在动画中执行 update 方法
    requestAnimationFrame(animate);  // 逐帧渲染
    // 旋转
    // mesh.rotation.x += 0.01;
    // mesh.rotation.y += 0.01;
    renderer.render(scene,camera);
}
animate()