1.2 响应式的three.js

最新推荐文章于 2024-04-24 09:22:16 发布

淋雨一直走~

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量215

点赞数

分类专栏： webGL 前端 three.js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41579192/article/details/109287193

版权

webGL 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

6 篇文章 3 订阅

订阅专栏

three.js

2 篇文章 0 订阅

订阅专栏

前言

看完three.js基础篇后我们来看一下响应式的three.js
相信前端开发的同志们都知道，听到响应式就只在网页页面大小改变的情况下所看到的网页不会变形。现在大家一起来了解一下吧。

基于three.js基础篇新增了一下代码

...
// let renderer = new THREE.WebGLRenderer({canvas}); // 原来的代码以下是修改后的代码
// 模型放大后可以看到有锯齿添加这个属性antialias: true,可以抗锯齿
let renderer = new THREE.WebGLRenderer({antialias: true, canvas}); 
...
// renderer.render(scene, camera) // 原来的代码以下是修改后的代码

 // 响应式three.js 防止three.js窗口大小改变导致模型变形
 camera.aspect = canvas.clientWidth / canvas.clientHeight;
 camera.updateProjectionMatrix();
...

优化后

// 优化方案一
       // renderer.render(scene, camera) // 原来的代码以下是修改后的代码
       // // 响应式three.js 防止three.js窗口大小改变导致模型变形
       // camera.aspect = canvas.clientWidth / canvas.clientHeight;
       // camera.updateProjectionMatrix();
       // 优化
       if (resizeRendererToDisplaySize()){
           camera.aspect = canvas.clientWidth / canvas.clientHeight;
           camera.updateProjectionMatrix();
       }
       renderer.render(scene, camera)


   // 以下是优化后的代码
   function resizeRendererToDisplaySize() {
       let width = canvas.clientWidth;
       let height = canvas.clientHeight;
       let needResize = canvas.width !== width || canvas.height !== height;
       if (needResize) {
           renderer.setSize(width, height, false);
       }
       return needResize;
   }
// 优化方案二
...
       // // 优化方案2 扩展
   // window.addEventListener('resize', reSize, false)
   // function reSize(){
   //     let width = canvas.clientWidth;
   //     let height = canvas.clientHeight;
   //     camera.aspect = canvas.clientWidth / canvas.clientHeight;
   //     camera.updateProjectionMatrix();
   //     renderer.setSize(width, height, false);
   // }
...

经过了响应式设计可以看到页面可以内容可以根据网页大小响应式变化，
但是可以看到有个明显的锯齿，在renderer加载器中添加一个参数new THREE.WebGLRenderer({antialias: true, canvas}); 后可以看到锯齿笑出了一点。但是还是有锯齿，
经过优化后可以看到锯齿完全消除达到了最佳的效果

案例效果

案例效果地址 (能够根据页面大小自适应)

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2. three.js 响应式设计.html</title>
</head>
<style type="text/css">
    html, body {
        margin: 0;
        height: 100%;
    }

    #canvas {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>
<body>
<!--第二步创建一个canvas标签-->
<canvas id="canvas"></canvas>
</body>
<script type="module"> // 这里type的属性为module
// 第一步导入three.js
import * as THREE from '../../../three.js-r115/build/three.module.js'; // 导入three.js

(function main() {
    // 第三步创建一个加载器
    let canvas = document.getElementById('canvas');
    // let renderer = new THREE.WebGLRenderer({canvas}); // 原来的代码以下是修改后的代码
    let renderer = new THREE.WebGLRenderer({antialias: true, canvas}); // 模型放大后可以看到有锯齿添加这个属性antialias: true,可以抗锯齿

    // 第四步创建一个相机
    let fov = 75, aspect = 2, near = 0.1, far = 5;
    let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2
    // 第五步创建一个场景
    let scene = new THREE.Scene();

    // 添加一个光源
    let light = new THREE.DirectionalLight(0xFFFFFF, 1);
    light.position.set(-1, 2, 4);
    scene.add(light);

    // 创建一个模型
    let width = 1, height = 1, depth = 1;
    let geometry = new THREE.BoxGeometry(width, height, depth);

    // let material = new THREE.MeshBasicMaterial({color: 0xFF0000}); // 不受光照影响的材质
    // let material = new THREE.MeshLambertMaterial({color: 0xFF0000}); // 受光照影响的材质---不加光看不见
    let material = new THREE.MeshPhongMaterial({color: 0xFF0000}); // 受光照影响的材质---不加光看不见

    let mesh = new THREE.Mesh(geometry, material);
    mesh.position.setX(0)
    let mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.setX(-2)
    let mesh3 = new THREE.Mesh(geometry, material);
    mesh3.position.setX(2)

    // 将模型添加到场景中
    scene.add(mesh)
    scene.add(mesh2)
    scene.add(mesh3)

    // 最后一步渲染
    function render() {
        // 让场景动起来
        mesh.rotateY(0.01)
        mesh.rotateZ(0.01)
        mesh2.rotateY(0.02)
        mesh2.rotateZ(0.02)
        mesh3.rotateY(0.03)
        mesh3.rotateZ(0.03)
        requestAnimationFrame(render)

        // renderer.render(scene, camera) // 原来的代码以下是修改后的代码

        // // 响应式three.js 防止three.js窗口大小改变导致模型变形
        // camera.aspect = canvas.clientWidth / canvas.clientHeight;
        // camera.updateProjectionMatrix();

        // 优化
        if (resizeRendererToDisplaySize()) {
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
        }
        renderer.render(scene, camera)
    }

    render()

    // 以下是优化后的代码
    function resizeRendererToDisplaySize() {
        let pixelRatio = window.devicePixelRatio;
        // let width = canvas.clientWidth;
        // let height = canvas.clientHeight;
        let width = canvas.clientWidth * pixelRatio | 0;
        let height = canvas.clientHeight * pixelRatio | 0;
        let needResize = canvas.width !== width || canvas.height !== height;
        if (needResize) {
            renderer.setSize(width, height, false);
        }
        return needResize;
    }

    // // 优化方案2 扩展
    // window.addEventListener('resize', reSize, false)
    // function reSize(){
    //     let width = canvas.clientWidth;
    //     let height = canvas.clientHeight;
    //     camera.aspect = canvas.clientWidth / canvas.clientHeight;
    //     camera.updateProjectionMatrix();
    //     renderer.setPixelRatio(window.devicePixelRatio);
    //     renderer.setSize(width, height, false);
    // }
})()
</script>
</html>