主頁 > 企業開發 > Three.js 實作虎年春節3D創意頁面

Three.js 實作虎年春節3D創意頁面

2022-01-17 17:45:38 企業開發

背景

虎年 ?? 春節將至，本文使用 React + Three.js 技術堆疊，實作趣味 3D 創意頁面，本文包含的知識點主要包括：ShadowMaterial、 MeshPhongMaterial 兩種基本材質的使用、使用 LoadingManager 展示模型加載進度、OrbitControls 的緩動影片、TWEEN 簡單補間影片效果等，

實作

?? 在線預覽，已適配移動端：https://dragonir.github.io/3d/#/lunar

引入資源

其中 GLTFLoader、FBXLoader 用于加在模型、OrbitControls 用戶鏡頭軌道控制、TWEEN 用于生成補間影片，

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";

場景初始化

這部分內容主要用于初始化場景和引數，詳細講解可點擊文章末尾鏈接閱讀我之前的文章，本文不再贅述，

container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
// 場景
scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load(bgTexture);
// 霧化效果
scene.fog = new THREE.Fog(0xdddddd, 100, 120);
// 攝像機
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(100, 100, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 平行光
const cube = new THREE.Mesh(new THREE.BoxGeometry(0.001, 0.001, 0.001), new THREE.MeshLambertMaterial({ color: 0xdc161a }));
cube.position.set(0, 0, 0);
light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 8);
light.target = cube;
scene.add(light);
// 環境光
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
// 聚光燈
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-20, 20, -2);
scene.add(spotLight);

?? Fog 場景霧化

本例中，打開頁面時模型由遠及近加載，顏色由白色變為彩色的功能就是通過 Fog 實作的，Fog 類定義的是線性霧，霧的密度是隨著距離線性增大的，即場景中物體霧化效果隨著隨距離線性變化，

建構式：Fog(color, near, far)，

  • color 屬性: 表示霧的顏色，比如設定為紅色，場景中遠處物體為黑色，場景中最近處距離物體是自身顏色，最遠和最近之間的物體顏色是物體本身顏色和霧顏色的混合效果，
  • near 屬性：表示應用霧化效果的最小距離，距離活動攝像機長度小于 near 的物體將不會被霧所影響，
  • far 屬性：表示應用霧化效果的最大距離，距離活動攝像機長度大于 far 的物體將不會被霧所影響，

創建地面

本例中使用了背景圖，我需要一個既能呈現透明顯示背景、又能產生陰影的材質生成地面，于是使用到 ShadowMaterial 材質，

var planeGeometry = new THREE.PlaneGeometry(100, 100);
var planeMaterial = new THREE.ShadowMaterial({ opacity: .5 });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, -8, 0);
plane.receiveShadow = true;
scene.add(plane);

?? ShadowMaterial 陰影材質

此材質可以接收陰影，但在其他方面完全透明，

建構式： ShadowMaterial(parameters: Object)

  • parameters：（可選）用于定義材質外觀的物件，具有一個或多個屬性，

特殊屬性：

  • .isShadowMaterial[Boolean]：用于檢查此類或派生類是否為陰影材質，默認值為 true，因為其通常用在內部優化，所以不應該更改該屬性值，
  • .transparent[Boolean]：定義此材質是否透明，默認值為 true，

創建魔法陣

在老虎 ?? 底部地面創建一個炫酷的旋轉自發光圓形魔法陣，

cycle = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load(cycleTexture),
  transparent: true
}));
cycle.rotation.x = -0.5 * Math.PI;
cycle.position.set(0, -9, 0);
cycle.receiveShadow = true;
scene.add(cycle);

魔法陣的貼圖：

?? MeshPhongMaterial 網格材質

一種用于具有鏡面高光的光澤表面的材質，該材質使用非物理的 Blinn-Phong 模型來計算反射率，

建構式：MeshPhongMaterial(parameters: Object)

  • parameters：（可選）用于定義材質外觀的物件，具有一個或多個屬性，

特殊屬性：

  • .emissive[Color]：材質的放射（光）顏色，基本上是不受其他光照影響的固有顏色，默認為黑色，
  • .emissiveMap[Texture]：設定放射（發光）貼圖，默認值為 null，放射貼圖顏色由放射顏色和強度所調節， 如果你有一個放射貼圖，請務必將放射顏色設定為黑色以外的其他顏色，
  • .emissiveIntensity[Float]：放射光強度，調節發光顏色，默認為 1，
  • .shininess[Float]：specular 高亮的程度，越高的值越閃亮，默認值為 30，
  • .specular[Color]：材質的高光顏色，默認值為 0x111111 的顏色 Color，這定義了材質的光澤度和光澤的顏色，
  • .specularMap[Texture]：鏡面反射貼圖值會影響鏡面高光以及環境貼圖對表面的影響程度，默認值為 null，

與 MeshLambertMaterial 中使用的 Lambertian 模型不同，該材質可以模擬具有鏡面高光的光澤表面（例如涂漆木材），使用 Phong 著色模型計算著色時，會計算每個像素的陰影，與 MeshLambertMaterial 使用的 Gouraud 模型相比，該模型的結果更準確，但代價是犧牲一些性能，
MeshStandardMaterial 和 MeshPhysicalMaterial 也使用這個著色模型，在 MeshStandardMaterial 或 MeshPhysicalMaterial 上使用此材質時，性能通常會更高 ，但會犧牲一些圖形精度，

文字模型

使用 FBXLoader 來加載恭喜發財，歲歲平安字樣的 3D 文字模型，

const fbxLoader = new FBXLoader();
fbxLoader.load(textModel, mesh => {
  mesh.traverse(child => {
    if (child.isMesh) {
      meshes.push(mesh);
      child.castShadow = true;
      child.receiveShadow = true;
      // 調節材質的金屬度、粗糙度、顏色等樣式
      child.material.metalness = .2;
      child.material.roughness = .8;
      child.material.color = new THREE.Color(0x111111);
    }
  });
  mesh.position.set(4, 6, -8);
  mesh.rotation.set(-80, 0, 0);
  mesh.scale.set(.32, .32, .32);
  group.add(mesh);
});

?? 嗶哩嗶哩 3D 文字生成教程傳送門：iBlender中文版插件 老外教你用漢字中文字體 Font 3D Chinese And Japanese Characters Blender 插件教程

老虎模型

老虎模型是 gltf 格式，在使用 GLTFLoader 加載模型的程序中，發現有 ?? bug，loader 無法讀取到模型體積的 total 值，于是使用通用加載器 LoadingManager 來管理模型加載進度，

const manager = new THREE.LoadingManager();
manager.onStart = (url, loaded, total) => {};
manager.onLoad = () => {};
manager.onProgress = async(url, loaded, total) => {
  if (Math.floor(loaded / total * 100) === 100) {
    this.setState({ loadingProcess: Math.floor(loaded / total * 100) });
  } else {
    this.setState({ loadingProcess: Math.floor(loaded / total * 100) });
  }
};
const gltfLoader = new GLTFLoader(manager);
gltfLoader.load(tigerModel, mesh => {
  mesh.scene.traverse(child => {
    if (child.isMesh) {
      child.castShadow = true;
      child.material.metalness = 0;
      child.material.roughness = .8;
      child.material.transparent = true;
      child.material.side = THREE.DoubleSide;
      child.material.color = new THREE.Color(0xffffff);
    }
  });
  mesh.scene.rotation.y = Math.PI * 9 / 8;
  mesh.scene.position.set(0, -4, 2);
  mesh.scene.scale.set(.75, .75, .75);
  // ?? 加載模型自身影片
  let meshAnimation = mesh.animations[0];
  mixer = new THREE.AnimationMixer(mesh.scene);
  let animationClip = meshAnimation;
  let clipAction = mixer.clipAction(animationClip).play();
  animationClip = clipAction.getClip();
  group.add(mesh.scene);
  scene.add(group)
});

?? LoadingManager 加載器管理器

它的功能是處理并跟蹤已加載和待處理的資料，如果未手動設定加強管理器，則會為加載器創建和使用默認全域實體加載器管理器，一般來說，默認的加載管理器已足夠使用了，但有時候也需要設定單獨的加載器，比如，你想為物件和紋理顯示單獨的加載條時，

構造方法：LoadingManager(onLoad: Function, onProgress: Function, one rror: Function)

  • onLoad：可選，所有加載器加載完成后，將呼叫此函式，
  • onProgress：可選，當每個專案完成后，將呼叫此函式，
  • onError：可選，當一個加載器遇到錯誤時，將呼叫此函式，

屬性：

  • .onStart[Function]：加載開始時被呼叫，引數: url 被加載的項的url；itemsLoaded 目前已加載項的個數；itemsTotal 總共所需要加載項的個數，此方法默認未定義，
  • .onLoad[Function]：所有的項加載完成后將呼叫此函式，默認情況下，此方法時未定義的，除非在建構式中進行傳遞，
  • .onProgress[Function]：此方法加載每一個項，加載完成時進行呼叫，引數：url 被加載的項的 url；itemsLoaded 目前已加載項的個數；itemsTotal 總共所需要加載項的個數，默認情況下，此方法時未定義的，除非在建構式中進行傳遞，
  • .onError[Function]：此方法將在任意項加載錯誤時呼叫，引數：url 所加載出錯誤的項的 url，默認情況下，此方法時未定義的，除非在建構式中進行傳遞，

添加鏡頭移動補間影片

模型加載完成后，通過結合使用 TWEEN.js 實作相機 ?? 移動實作漫游，也就是打開頁面時看到的模型由遠及近逐漸變大的影片效果，

const Animations = {
  animateCamera: (camera, controls, newP, newT, time = 2000, callBack) => {
    var tween = new TWEEN.Tween({
      x1: camera.position.x,
      y1: camera.position.y,
      z1: camera.position.z,
      x2: controls.target.x,
      y2: controls.target.y,
      z2: controls.target.z,
    });
    tween.to({
      x1: newP.x,
      y1: newP.y,
      z1: newP.z,
      x2: newT.x,
      y2: newT.y,
      z2: newT.z,
    }, time);
    tween.onUpdate(function (object) {
      camera.position.x = object.x1;
      camera.position.y = object.y1;
      camera.position.z = object.z1;
      controls.target.x = object.x2;
      controls.target.y = object.y2;
      controls.target.z = object.z2;
      controls.update();
    });
    tween.onComplete(function () {
      controls.enabled = true;
      callBack();
    });
    tween.easing(TWEEN.Easing.Cubic.InOut);
    tween.start();
  },
}
export default Animations;

呼叫示例：

Animations.animateCamera(camera, controls, { x: 0, y: 5, z: 21 }, { x: 0, y: 0, z: 0 }, 2400, () => {});

?? TWEEN.js

是一個補間影片庫，可以實作很多影片效果，它使一個物件在一定時間內從一個狀態緩動變化到另外一個狀態，TWEEN.js 本質就是一系列緩動函式演算法，結合Canvas、Three.js 很簡單就能實作很多效果，

基本使用：

var tween = new TWEEN.Tween({x: 1})     // position: {x: 1}
.delay(100)                             // 等待100ms
.to({x: 200}, 1000)                     // 1s時間，x到200
.onUpdate(render)                       // 變更期間執行render方法
.onComplete(() => {})                   // 影片完成
.onStop(() => {})                       // 影片停止
.start();                               // 開啟影片

?? 要讓影片真正動起來，需要在 requestAnimationFrame 中呼叫 update 方法，

TWEEN.update()

緩動型別：

TWEEN.js 最強大的地方在于提供了很多常用的緩動影片型別，由 api easing() 指定，如示例中用到的：

tween.easing(TWEEN.Easing.Cubic.InOut);

鏈式呼叫：

TWEEN.js 支持鏈式呼叫，如在 影片A 結束后要執行 影片B，可以這樣 tweenA.chain(tweenB) 利用鏈式呼叫創建往復來回回圈的影片：

var tweenA = new TWEEN.Tween(position).to({x: 200}, 1000);
var tweenB = new TWEEN.Tween(position).to({x: 0}, 1000);
tweenA.chain(tweenB);
tweenB.chain(tweenA);
tweenA.start();

控制器緩動移動

controls.enableDamping 設定為 true 可以開啟滑鼠移動場景時的緩動效果，產生運動慣性，開啟后 3D 更具真實感，

controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.maxDistance = 160;

?? THREE.OrbitControls 引數控制一覽

//滑鼠控制是否可用
controls.enabled = true;
//聚焦坐標
controls.target = new THREE.Vector3();
//最大最小相機移動距離（PerspectiveCamera 景深相機）
controls.minDistance = 0;
controls.maxDistance = Infinity;
//最大最小滑鼠縮放大小（OrthographicCamera正交相機）
controls.minZoom = 0;
controls.maxZoom = Infinity;
//最大仰視角和俯視角，范圍是0到Math.PI
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI;
//水平方向視角限制，范圍[-Math.PI, Math.PI]
controls.minAzimuthAngle = - Infinity;
controls.maxAzimuthAngle = Infinity;
//慣性滑動，滑動大小默認0.25，若開啟，那么controls.update()需要加到影片回圈函式中
controls.enableDamping = false;
controls.dampingFactor = 0.25;
//滾輪是否可控制zoom，zoom速度默認1
controls.enableZoom = true;
controls.zoomSpeed = 1.0;
//是否可旋轉，旋轉速度
controls.enableRotate = true;
controls.rotateSpeed = 1.0;
//是否可平移，默認移動速度為7px
controls.enablePan = true;
// 點擊箭頭鍵時移動的像素值
controls.keyPanSpeed = 7.0;
//是否自動旋轉，自動旋轉速度，默認每秒30圈，如果是enabled，那么controls.update()需要加到影片回圈函式中
controls.autoRotate = false;
// 當fps為60時每轉30s
controls.autoRotateSpeed = 2.0;
//是否能使用鍵盤
controls.enableKeys = true;
//默認鍵盤控制上下左右的鍵
controls.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
//滑鼠點擊按鈕
controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };

最后不要忘記添加視窗縮放適配方法和 requestAnimationFrame 更新方法，

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  let time = clock.getDelta();
  // 老虎影片
  mixer && mixer.update(time);
  // 補間影片
  TWEEN && TWEEN.update();
  // 控制器
  controls && controls.update();
  // 魔法陣
  cycle && (cycle.rotation.z += .01);
}

Loading 頁3D文字樣式

3D 文字樣式主要通過疊加多層 text-shadow 實作的，

.loading {
  font-size: 64px;
  color: #FFFFFF;
  text-shadow:     0 1px 0 hsl(174,5%,80%),
                   0 2px 0 hsl(174,5%,75%),
                   0 3px 0 hsl(174,5%,70%),
                   0 4px 0 hsl(174,5%,66%),
                   0 5px 0 hsl(174,5%,64%),
                   0 6px 0 hsl(174,5%,62%),
                   0 7px 0 hsl(174,5%,61%),
                   0 8px 0 hsl(174,5%,60%),
                   0 0 5px rgba(0,0,0,.05),
                  0 1px 3px rgba(0,0,0,.2),
                  0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.2),
                0 10px 10px rgba(0,0,0,.2),
                0 20px 20px rgba(0,0,0,.3);
}

效果

最終實作效果如下圖所示，大家感興趣可在線預覽，已適配移動端，被這張加速的 小腦斧?? 動圖笑死，

總結

本文中主要涉及到的知識點包括：

  • Fog 場景霧化
  • ShadowMaterial 陰影材質
  • MeshPhongMaterial 網格材質
  • LoadingManager 加載器管理器
  • TWEEN.js 補間影片
  • THREE.OrbitControls 引數控制
  • CSS 3D 文字樣式

附錄

想了解場景初始化、光照、陰影及其他網格幾何體的相關知識，可閱讀我的其他文章，如果覺得文章對你有幫助，不要忘了 一鍵三連??，

  • [1]. 使用Three.js實作炫酷的酸性風格3D頁面
  • [2]. Three.js 實作臉書元宇宙3D動態Logo
  • [3]. Three.js 實作3D全景偵探小游戲
  • [4]. 模型來源：sketchfab

本文作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/15786809.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413084.html

標籤：其他

上一篇：2022年form表單中input控制元件最詳細總結

下一篇：px、em、rem三者的區別

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂