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

Question

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

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

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

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

Answer 1

这与在 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>

Answer 2

纹理图像的分辨率应为 512 x 512 像素才能在移动设备上工作。 我在手机上遇到了黑色纹理的问题。 我将我的纹理图像分辨率从 2000 x 2000 像素降低到 512 x 512 像素并且效果很好。