dither or 'dotted' shading, for threejs_playGnd
/* ------------------- INSTRUCTIONS ----- | |
to shade your scene 'dithered' or 'dotted' | |
you must first add this shader file to your HTML page | |
add the following tag belelow the Detector.js | |
which is on line 16 | |
-------------------------------------- */ | |
<script src="http://brangerbriz.net/labs/threejs_playGnd/js/ShaderToon.js"></script> | |
/* -------------------------------------- | |
then add the following createShaderMaterial() function | |
between your setup() function and your | |
draw() function | |
-------------------------------------- */ | |
function createShaderMaterial( id, light, ambientLight ) { | |
var shader = THREE.ShaderToon[ id ]; | |
var u = THREE.UniformsUtils.clone( shader.uniforms ); | |
var vs = shader.vertexShader; | |
var fs = shader.fragmentShader; | |
var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } ); | |
material.uniforms.uDirLightPos.value = light.position; | |
material.uniforms.uDirLightColor.value = light.color; | |
material.uniforms.uAmbientLightColor.value = ambientLight.color; | |
return material; | |
} | |
/* -------------------------------------- | |
then create your mesh | |
and replace "material = new THREE.Mesh..." | |
with the code below | |
-------------------------------------- */ | |
material = createShaderMaterial( "dotted", directionalLight, ambientLight ); | |
material.uniforms.uBaseColor.value.setHex( 0x000000 ); | |
material.uniforms.uLineColor1.value.setHex( 0xff00ff ); | |
/* -------------------------------------- | |
you can change the color of the dots by changing | |
the hex values of uBaseColor and uLineColor1 | |
you can also change "dotted" to "hatching" | |
NOTE: this material requires lights, notice the code above | |
references two lights after "dotted" | |
make sure to include the lights (code below) | |
in your setup() function | |
-------------------------------------- */ | |
directionalLight = new THREE.DirectionalLight(0xffffff); | |
directionalLight.position.set( 0.96, 1.78, 0 ); | |
scene.add( directionalLight ); | |
ambientLight = new THREE.AmbientLight( 0x080808 ); | |
scene.add( ambientLight ); | |
This comment has been minimized.
This comment has been minimized.
@ daniel880420 are u getting any errors in ur JavaScript console in ur browser? it might just be the fact that this is pretty old now :/ there have been lots of updates to three.js since we made this project, it's probably worth a big update... one day... when there's time |
This comment has been minimized.
This comment has been minimized.
here's my code wish u can check it if theres anything wrong,thanks!!! <style> body { background-color: #ffffff; margin: 0; overflow: hidden; } </style>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
i followed the steps with this snippet but still not working . How can i get some helps?