Webgl 怎么打三个。Js 3D图其纹理为你想要的图片所形成的材质？

我尝试了以下方法，但它是黑色的，没有显示我在图片中加载的内容

有一些事情可能会导致这种情况

您的第一行应该是：

var crateTexture = new THREE.ImageUtils.loadTexture( 'img src="1.jpg' );
var crateMaterial = new THREE.MeshBasicMaterial( { map: crateTexture } );
var cube = new THREE.Mesh( THREE.GeometryUtils.clone(cubeGeometry), crateMaterial );
 cube.position.set(-60, 50, -100);
scene.add(  cube );     

请注意，我们为

loadTexture

提供了一个普通URL，而不是HTML属性

下一个最有可能的原因是您没有看到纹理，因为您是从文件系统本地查看页面，而不是通过Web服务器。如果您是从文件系统（即以

file://

而不是

http://

开头的URL）查看页面，则当页面尝试加载纹理时，将出现错误

在chrome中，错误如下所示：

var crateTexture = new THREE.ImageUtils.loadTexture( '1.jpg' );

您可能看不到纹理的最后一个原因是您没有持续渲染场景。确保您有某种类型的

animate（）

函数可以连续渲染场景

实际上，浏览器下载和加载纹理需要一秒钟的时间（这是异步发生的），因此，如果只渲染一次场景，则很可能在图像下载之前渲染它

我有一个你的代码的工作版本的现场演示。是代码的链接

Cross-origin image load denied by Cross-Origin Resource Sharing policy.