ThreeJS Shader材质纹理问题

Question

使用three.js r71。 我无法弄清楚为什么ShaderMaterial无法读取我的纹理。 飞机是黑色的。 我需要一双新鲜的眼睛来帮助我找出问题所在。

非常感谢！

这是HTML：

 <!DOCTYPE html> <html> <head> <script src="jquery.min.js"></script> <script src="three.min.js"></script> <script src="testshdr.js"></script> </head> <body> <!-- Shaders --> <script id="vertexShader" type="x-shader/x-vertex" > varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } </script> <script name="no_effect" id="fragmentShader_0" type="x-shader/x-fragment" > varying vec2 vUv; uniform sampler2D editImg; void main(){ vec4 myTexture = texture2D(editImg, vUv); gl_FragColor = vec4 (myTexture.r, myTexture.g, myTexture.b, 1.0); } </script> <script type="text/javascript"> var tst = new TestShdr(); </script> </body> </html>

这是JS：

 var TestShdr = function () { 'use strict'; var SCENE, RENDERER, CAMERA, GEO, MAT, OBJ, TEX, UNIFS, VS, FS; SCENE = new THREE.Scene(); RENDERER = new THREE.WebGLRenderer(); RENDERER.setSize(256, 256); CAMERA = new THREE.PerspectiveCamera(56, 1, 0.1, 1000); SCENE.add(CAMERA); CAMERA.position.z = 5; TEX = THREE.ImageUtils.loadTexture('1107.jpg'); UNIFS = { editImg: { type: 't', value: TEX} }; VS = $('#vertexShader').html(); FS = $('#fragmentShader_0').html(); GEO = new THREE.PlaneBufferGeometry(1, 1, 1, 1); MAT = new THREE.ShaderMaterial({uniforms: UNIFS, vertexShader: VS, fragmentShader: FS }); OBJ = new THREE.Mesh(GEO, MAT); SCENE.add(OBJ); document.body.appendChild(RENDERER.domElement); RENDERER.render(SCENE, CAMERA); };

Answer 1

您应该这样做：

TEX = THREE.ImageUtils.loadTexture('1107.jpg', {}, function() {
    RENDERER.render(SCENE, CAMERA);
});

ThreeJS Shader材质纹理问题

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-07-19 16:37:43

ThreeJS Shader材质纹理问题

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-07-19 16:37:43

解决方案1
2 已采纳 2015-07-19 16:37:43