【前端知识】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 小时前
什么!纯前端也能识别图片中的文案、还支持100多个国家的语言
前端·javascript·vue.js
摸鱼仙人~1 小时前
React 性能优化实战指南:从理论到实践的完整攻略
前端·react.js·性能优化
程序员阿超的博客2 小时前
React动态渲染:如何用map循环渲染一个列表(List)
前端·react.js·前端框架
magic 2452 小时前
模拟 AJAX 提交 form 表单及请求头设置详解
前端·javascript·ajax
小小小小宇7 小时前
前端 Service Worker
前端
只喜欢赚钱的棉花没有糖7 小时前
http的缓存问题
前端·javascript·http
小小小小宇8 小时前
请求竞态问题统一封装
前端
loriloy8 小时前
前端资源帖
前端
源码超级联盟8 小时前
display的block和inline-block有什么区别
前端
GISer_Jing8 小时前
前端构建工具(Webpack\Vite\esbuild\Rspack)拆包能力深度解析
前端·webpack·node.js