南风知我意的技术博客

Appearance

一、three.ts-渲染 ​

render.png

1. setInterval()周期性调用render方法 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>setInterval()周期性调用render方法</title>
  <style>
    body {
      margin: 0;
      /* 隐藏body窗口区域滚动条 */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from "../../../../js/three.module.js"
    /**
     * 创建场景对象Scene
     */
    const scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    const geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方体几何对象Geometry
    const material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); // 材质对象Material
    const mesh = new THREE.Mesh(geometry, material); // 网格模型对象Mesh
    scene.add(mesh); // 网格模型添加到场景中
    /**
     * 光源设置
     */
    // 点光源
    const point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); // 点光源位置
    scene.add(point); // 点光源添加到场景中
    // 环境光
    const ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    /**
     * 相机设置
     */
    const width = window.innerWidth; // 窗口宽度
    const height = window.innerHeight; // 窗口高度
    const k = width / height; // 窗口宽高比
    const s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); // 设置相机位置
    camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);// 设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
    document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

    // 渲染函数
    function render() {
        renderer.render(scene, camera);// 执行渲染操作
        mesh.rotateY(0.01); // 每次绕y轴旋转0.01弧度
    }
    // 间隔20ms周期性调用函数fun, 20ms也就是刷新频率是50FPS(1s/20ms)
    setInterval(render,20);
    // 设置调用render函数的周期为200ms，刷新频率相当于5FPS，能明显的感受到卡顿
    // setInterval(render, 200);
  </script>
</body>
</html>

2. 立方体旋转动画 ​

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>立方体旋转动画</title>
  <style>
    body {
      margin: 0;
      /* 隐藏body窗口区域滚动条 */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from "../../../../js/three.module.js"
    /**
     * 创建场景对象Scene
     */
    const scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    const geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方体几何对象Geometry
    const material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); // 材质对象Material
    const mesh = new THREE.Mesh(geometry, material); // 网格模型对象Mesh
    scene.add(mesh); // 网格模型添加到场景中
    /**
     * 光源设置
     */
    // 点光源
    const point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); // 点光源位置
    scene.add(point); // 点光源添加到场景中
    // 环境光
    const ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    /**
     * 相机设置
     */
    const width = window.innerWidth; // 窗口宽度
    const height = window.innerHeight; // 窗口高度
    const k = width / height; // 窗口宽高比
    const s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); // 设置相机位置
    camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);// 设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
    document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

    // 渲染函数
    function render() {
        renderer.render(scene,camera);// 执行渲染操作
        mesh.rotateY(0.01);// 每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);// 请求再次执行渲染函数render，渲染下一帧
    }
    render();

  </script>

</body>

</html>

3. requestAnimationFrame两帧渲染时间间隔 ​

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>requestAnimationFrame两帧渲染时间间隔</title>
  <style>
    body {
      margin: 0;
      /* 隐藏body窗口区域滚动条 */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from "../../../../js/three.module.js"
    /**
     * 创建场景对象Scene
     */
    const scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    const geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方体几何对象Geometry
    const material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); // 材质对象Material
    const mesh = new THREE.Mesh(geometry, material); // 网格模型对象Mesh
    scene.add(mesh); // 网格模型添加到场景中
    /**
     * 光源设置
     */
    // 点光源
    const point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); // 点光源位置
    scene.add(point); // 点光源添加到场景中
    // 环境光
    const ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    /**
     * 相机设置
     */
    const width = window.innerWidth; // 窗口宽度
    const height = window.innerHeight; // 窗口高度
    const k = width / height; //  窗口宽高比
    const s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    // 创建相机对象
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); // 设置相机位置
    camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);// 设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
    document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

    // 渲染函数
    let T0 = new Date();// 上次时间
    function render() {
        let T1 = new Date();// 本次时间
        let t = T1-T0;// 时间差
        console.log(t);// 两帧之间时间间隔  单位：ms
        //  console.log(Math.round(1000/t));// 渲染频率
        T0 = T1;// 把本次时间赋值给上次时间
        renderer.render(scene, camera);// 执行渲染操作
        mesh.rotateY(0.01);// 每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);// 请求再次执行渲染函数render，渲染下一帧
    }
    render();

  </script>

</body>

</html>

4. 增加两帧之间计算资源 ​

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>源码对应电子书:百度"three.ts 郭隆邦"</title>
  <style>
    body {
      margin: 0;
      /* 隐藏body窗口区域滚动条 */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from "../../../../js/three.module.js"
    /**
     * 创建场景对象Scene
     */
    const scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    const geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方体几何对象Geometry
    const material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); // 材质对象Material
    const mesh = new THREE.Mesh(geometry, material); // 网格模型对象Mesh
    scene.add(mesh); // 网格模型添加到场景中
    /**
     * 光源设置
     */
    // 点光源
    const point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); // 点光源位置
    scene.add(point); // 点光源添加到场景中
    // 环境光
    const ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    /**
     * 相机设置
     */
    const width = window.innerWidth; // 窗口宽度
    const height = window.innerHeight; // 窗口高度
    const k = width / height; // 窗口宽高比
    const s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    // 创建相机对象
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); // 设置相机位置
    camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);// 设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
    document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

    //  渲染函数
    let T0 = new Date();// 上次时间
    let n = 0
    function render() {
      //  进行循环计算，占用CPU计算资源，延迟时间
      for (let i = 0; i < 10000; i++) {
        for (let j = 0; j < 1000; j++) {
          n +=1
        }
      }
        let T1 = new Date();// 本次时间
        let t = T1-T0;// 时间差
        console.log(t);// 两帧之间时间间隔  单位：ms
        //  console.log(Math.round(1000/t));// 渲染频率
        T0 = T1;// 把本次时间赋值给上次时间
        renderer.render(scene,camera);// 执行渲染操作
        mesh.rotateY(0.01);// 每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);// 请求再次执行渲染函数render，渲染下一帧
    }
    render();

  </script>

</body>

</html>

Released under the MIT License.

Copyright © 2021-present eastern