在片段着色器中显示纹理的正确方法是什么?

问题描述 投票:0回答:0

我正在尝试在片段着色器中显示我的球体形状的纹理。到目前为止,我有这个:

片段

`varying vec2 vUv;
uniform float uTime;
uniform sampler2D uTexture;

void main() {
  float time = uTime;
    gl_FragColor = texture2D(uTexture, vUv);

}`

顶点

`varying vec2 vUv;
uniform float uTime;

void main() {
  
  float time = uTime * 1.0;
  
  vec3 transformed = position;
  transformed.z += sin(position.y + time);

  gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);
}`

和剧本:

`import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import vertexShader from './shaders/vertex.glsl';
import fragmentShader from './shaders/fragment.glsl';
import imgW from './assets/Water_001_COLOR.jpg';

let camera, scene, renderer;
let geometry, material, mesh;
let controls;
let clock;

init();
animate();

function init() {
  // Renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
  });
  renderer.setClearColor('black', 1);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  // Camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 50;

  // Scene
  scene = new THREE.Scene();

  //Lights
  //const light = new THREE.AmbientLight( 0x404040 ); // soft white light
  //scene.add( light )

  // Geometry
    geometry = new THREE.SphereGeometry( 15, 32, 16 );

  // Texture
  const textureW = new THREE.TextureLoader().load(imgW, (texture)=>{
    texture.minFilter = THREE.NearestFilter;
  });

  // Material
  material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      uTime: { value: 0 },
      uTexture : { textureW }
    },


  });
console.log(imgW)
  // Mesh
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  // Controls
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  // Clock
  clock = new THREE.Clock();

  // Events
  onWindowResize();
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  let width = window.innerWidth;
  let height = window.innerHeight;

  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  renderer.setSize(width, height);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  controls.update();

  material.uniforms.uTime.value = clock.getElapsedTime();

  renderer.render(scene, camera);
}`

我只有纯白色,但无法渲染纹理。我安慰记录图像,它存在。我也尝试过其他图像,但没有任何反应。

我正在尝试在片段着色器中映射纹理

three.js glsl shader
© www.soinside.com 2019 - 2024. All rights reserved.