【前端知识】Three 学习日志(八)—— 全屏渲染

Three 学习日志(八)------ 全屏渲染

一、设置全屏渲染

javascript 复制代码
const width = window.innerWidth; // 窗口宽度
const height = window.innerHeight; // 窗口高度
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera); //执行渲染操作
document.body.appendChild(renderer.domElement);

二、全屏CSS细节设置(去除边框)

css 复制代码
body {
    overflow: hidden;
    margin: 0px;
}

三、监听窗口宽高变化

javascript 复制代码
// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 全屏情况下:设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
    // 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)
    // 如果相机的一些属性发生了变化,需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix();
};

四、效果展示

五、完整代码

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn Three</title>
    <!-- 引入three,下载地址参考:http://www.webgl3d.cn/pages/aac9ab/#%E7%89%B9%E5%AE%9A%E7%89%88%E6%9C%ACthree-js%E6%96%87%E4%BB%B6%E5%8C%85%E4%B8%8B%E8%BD%BD -->
    <script src="../build/three.js"></script>
    <!-- 引入相机控件 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.module.js",
                "three/addons/": "../examples/jsm/"
            }
        }
    </script>
</head>

<body>
    <script type="module">
        // 引入轨道控制器扩展库OrbitControls.js
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        // 创建3D场景对象Scene
        const scene = new THREE.Scene();
        const axesHelper = new THREE.AxesHelper(150);
        scene.add(axesHelper);
        const geometry = new THREE.BoxGeometry(100, 100, 100);
        const material = new THREE.MeshBasicMaterial({
            color: 0xff0000, //设置材质颜色
            transparent: true,//开启透明
            opacity: 0.5,//设置透明度
        });
        const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        mesh.position.set(0, 0, 0);
        scene.add(mesh);

        // //环境光强度调整为0.8
        const ambient = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambient);

        const camera = new THREE.PerspectiveCamera();
        camera.position.set(200, 200, 200);
        camera.lookAt(0, 0, 0);
        const width = window.innerWidth; // 窗口宽度
        const height = window.innerHeight; // 窗口高度
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        renderer.render(scene, camera); //执行渲染操作
        document.body.appendChild(renderer.domElement);

        // onresize 事件会在窗口被调整大小时发生
        window.onresize = function () {
            // 重置渲染器输出画布canvas尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            // 全屏情况下:设置观察范围长宽比aspect为窗口宽高比
            camera.aspect = window.innerWidth / window.innerHeight;
            // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
            // 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)
            // 如果相机的一些属性发生了变化,需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
            camera.updateProjectionMatrix();
        };
    </script>
</body>
<style>
    body {
        overflow: hidden;
        margin: 0px;
    }
</style>

</html>
相关推荐
10年前端老司机1 小时前
10道js经典面试题助你找到好工作
前端·javascript
小小小小宇6 小时前
TS泛型笔记
前端
小小小小宇7 小时前
前端canvas手动实现复杂动画示例
前端
codingandsleeping7 小时前
重读《你不知道的JavaScript》(上)- 作用域和闭包
前端·javascript
小小小小宇7 小时前
前端PerformanceObserver使用
前端
zhangxingchao8 小时前
Flutter中的页面跳转
前端
烛阴9 小时前
Puppeteer入门指南:掌控浏览器,开启自动化新时代
前端·javascript
全宝9 小时前
🖲️一行代码实现鼠标换肤
前端·css·html
小小小小宇10 小时前
前端模拟一个setTimeout
前端
萌萌哒草头将军10 小时前
🚀🚀🚀 不要只知道 Vite 了,可以看看 Farm ,Rust 编写的快速且一致的打包工具
前端·vue.js·react.js