three.js 纹理未显示且为黑色

Posted

技术标签:

【中文标题】three.js 纹理未显示且为黑色【英文标题】:three.js texture not showing and is black 【发布时间】:2020-04-17 04:46:16 【问题描述】:

我正在尝试用飞机创建一个简单的场景。它会有纹理

这里是代码:https://jsfiddle.net/0w6vfLt4/1/

但是纹理是黑色的。如果您将map: texture 更改为color: white,您将看到一个白色平面。意味着其他一切都在工作,但纹理

我做错了什么?以及如何解决这个问题?

【问题讨论】:

【参考方案1】:

这与Using textures in THREE.js有关

尝试使用带有回调的加载函数,如https://threejs.org/docs/index.html#api/en/loaders/TextureLoader 并将纹理设置为像https://threejs.org/docs/#api/en/textures/Texture.repeat中一样重复

//Create a scene, camera and a renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

//Load the texture
var loader = new THREE.TextureLoader();
loader.load(
  "https://cdn.glitch.com/62a3a7d1-3c19-4fb7-b1ef-a1c65ba38596%2Fboard.svg?v=1577426114562",
  
  function (texture) 
	  var material = new THREE.MeshBasicMaterial( map: texture );
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set( 4, 4 );
  
  //Create a 8x8 plane with texture
  var geometry = new THREE.PlaneBufferGeometry(8, 8);
  //var material = new THREE.MeshBasicMaterial( map: texture );
  var plane = new THREE.Mesh(geometry, material);
  scene.add(plane);

  //Render the scene
  renderer.render(scene, camera);
  document.body.appendChild(renderer.domElement);
  ,
  
	undefined,

	function ( err ) 
		console.error( 'An error happened.' );
	

);
body 
  margin: 0;
  font-family: monospace;

canvas 
  width: 100%;
  height: 100%;
<script src="https://threejs.org/build/three.js"></script>

【讨论】:

【参考方案2】:

纹理图像的分辨率应为 512 x 512 像素才能在移动设备中使用。我在移动设备中遇到了黑色纹理的问题。我将纹理图像的分辨率从 2000 x 2000 像素降低到 512 x 512 像素,效果很好。

【讨论】:

以上是关于three.js 纹理未显示且为黑色的主要内容,如果未能解决你的问题,请参考以下文章

Three.js 画布纹理幂为 2 但被裁剪

在 three.js 中的球体上使用纹理

为啥我的 .dae 文件在 three.js 中不显示纹理和动画?

【Three.js】请问如何显示带纹理的三维模型?

three.js如何使纹理“生成”纹理坐标,就像搅拌器循环一样

如何使用 THREE.js 向 collada 文件 (.dae) 添加纹理?