three.js mtl材质贴图未显示_threejs精灵贴图

最新推荐文章于 2023-02-17 16:34:37 发布

weixin_39610964

最新推荐文章于 2023-02-17 16:34:37 发布

阅读量1k

点赞数

文章标签： three.js mtl材质贴图未显示

本文链接：https://blog.csdn.net/weixin_39610964/article/details/111360299

版权

在使用three.js进行三维场景开发时，作者尝试用精灵（Sprite）替代cylinder来绘制监测点。遇到mtl材质贴图无法显示的问题，以及精灵颜色显示异常。通过查阅three.js官网示例，成功加载精灵但颜色显示为紫黑色。最终，作者发现是颜色混合导致，并通过将图片底色改为白色解决。同时，实现了点击事件改变精灵颜色的功能。

摘要由CSDN通过智能技术生成

“由于工作需要，在三维场景中绘制‘监测点’时使用的cylinder替代的监测点并绘制断面，突发奇想想用精灵试试。”

—

入坑代码

在搜索了大量资料后，发现绘制图片可以使用canvas绘制图片后再以材质加载到精灵上，各种尝试后场景中始终不显示精灵。代码如下(注：有可能是我操作问题，欢迎留言讨论)：

 let canvas = document.createElement('canvas');    let ctx = canvas.getContext('2d');    let img = new Image();    img.src = 'project/point.png';    img.onload = function () {
            console.log('height:', img.height);        ctx.drawImage(img, 50, 50, 50, 50);        let texture = new THREE.CanvasTexture(canvas);        texture.magFilter = THREE.LinearFilter;        texture.minFilter = THREE.LinearFilter;        texture.needsUpdate = true;        let spriteMaterial = new THREE.S

最低0.47元/天解锁文章

weixin_39610964

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
three.js mtl材质贴图未显示_threejs精灵贴图

“由于工作需要，在三维场景中绘制‘监测点’时使用的cylinder替代的监测点并绘制断面，突发奇想想用精灵试试。”01—入坑代码在搜索了大量资料后，发现绘制图片可以使用canvas绘制图片后再以材质加载到精灵上，各种尝试后场景中始终不显示精灵。代码如下(注：有可能是我操作问题，欢迎留言讨论)： let canvas = document.createElement('canvas...
复制链接

扫一扫