分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

ThreeJS文字作为纹理贴图

发布时间:2023-09-06 02:18责任编辑:沈小雨关键词:暂无标签

文字作为纹理贴图

From:http://www.linhongxu.com/post/view?id=222

这里可以使用canvas作为纹理贴图,Three为我们提供里CanvasTexture

function getTextCanvas(text){ ?var width=512, height=256; ?var canvas = document.createElement(‘canvas‘); canvas.width = width; canvas.height = height; var ctx = canvas.getContext(‘2d‘); ctx.fillStyle = ‘#C3C3C3‘; ctx.fillRect(0, 0, width, height); ctx.font = 50+‘px " bold‘; ctx.fillStyle = ‘#2891FF‘; ctx.textAlign = ‘center‘; ctx.textBaseline = ‘middle‘; ctx.fillText(text, width/2,height/2); ?return canvas; }var materials = [ ?new THREE.MeshBasicMaterial( { color: ‘blue‘ } ), // right new THREE.MeshBasicMaterial( { color: ‘yellow‘ } ), // left new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(getTextCanvas(‘Leo Test Label‘)) } ), // top new THREE.MeshBasicMaterial( { color: ‘black‘ } ), // bottom new THREE.MeshBasicMaterial( { color: ‘green‘ } ), // back new THREE.MeshBasicMaterial( { color: ‘red‘ } ) // front ?];

这样我们就可以利用canvas画上文字或者图形,用来填充纹理贴图。

From:https://www.cnblogs.com/xuejianxiyang/p/9784158.html

ThreeJS文字作为纹理贴图

原文地址:https://www.cnblogs.com/xuejianxiyang/p/9784158.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved