摘要:由于小游戏中无法使用元素,开发中需要展示用户信息时,只有两个选择使用加载字体模型,但中文字体模型都超过。使用画布作为几何体的材质,该方法自由灵活,无需额外字体,也是目前小游戏开发中最佳实践。注该为修改版,以适配小游戏。
由于小游戏中无法使用html元素,开发中需要展示用户信息时,只有两个选择:
1-使用threejs加载字体模型,但中文字体模型都超过10MB。 2-使用2d canvas画布作为threejs几何体的材质,该方法自由灵活,无需额外字体,也是目前小游戏开发中最佳实践。---注,该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); }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94054.html
摘要:它自动侦测使用或者。开发者无需专门学习就能感受到强大的硬件加速的力量。要注意的是,虽然非常适合制作游戏,但它并不是一个游戏引擎,它的核心本质是尽可能快速有效地在屏幕上移动物体。可以被处理的图像被称作纹理。 PixiJS 介绍 PixiJS 是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。 Pixi...
摘要:设置缩放比例的构造函数还可以传入第三个参数,这个可选的参数用来确保使用的坐标将匹配画布的缩放像素坐标。将其设置为将再次启用拖动。 说明 Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法,但是对于游戏和应用程序所需的丰富交互性,建议使用第三方库来简化操作,这篇文章介绍的是 Tink 库,它有通用的指针对象、拖放精灵、按钮对象、键盘控制 等一些有用的功能。 使用 Tink 库 要...
摘要:将水平高斯模糊应用于对象。下一步是将此值分配给渲染选项的属性。蛇图像的宽度为像素,因此大约个片段会产生很好的效果。通过循环将数组中的每个按照椭圆形的轨迹移动,形成波浪效果。 平铺精灵 平铺精灵是一种特殊的精灵,可以在一定的范围内重复一个纹理。你可以使用它们创建无限滚动的背景效果。要创建平铺精灵,需要使用带有三个参数的 TilingSprite 类(PIXI.extras.TilingS...
摘要:全景在以前带宽有限的条件下常常用来作为街景和全景图片的查看。后面,我们来了解一下,如何在端实现全景视频。现在对支持度也不是特别友好,但是,对于全景视频来说,在机器换代更新的前提下,全景在性能方面的瓶颈慢慢消失了。 Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体。...
阅读 1438·2019-08-29 17:14
阅读 1646·2019-08-29 12:12
阅读 727·2019-08-29 11:33
阅读 3261·2019-08-28 18:27
阅读 1442·2019-08-26 10:19
阅读 904·2019-08-23 18:18
阅读 3525·2019-08-23 16:15
阅读 2539·2019-08-23 14:14