小编Car*_*een的帖子
来自uv offset的GLSL webgl lerp法线
我在一个512px*512px(100x100段)平面上有一个置换贴图,因为置换贴图的图像向左滚动顶点对齐高度位置不能平滑混合,我一直在看mix()函数和smooth-step ()随着时间的推移将法线变形到它们的位置,但我很难实现它.
uniform sampler2D heightText; //texture greyscale 512x512
uniform float displace;
uniform float time;
uniform float speed;
varying vec2 vUV;
varying float scaleDisplace;
void main() {
vUV = uv;
vec2 uvOffset = vUV + vec2( 0.1, 0.1)* time; // animates offset
vec2 uvCo = vUV + vec2( 0.0, 0.0);
vec2 texSize = vec2(-0.8, 0.8); // scales image larger
vec4 data = texture2D( heightText, uvOffset + fract(uvCo)*texSize.x);
scaleDisplace = data.r;
//vec3 possy = normal * displace * scaleDisplace;
vec3 morphPossy = …10
推荐指数
推荐指数
1
解决办法
解决办法
1029
查看次数
查看次数
HTML Bootstrap 3不向UL LI添加活动类
我试图使用滚动间谍为ul li一页滚动和粘性导航添加一个活动类,由于一些未知的原因,我无法在我的项目中得到这项工作.以下是我的菜单布局:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
<div class="container_full height">
<div class="navbar-header page-scroll height">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-holder">
<img class="" src="img/logo-p.png"/>
<span>
<a class="page-scroll" href="#home-page">xxxxxx</a>
<i>xxxxxxx</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse height">
<ul class="nav navbar-nav height">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#home-page">item1</a>
</li>
<li>
<a class="page-scroll" href="#item2">item2</a>
</li>
<li>
<a class="page-scroll" href="#item3">item3</a>
</li>
<li> …9
推荐指数
推荐指数
1
解决办法
解决办法
1182
查看次数
查看次数
three.js webgl自定义着色器与新偏移共享纹理
我在32x32 tile*32上分割纹理1024 x 1024,我不确定它是否可以与偏移共享纹理,或者我需要为每个具有偏移的tile创建一个新纹理.
创建偏移量我使用统一值= 32*i并通过创建拼贴的每个循环实例更新统一,所有拼贴似乎是相同的偏移量？因为基本上我想要一个图像看起来像它的一个图像没有分解成小瓷砖.但是当前的输出是所有32个瓷砖上相同的x,y偏移.我使用顶点着色器和three.js r71 ...
我是否需要为每个具有偏移的图块创建新纹理？
for ( j = 0; j < row; j ++ ) {
for ( t = 0; t < col; t ++ ) {
customUniforms.tX.value = tX;
customUniforms.tY.value = tY;
console.log(customUniforms.tX.value);
customUniforms.tX.needsUpdate = true;
customUniforms.tY.needsUpdate = true;
mesh = new THREE.Mesh( geometry,mMaterial);// or new material
}
}
//vertex shader :
vec2 uvOffset = vUV + vec2( tX, tY) ;
图片示例:
每个图像的偏移量应为10 0r 20 px,但它们都是相同的....这是使用一个纹理..
正如所建议的那样,我试图在没有运气的情况下操纵每个对象上的紫外线,它似乎使所有相同的顶点具有相同的位置,例如10x10 segmant平面所有面都将是相同的
var geometry = [
[ …7
推荐指数
推荐指数
1
解决办法
解决办法
1354
查看次数
查看次数
Three.js射线拣选平面/网格v69的面部分
由于在three.js中不再支持四边形面.我遇到麻烦Raycast在4个顶点之间挑选分段作为正方形,因为它们现在由三角形面组成.
所以我的采摘返回三角形而不是方形:
var faces = 10;
var myplane = new THREE.Mesh(
new THREE.PlaneGeometry(1000, 1000, faces, faces),
new THREE.MeshNormalMaterial({
color: 0x993333,
wireframe: false
}));
objects.push(myplane);
scene.add(myplane);
//raycast code
if ( intersects.length > 0 ) {
_controls.noRotate = true;
var face = intersects[0].face;
var temp = intersects[0].object;
var geo = temp.geometry;
geo.vertices[face.a].z -= 20;
geo.vertices[face.b].z -= 20;
geo.vertices[face.c].z -= 20;
//want other face verts below basically
geo.vertices[face.d].z -= 20;
geo.vertices[face.e].z -= 20;
geo.vertices[face.f].z -= 20;
geo.verticesNeedUpdate = true;
if(intersects[ 0 ].faceIndex % …3
推荐指数
推荐指数
1
解决办法
解决办法
1931
查看次数
查看次数
raycaster.intersectObjects不起作用:使用three.js提供空数组
看起来"raycaster.intersectObjects"没有反应(使用Three.js r54).从代码中提取(包含重要部分)如下:
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 75;
scene = new THREE.Scene();
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
var raycaster = new THREE.Raycaster();
var mouseVector = new THREE.Vector2();
function onDocumentMouseDown( e ) {
e.preventDefault();
mouseVector.x = ( e.clientX / window.innerWidth ) * 2 - 1;
mouseVector.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
var intersects = …3
推荐指数
推荐指数
1
解决办法
解决办法
8861
查看次数
查看次数
-1
推荐指数
推荐指数
1
解决办法
解决办法
386
查看次数
查看次数