Javascript 使像素强度取决于距鼠标的距离
我在512x512画布上渲染我的场景,我的目标是根据像素与鼠标光标的距离改变像素强度。但它似乎一点也没有改变。我试着乘以一个大的数字,然后它都是白色的。Javascript 使像素强度取决于距鼠标的距离,javascript,three.js,glsl,Javascript,Three.js,Glsl,我在512x512画布上渲染我的场景,我的目标是根据像素与鼠标光标的距离改变像素强度。但它似乎一点也没有改变。我试着乘以一个大的数字,然后它都是白色的。 var ico=new THREE.Mesh(new THREE.icoshedrongeometry(0.3,0),light_mat); ico.position.x=0; ico.position.y=0; ico.position.z=-3; 场景.添加(ico); var render=function(){ 向量集( (鼠标x/5
var ico=new THREE.Mesh(new THREE.icoshedrongeometry(0.3,0),light_mat);
ico.position.x=0;
ico.position.y=0;
ico.position.z=-3;
场景.添加(ico);
var render=function(){
向量集(
(鼠标x/512)*2-1,
-(鼠标y/512)*2+1,
0.5 );
矢量非投影(摄像机);
vec.sub(camera.position).normalize();
变量距离=(ico.position.z-camera.position.z)/vec.z;
位置复制(摄像机位置)。添加(矢量倍数刻度(距离));
控制台日志(pos.x+“:”+pos.y+“:”+pos.z);
ico.material.uniforms.mouse.value=pos;
请求动画帧(渲染);
渲染器。渲染(场景、摄影机);
};
...
可变vec3位置;
可变vec2 uv_位置;
可变vec3范数;
均匀vec3小鼠;
void main(){
vec4-tex=vec4(1.0,1.0,1.0,1.0);
浮动ang=点(鼠标,标准);
浮动距离=0.1*距离(鼠标、位置);
gl_FragColor=tex*dis;
}
均匀vec3小鼠;
可变vec2 uv_位置;
可变vec3范数;
可变vec3位置;
void main(){
uv_pos=uv;
正常=正常;
pos=位置;
gl_位置=projectionMatrix*modelViewMatrix*vec4(位置,1.0);
}
非常感谢您的帮助。您能跟踪一个
指示灯到您的鼠标位置吗?从技术上讲,灯光用于相对于灯光的位置(有时是角度和/或方向)缩放颜色强度。您能否将点光源
跟踪到鼠标位置?从技术上讲,灯光用于相对于灯光的位置(有时是角度和/或方向)缩放颜色强度。
var ico = new THREE.Mesh(new THREE.IcosahedronGeometry(0.3,0), light_mat);
ico.position.x = 0;
ico.position.y = 0;
ico.position.z = -3;
scene.add(ico);
var render = function() {
vec.set(
( mouse_x / 512 ) * 2 - 1,
- ( mouse_y / 512 ) * 2 + 1,
0.5 );
vec.unproject( camera );
vec.sub( camera.position ).normalize();
var distance = (ico.position.z-camera.position.z ) / vec.z;
pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
console.log(pos.x+":"+pos.y+":"+pos.z);
ico.material.uniforms.mouse.value = pos;
requestAnimationFrame(render);
renderer.render(scene, camera);
};
...
<script type="x-shader/x-vertex" id="light_f">
varying vec3 pos;
varying vec2 uv_pos;
varying vec3 norm;
uniform vec3 mouse;
void main() {
vec4 tex = vec4(1.0,1.0,1.0,1.0);
float ang = dot(mouse,norm);
float dis = 0.1*distance(mouse,pos);
gl_FragColor = tex*dis;
}
</script>
<script type="x-shader/x-vertex" id="light_v">
uniform vec3 mouse;
varying vec2 uv_pos;
varying vec3 norm;
varying vec3 pos;
void main() {
uv_pos = uv;
norm = normal;
pos = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>