Javascript 着色器不'；在Three.js应用程序中无法工作
我用Three.js编写了一个程序。我尝试使用着色器，但不幸的是，该应用程序无法工作。我试图从threejs.org定制一个应用程序。代码如下：Javascript 着色器不'；在Three.js应用程序中无法工作,javascript,three.js,Javascript,Three.js,我用Three.js编写了一个程序。我尝试使用着色器，但不幸的是，该应用程序无法工作。我试图从threejs.org定制一个应用程序。代码如下： <html> <head> <title>Test</title> <script type="text/javascript" src="ecma/three.js"></script> <script type="text/javascript"
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="ecma/three.js"></script>
<script type="text/javascript" src="ecma/jquery-1.9.0.js"></script>
<script type="text/javascript" src="ecma/OrbitControls.js"></script>
<style>
body{ margin: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fragment_shader1" type="x-shader/x-fragment">
uniform vec2 resolution;
uniform float time;
varying vec2 vUv;
void main(void)
{
vec2 p = -1.0 + 2.0 * vUv;
float a = time*100.0;
float d,e,f,g=1.0/40.0,h,i,r,q;
e=400.0*(p.x*0.5+0.5);
f=400.0*(p.y*0.5+0.5);
i=200.0+sin(e*g+a/150.0)*20.0;
d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
q=f/r;
e=(r*cos(q))-a/2.0;f=(r*sin(q))-cos(a/2.0);
d=sin(e*g)*176.0+sin(e*g)*164.0+r;
h=((f+d)+a/2.0)*g;
i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
i=mod(i/5.6,256.0)/64.0;
if(i<0.0) i+=4.0;
if(i>=2.0) i=4.0-i;
d=r/350.0;
d+=sin(d*d*8.0)*0.52;
f=(sin(a*g)+1.0)/2.0;
gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),0.0);
}
</script>
<script type="text/javascript">
$(function () {
var W = window.innerWidth, H = window.innerHeight;
var plane, planeGeom, planeMat;
var sphere, sphereGeom, shadedMat;
var scene, camera, renderer;
var clock;
var orbitControls;
var uniforms1;
init();
makeLights();
makeFloor();
makeSphere();
render();
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 1000);
camera.position.set(-40, 30, 0);
camera.lookAt(new THREE.Vector3(0,0,0));
renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex(0xEEEEEE);
renderer.setSize(W, H);
renderer.shadowMapEnabled = true;
orbitControls = new THREE.OrbitControls(camera);
orbitControls.autoRotate = false;
clock = new THREE.Clock();
}
function makeLights(){
makeAmbientLight();
makeSpotLight();
}
function makeAmbientLight(){
ambiColor = 0x141414;
ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);
}
function makeSpotLight(){
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
spotLight.castShadow = true;
scene.add( spotLight );
}
function makeFloor(){
planeGeom = new THREE.PlaneGeometry(100,100);
planeMat = new THREE.MeshLambertMaterial();
var planeTex = THREE.ImageUtils.loadTexture("picim/checkerboard.jpg");
planeTex.wrapS = planeTex.wrapT = THREE.RepeatWrapping;
planeTex.repeat.set(50, 50);
planeMat.map = planeTex;
planeMat.side = THREE.DoubleSide;
plane = new THREE.Mesh(planeGeom, planeMat);
plane.rotation.x=-0.5*Math.PI;
plane.position.set(15, 0, 0);
plane.receiveShadow = true;
scene.add(plane);
}
function makeSphere(){
sphereGeom = new THREE.SphereGeometry(5,20,20);
uniforms1 = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() }
};
shadedMat = new THREE.ShaderMaterial({uniforms: uniforms1,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragment_shader1').textContent,
});
sphere = new THREE.Mesh(sphereGeom, shadedMat);
sphere.position.set(0, 10, 0);
sphere.castShadow = true;
scene.add(sphere);
}
function render(){
var delta = clock.getDelta();
orbitControls.update(delta);
sphere.rotation.y += 0.02;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
$("#WebGL-output").append(renderer.domElement);
});
</script>
</body>
</html>
试验
正文{边距：0；溢出：隐藏；}
可变vec2 vUv；
void main（）
{
vUv=紫外线；
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
gl_位置=投影矩阵*mvPosition；
}
均匀vec2分辨率；
均匀浮动时间；
可变vec2 vUv；
真空总管（真空）
{
vec2p=-1.0+2.0*vUv；
浮动a=时间*100.0；
浮点数d，e，f，g=1.0/40.0，h，i，r，q；
e=400.0*（p.x*0.5+0.5）；
f=400.0*（p.y*0.5+0.5）；
i=200.0+sin（e*g+a/150.0）*20.0；
d=200.0+cos（f*g/2.0）*18.0+cos（e*g）*7.0；
r=sqrt（功率（i-e，2.0）+功率（d-f，2.0））；
q=f/r；
e=（r*cos（q））-a/2.0；f=（r*sin（q））-cos（a/2.0）；
d=正弦（e*g）*176.0+正弦（e*g）*164.0+r；
h=（（f+d）+a/2.0）*g；
i=cos（h+r*p.x/1.3）*（e+e+a）+cos（q*g*6.0）*（r+h/3.0）；
h=sin（f*g）*144.0-sin（e*g）*212.0*p.x；
h=（h+（f-e）*q+sin（r-（a+h）/7.0）*10.0+i/4.0）*g；
i+=cos（h*2.3*sin（a/350.0-q））*184.0*sin（q-（r*4.3+a/12.0）*g）+tan（r*g+h）*184.0*cos（r*g+h）；
i=mod（i/5.6256.0）/64.0；
如果（i=2.0）i=4.0-i；
d=r/350.0；
d+=sin（d*d*8.0）*0.52；
f=（sin（a*g）+1.0）/2.0；
gl_FragColor=vec4（vec3（f*i/1.6，i/2.0+d/13.0，i）*d*p.x+vec3（i/1.3+d/8.0，i/2.0+d/18.0，i）*d*（1.0-p.x），0.0）；
}
$（函数（）{
var W=window.innerWidth，H=window.innerHeight；
var平面、planeGeom、planeMat；
var sphere、sphereGeom、shadedMat；
var场景、摄影机、渲染器；
无功时钟；
var控制；
var uniforms1；
init（）；
makeLights（）；
makeFloor（）；
makeSphere（）；
render（）；
函数init（）{
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（45，宽/高，0.11000）；
摄像机位置设置（-40,30,0）；
摄像机。注视（新三个。矢量3（0,0,0））；
renderer=new THREE.WebGLRenderer（）；
renderer.setClearColorHex（0xEEEE）；
渲染器。设置大小（W，H）；
renderer.shadowMapEnabled=true；
轨道控制=新的三个轨道控制（摄像机）；
orbitControls.autoRotate=false；
时钟=新的三个时钟（）；
}
函数makeLights（）{
makeAmbientLight（）；
makeSpotLight（）；
}
函数makeAmbientLight（）{
ambiColor=0x141414；
ambientLight=新的三个。ambientLight（ambiColor）；
场景。添加（环境光）；
}
函数makeSpotLight（）{
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（-40,60，-10）；
spotLight.castShadow=true；
场景。添加（聚光灯）；
}
函数makeFloor（）{
planeGeom=新的三个平面几何体（100100）；
planeMat=新的三个。MeshLambertMaterial（）；
var planeTex=3.ImageUtils.loadTexture（“picim/checkboard.jpg”）；
planeTex.wrapps=planeTex.wrapT=3.wrapp；
planeTex.重复设置（50,50）；
planeMat.map=planeTex；
planeMat.side=3.DoubleSide；
平面=新的三个网格（planeGeom、planeMat）；
plane.rotation.x=-0.5*Math.PI；
平面位置集（15,0,0）；
plane.receiveShadow=true；
场景。添加（平面）；
}
函数makeSphere（）{
sphereGeom=新的三个。球度法（5,20,20）；
uniforms1={
时间：{type:“f”，值：1.0}，
解析：{type:“v2”，值：new THREE.Vector2（）}
};
shadedMat=new THREE.ShaderMaterial（{uniforms:uniforms1，
vertexShader:document.getElementById（'vertexShader'）.textContent，
fragmentShader:document.getElementById（'fragment_shader1'）.textContent，
});
sphere=新的三点网格（sphereGeom、shadedMat）；
球面位置设置（0,10,0）；
sphere.castShadow=true；
场景。添加（球体）；
}
函数render（）{
var delta=clock.getDelta（）；
轨道控制。更新（增量）；
球体旋转y+=0.02；
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
$（“#WebGL输出”）.append（renderer.doElement）；
});
Ee如果您看到一个白色球体带有这些疯狂的着色器，那么这意味着着色器不工作 如果你问为什么。。。着色器（这是一个相当不错的着色器）渲染白色，而不是所有的数学运算，很难说有人能帮助您处理呈现的代码
您可以添加类似gl_FragColor.xyz=cos（gl_FragColor.xyz）*.5+.5；您将看到白色是否真的有更大的含义。您能为它创建一个JSFIDLE吗？我必须承认我不知道怎么做。也许