JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0); }
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
varying vec2 vUv;
uniform sampler2D texture;
//uniform vec3 ambientLightColor;
void main() {
vec4 t = texture2D(texture, vUv * vec2(1, 1));
vec3 c = t.rgb;
vec3 ambientLightColor = vec3(1.0, 1.0, 1.0);
gl_FragColor = vec4(c*ambientLightColor,1.0);
}
</script>
JavaScript
var scene = new THREE.Scene();
var light = new THREE.AmbientLight(0xffffff, 1.0);
scene.add(light);
var tex = new THREE.TextureLoader().load('https://i.imgur.com/F65SfTs.jpg');
/*
var uniforms = THREE.UniformsUtils.merge( [
THREE.UniformsLib[ "lights" ],
{
texture: {type: "t", value: tex}
}
]);
*/
var uniforms = {texture: {type: "t", value: tex}};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').innerHTML,
fragmentShader: document.getElementById('fragmentShader').innerHTML,
lights: false
});
var geometry = new THREE.PlaneGeometry(3, 3, 3, .3);
var knot = new THREE.Mesh(geometry, material);
scene.add(knot);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();