javascript - 如何在 THREE.js 中加载本地图像?
问题描述
我正在尝试将图像放在对象上,如下所示:
var texture = new THREE.TextureLoader().load( 'crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
我的本地文件夹中有“crate.gif”,但它没有出现在盒子上。
我应该运行一个网络服务器,或者我可以使用一个数据 url,因为本地图像加载不起作用,正如开发人员重新迭代的那样。
- 运行 Web 服务器是一种不可接受的变通方法,将不予考虑。
- 我可能愿意做将每个图像转换为 Base64 的繁琐工作,但我不知道如何集成该解决方案。
我意识到图像可能无法显示,因为它在被调用之前尚未加载。加载图像的最简单方法是什么?
解决方案
如果操作正确,它就像使用数据 URI 代替图像文件名一样简单:
var geometry = new THREE.SphereGeometry(0.5, 32, 32);
var texture = new THREE.TextureLoader().load( "data:image/jpeg;base64,/9j/4AAQSkZJRgA--(truncated-for-example)--BAgEASABIAAD" );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
推荐阅读
- paypal - PayPal IPN 从第三方销售网站更新我的数据库,但不是从我自己的网站更新
- amazon-cloudformation - AWS cloudformation 将参数传递给 EC2 环境
- javascript - 在reactjs中生成缩略图作为按钮
- typescript - 打字稿中的可变参数
- python - 未保存 python 文件时计算机意外关闭
- xcode - 如何在 Xcode 10 中显示代码折叠功能区?
- nested - SSRS 嵌套表 - 如果没有数据则缩小外行?
- linux - Windows Git 服务器和 Linux Git 客户端
- python - 从动态网页获取链接时遇到问题
- mvc.jquery.datatables - 如何向 jquery 数据表服务器端渲染添加多个“CRUD”列?