我正在尝试在片段着色器中显示我的球体形状的纹理。到目前为止,我有这个:
片段
`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);
}`
我只有纯白色,但无法渲染纹理。我安慰记录图像,它存在。我也尝试过其他图像,但没有任何反应。
我正在尝试在片段着色器中映射纹理