Replicating MeshLambertMaterial Using ShaderMaterial ignores textures

by

three.js was designed to be easy to use, not easy to modify. This may change in the future…

You need to set the material.defines like so: 

var defines = {};

defines[ "USE_MAP" ] = "";.

Then specify defines in the material constructor.

var material =  new THREE.ShaderMaterial({
   name: "TerrainShader",
   defines     : defines,
   uniforms    : shaderUniforms,
   vertexShader: THREE.MyShader.vertexShader,
   fragmentShader: THREE.MyShader.fragmentShader,
   fog:false,
   lights:true
});

Regarding the texture repetitions, you need to add the repeat to your uniforms:

shaderUniforms[ "offsetRepeat" ].value.set( 0, 0, 2, 2 );

three.js r.66

More Related Contents:

  1. Drawing a line with three.js dynamically
  2. Thickness of lines using THREE.LineBasicMaterial
  3. Multiple transparent textures on the same mesh face in Three.js
  4. How to stop a requestAnimationFrame recursion/loop?
  5. How to get the absolute position of a vertex in three.js?
  6. Three.js / WebGL – transparent planes hiding other planes behind them
  7. How to detect collision in three.js?
  8. Three.js/WebGL: Large spheres appear broken at intersection
  9. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  10. Antialiasing not working in Three.js
  11. How to render clipped surfaces as solid objects
  12. Threejs: assign different colors to each vertex in a geometry
  13. Why do shaders have to be in html file for webgl program?
  14. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  15. How to Fit Camera to Object
  16. THREE.js Ray Intersect fails by adding div
  17. Three.js – Orthographic camera
  18. How to rotate a 3D object on axis three.js?
  19. Converting World coordinates to Screen coordinates in Three.js using Projection
  20. Transparent background with three.js
  21. Emulating palette based graphics in WebGL v.s. Canvas 2D
  22. Rendering a transparent shell
  23. How do you save an image from a Three.js canvas?
  24. How do I clean up and unload a WebGL canvas context from GPU after use?
  25. Three JS Pivot point
  26. three.js transparent object occlusion
  27. How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?
  28. Three.js add an object to a group but keep global position/rotation/scale as it was
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Apply color gradient to material on mesh – three.js

Leave a Comment