成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小游戲中使用 canvas內(nèi)容做紋理

enali / 562人閱讀

摘要：由于小游戲中無法使用元素，開發(fā)中需要展示用戶信息時(shí)，只有兩個(gè)選擇使用加載字體模型，但中文字體模型都超過。使用畫布作為幾何體的材質(zhì)，該方法自由靈活，無需額外字體，也是目前小游戲開發(fā)中最佳實(shí)踐。注該為修改版，以適配小游戲。

由于小游戲中無法使用html元素，開發(fā)中需要展示用戶信息時(shí)，只有兩個(gè)選擇：

1-使用threejs加載字體模型，但中文字體模型都超過10MB。 2-使用2d canvas畫布作為threejs幾何體的材質(zhì)，該方法自由靈活，無需額外字體，也是目前小游戲開發(fā)中最佳實(shí)踐。

---注,該threejs為修改版，以適配小游戲。
---鏈接：https://gist.github.com/WangS...

import "./js/libs/weapp-adapter"
import * as THREE from "./js/libs/three.js"

let info, Performance, width, height, size, canvas2d, ctx, camera, scene, renderer, geometry, texture, mesh

wx.getSystemInfo({
    success(res) {
        info = res
        info.aspectRatio = (info.screenWidth / info.screenHeight)
        Performance = wx.getPerformance()
        run()
    }
})

function run() {
    width = window.innerWidth
    height = window.innerHeight / 2;
    size = 128;
    canvas2d = wx.createCanvas()
    ctx = canvas2d.getContext("2d");

    init();
    animate();
}

function changeCanvas() {
    ctx.font = "16pt Arial";
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas2d.width, canvas2d.height);
    ctx.fillStyle = "white";
    ctx.fillRect(10, 10, canvas2d.width - 20, canvas2d.height - 20);
    ctx.fillStyle = "black";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("王樹賢", canvas2d.width / 2, canvas2d.height / 2);
}

function init() {
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        canvas: canvas,
    });
    renderer.setSize(width, height);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
    camera.position.z = 500;
    scene.add(camera);

    texture = new THREE.Texture(canvas2d);
    let material = new THREE.MeshBasicMaterial({
        map: texture
    });
    geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    canvas2d.width = canvas2d.height = size;
}

function animate() {
    requestAnimationFrame(animate);

    changeCanvas();
    texture.needsUpdate = true;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94054.html

相關(guān)文章

  • 開始學(xué)習(xí) PixiJS

    摘要：它自動(dòng)偵測使用或者。開發(fā)者無需專門學(xué)習(xí)就能感受到強(qiáng)大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個(gè)游戲引擎，它的核心本質(zhì)是盡可能快速有效地在屏幕上移動(dòng)物體?？梢员惶幚淼膱D像被稱作紋理。 PixiJS 介紹 PixiJS 是一個(gè)超快的2D渲染引擎。它自動(dòng)偵測使用 WebGL 或者 Canvas。開發(fā)者無需專門學(xué)習(xí) WebGL 就能感受到強(qiáng)大的硬件加速的力量。 Pixi...

    fredshare 評論0 收藏0

  • 學(xué)習(xí) PixiJS — 交互工具

    摘要：設(shè)置縮放比例的構(gòu)造函數(shù)還可以傳入第三個(gè)參數(shù)，這個(gè)可選的參數(shù)用來確保使用的坐標(biāo)將匹配畫布的縮放像素坐標(biāo)。將其設(shè)置為將再次啟用拖動(dòng)。 說明 Pixi 內(nèi)置一組功能有限的用于鼠標(biāo)交互和觸摸交互的方法，但是對于游戲和應(yīng)用程序所需的豐富交互性，建議使用第三方庫來簡化操作，這篇文章介紹的是 Tink 庫，它有通用的指針對象、拖放精靈、按鈕對象、鍵盤控制 等一些有用的功能。 使用 Tink 庫 要...

    zlyBear 評論0 收藏0

  • 學(xué)習(xí) PixiJS — 視覺效果

    摘要：將水平高斯模糊應(yīng)用于對象。下一步是將此值分配給渲染選項(xiàng)的屬性。蛇圖像的寬度為像素，因此大約個(gè)片段會(huì)產(chǎn)生很好的效果。通過循環(huán)將數(shù)組中的每個(gè)按照橢圓形的軌跡移動(dòng)，形成波浪效果。 平鋪精靈 平鋪精靈是一種特殊的精靈，可以在一定的范圍內(nèi)重復(fù)一個(gè)紋理。你可以使用它們創(chuàng)建無限滾動(dòng)的背景效果。要?jiǎng)?chuàng)建平鋪精靈，需要使用帶有三個(gè)參數(shù)的 TilingSprite 類（PIXI.extras.TilingS...

    xavier 評論0 收藏0

  • 現(xiàn)在做 Web 全景合適嗎？

    摘要：全景在以前帶寬有限的條件下常常用來作為街景和全景圖片的查看。后面，我們來了解一下，如何在端實(shí)現(xiàn)全景視頻?，F(xiàn)在對支持度也不是特別友好，但是，對于全景視頻來說，在機(jī)器換代更新的前提下，全景在性能方面的瓶頸慢慢消失了。 Web 全景在以前帶寬有限的條件下常常用來作為街景和 360° 全景圖片的查看。它可以給用戶一種 self-immersive 的體驗(yàn)，通過簡單的操作，自由的查看周圍的物體。...

    psychola 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<