Question

我只是想创建一个简单的片段着色器，它为网格绘制指定的纹理。但我无法展示它。我可以在基本几何图形中显示纹理文件，但不能使用着色器，只能在黑色球体中使用。

我不知道出了什么问题。任何帮助将不胜感激！

我正在使用Three.js THREE.WebGLRenderer 81

<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 id="fragmentShader" type="x-shader/x-fragment">
    varying vec2 vUv;
    uniform sampler2D texture1;

    void main() {
        gl_FragColor = texture2D(texture1, vUv); // Displays black sphere
        //gl_FragColor = vec4(0.5, 0.2, 1.0, 1.0); // Works; Displays Color
    }
</script>

<script>
// Initialize WebGL Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//var canvas = document.getElementById('canvas').appendChild(renderer.domElement);
document.body.appendChild( renderer.domElement );
renderer.setClearColor(0x888888, 1.0);
// Initialize Scenes
var scene = new THREE.Scene();

// Initialize Camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100);
camera.position.z = 10;

// Create Light
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(0, 0, 500);
scene.add(light);
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(100,250,100);
scene.add(light);

// Create Ball
var vertShader = document.getElementById('vertexShader').textContent;
var fragShader = document.getElementById('fragmentShader').textContent;

var textura = new THREE.TextureLoader().load('./funkyGround.jpg');

var uniforms = {
    texture1: { type: 't', value: textura }
};

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vertShader,
    fragmentShader: fragShader
});

var ball = new THREE.Mesh(new THREE.SphereGeometry(1, 50, 50), material);
scene.add(ball);

// Render the Scene
renderer.render(scene, camera);
</script>

</body>

Answer 1

经过审核，我可以找到包含render（）函数的解决方案

function render() {
    requestAnimationFrame( render ); 
    renderer.render( scene, camera );
}
render();

THREE.JS着色器纹理

1 个答案: