Javascript Three.js环境贴图和顶点动画

我正在使用JavaScript编写代码并使用Three.js完成我的第一步

我正在学习如何使用着色器，一个星期以来我一直在学习无法使用的顶点动画

这是我的顶点着色器：

uniform float fresnelBias;
uniform float amplitude;
uniform float fresnelScale;
uniform float fresnelPower;
attribute float displacement;

varying float vReflectionFactor;
varying vec3 vReflect;

void main() {
  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  vec4 worldPosition = modelMatrix * vec4( position, 1.0 );

  vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );

  vec3 I = worldPosition.xyz - cameraPosition;

  vReflect = reflect( I, worldNormal );
  vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );

  gl_Position = projectionMatrix * mvPosition;
}

这是片段着色器：

uniform vec3 color;
uniform samplerCube envMap;

varying vec3 vReflect;
varying float vReflectionFactor;

void main() {
  vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
  gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
}

然后，我为属性声明了一个变量，为制服声明了另一个变量，以将其分配给几何体，但当我加载站点时，我什么也看不到。JavaScript控制台告诉我们，在这一行中，

uniforms.amplication.value=Math.sin（frame）制服未定义

你有什么建议吗？你知道我能做什么吗

我把我的完整代码放在这里，希望它能有所帮助：

<script id="vertexShader" type="x-shader/x-vertex">

uniform float fresnelBias;
uniform float amplitude;
uniform float fresnelScale;
uniform float fresnelPower;
attribute float displacement;

varying float vReflectionFactor;
varying vec3 vReflect;

void main() {
  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  vec4 worldPosition = modelMatrix * vec4( position, 1.0 );

  vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );

  vec3 I = worldPosition.xyz - cameraPosition;

  vReflect = reflect( I, worldNormal );
  vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );

  gl_Position = projectionMatrix * mvPosition;
}
  </script>

  <script id="fragmentShader" type="x-shader/x-fragment">

uniform vec3 color;
uniform samplerCube envMap;

varying vec3 vReflect;
varying float vReflectionFactor;

void main() {
  vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
  gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
}
  </script>

  <script>

  var camera, scene, renderer;
  var mesh, material, controls, sky;
  init();
  animate();

  function init(){
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setClearColor(0xfffff, 0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.z = 400;
    //controls = new THREE.TrackballControls( camera );

    scene = new THREE.Scene();
    var numberOfImages = 46, images = [];
            for (var i = 1; i <= numberOfImages; i++) {
              images.push('sources/instagram2/image' + i + ".jpg");
            }

    var urls = images.sort(function(){return .6 - Math.random()}).slice(0,6);
    var textureCube = THREE.ImageUtils.loadTextureCube( urls );
    // Skybox
    var skyshader = THREE.ShaderLib[ "cube" ];
    skyshader.uniforms[ "tCube" ].value = textureCube;

    var skymaterial = new THREE.ShaderMaterial( {

      fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      uniforms: skyshader.uniforms,
      depthWrite: false,
      side: THREE.BackSide

    } );

    sky = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), skymaterial );
    sky.visible = false;
    scene.add( sky );

    var attributes = {
        displacement: {
        type: 'f', // a float
        value: [] // an empty array
        }
    };

    var uniforms = {
        color: {
          type: "c",
          value: new THREE.Color(0x000000),
        },
        envMap: {
          type: "t",
          value: textureCube
        },
        fresnelBias: {
          type: "f",
          value: 0.1
        },
        fresnelScale: {
          type: "f",
          value: 1.0
        },
        fresnelPower: {
          type: 'f',
          value: 2.0
        },
        amplitude: {
          type: 'f',
          value: 0
        }
    };
    var vertexShader = document.getElementById('vertexShader').text;
    var fragmentShader = document.getElementById('fragmentShader').text;
    material = new THREE.ShaderMaterial(
        {
          uniforms : uniforms,
          vertexShader : vertexShader,
          fragmentShader : fragmentShader,
        });


    var loader = new THREE.BinaryLoader();
    loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {

    mesh = new THREE.Mesh(geometry, material);
    mesh.scale.set( 300, 300, 300 );

    var vertices = mesh.geometry.vertices;
    var values = attributes.displacement.value
    for(var v = 0; v < vertices.length; v++) {
    values.push(Math.random() * 10);
    }

    scene.add(mesh);

    } );



    var light = new THREE.AmbientLight( 0x404040 ); // soft white light
    scene.add( light );

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    window.addEventListener('resize', onWindowResize, false);

  }

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

  var frame = 0;

  function animate() {

    uniforms.amplitude.value = Math.sin(frame);
    frame += 0.01;

    requestAnimationFrame(animate);
    //controls.update();
    //mesh.rotation.x += 0.005;
    //mesh.rotation.y += 0.005;
    renderer.render(scene, camera);
    stats.update();
  }


均匀浮动菲涅耳；
均匀浮动幅度；
均匀浮动菲涅耳刻度；
均匀浮动菲涅耳功率；
属性浮动位移；
可变浮点数；
可变矢量反射；
void main（）{
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
vec4世界位置=模型矩阵*vec4（位置，1.0）；
vec3 worldNormal=normalize（mat3（模型矩阵[0].xyz，模型矩阵[1].xyz，模型矩阵[2].xyz）*normal）；
vec3 I=worldPosition.xyz-摄像机位置；
vReflect=反射（I，正常）；
vReflectionFactor=fresnelBias+fresnelScale*pow（1.0+dot（标准化（I）、worldNormal）、fresnelPower）；
gl_位置=投影矩阵*mvPosition；
}
vec3颜色均匀；
均匀取样器；
可变矢量反射；
可变浮点数；
void main（）{
vec4 envColor=textureCube（envMap，vec3（-vReflect.x，vReflect.yz））；
gl_FragColor=vec4（混合（颜色，envColor.xyz，vec3（钳位（vReflectionFactor，0.0，1.0））），1.0）；
}
摄像机、场景、渲染器；
var网格、材质、控件、天空；
init（）；
制作动画（）；
函数init（）{
renderer=new THREE.WebGLRenderer（{alpha:true}）；
setClearColor（0xfffff，0）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，12000）；
摄像机位置z=400；
//控件=新的三个轨迹球控件（摄像头）；
场景=新的三个。场景（）；
var numberOfImages=46，images=[]；
对于（var i=1；i您已经在
init（）
函数中定义了
uniforms
变量，因此它的作用域在该函数中，无法在
animate（）
函数中访问。

将
uniforms
变量添加到全局作用域中，您就可以了。
您已经在
init（）
函数中定义了
uniforms
变量，因此它的作用域在该函数中，并且不能在
animate（）
函数中访问。

将
uniforms
变量添加到全局范围，你应该会没事的。
谢谢@2pha。顺便说一句，我在网上找到了你的实验，它们非常有用。我会更新我的问题以显示代码，不会出现任何控制台错误。现在我可以看到我的模型，但它不会制作顶点动画。你有什么建议吗？制作一个j我试过制作一个JSFIDLE，但加载不正确。我暂时在这里加载。我希望你能看一下并给我一些建议。看看如何在JSFIDLE中实现three.js。修改一下最基本的代码来演示你的问题，并使用球体或长方体作为网格而不是尝试加载一个。人们不会下载你的文件，因为这不值得。如果你需要帮助，你必须让人们提供帮助变得容易。谢谢@2pha。顺便说一句，我在网上找到了你的实验，它们真的很有帮助。我会更新我的问题，以显示代码，而不会出现任何控制台错误。现在我可以n看到我的模型，但它没有制作顶点动画。你有什么建议吗？制作一个JSFIDLE，这样更容易帮助你。我尝试制作一个JSFIDLE，但加载不正确。我暂时加载它。我希望你能看一下并给我一些建议。看看如何在JSFIDLE中实现three.js。做一个小动作h最基本的代码，用于演示您的问题，并使用球体或长方体作为网格，而不是尝试加载。人们不会下载您的文件，因为这根本不值得。如果您需要帮助，您必须让人们能够轻松地提供帮助。
<script id="vertexShader" type="x-shader/x-vertex">

uniform float fresnelBias;
uniform float amplitude;
uniform float fresnelScale;
uniform float fresnelPower;
attribute float displacement;

varying float vReflectionFactor;
varying vec3 vReflect;

void main() {

  vec3 newPosition = position + normal * vec3(displacement * amplitude);

  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  vec4 worldPosition = modelMatrix * vec4( position, 1.0 );

  vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );

  vec3 I = worldPosition.xyz - cameraPosition;

  vReflect = reflect( I, worldNormal );
  vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );

  gl_Position = projectionMatrix * mvPosition;
}
  </script>

  <script id="fragmentShader" type="x-shader/x-fragment">

uniform vec3 color;
uniform samplerCube envMap;

varying vec3 vReflect;
varying float vReflectionFactor;

void main() {
  vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
  gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
}
  </script>

  <script>

  var camera, scene, renderer;
  var mesh, material, controls, sky;

    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setClearColor(0xfffff, 0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.z = 400;


    scene = new THREE.Scene();
    var numberOfImages = 46, images = [];
            for (var i = 1; i <= numberOfImages; i++) {
              images.push('sources/instagram2/image' + i + ".jpg");
            }

    var urls = images.sort(function(){return .6 - Math.random()}).slice(0,6);
    var textureCube = THREE.ImageUtils.loadTextureCube( urls );

    var skyshader = THREE.ShaderLib[ "cube" ];
    skyshader.uniforms[ "tCube" ].value = textureCube;

    var skymaterial = new THREE.ShaderMaterial( {

      fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      uniforms: skyshader.uniforms,
      depthWrite: false,
      side: THREE.BackSide

    } );

    sky = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), skymaterial );
    sky.visible = false;
    scene.add( sky );

    var attributes = {
        displacement: {
        type: 'f', 
        value: [] 
        }
    };

    var uniforms = {
        color: {
          type: "c",
          value: new THREE.Color(0x000000),
        },
        envMap: {
          type: "t",
          value: textureCube
        },
        fresnelBias: {
          type: "f",
          value: 0.1
        },
        fresnelScale: {
          type: "f",
          value: 1.0
        },
        fresnelPower: {
          type: 'f',
          value: 2.0
        },
        amplitude: {
          type: 'f',
          value: 0
        }
    };
    var vertexShader = document.getElementById('vertexShader').text;
    var fragmentShader = document.getElementById('fragmentShader').text;
    material = new THREE.ShaderMaterial(
        {
          uniforms : uniforms,
          vertexShader : vertexShader,
          fragmentShader : fragmentShader,
        });


    var loader = new THREE.BinaryLoader();
    loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {

    mesh = new THREE.Mesh(geometry, material);
    mesh.scale.set( 100, 100, 100 );

    var vertices = mesh.geometry.vertices;
    var values = attributes.displacement.value
    for(var v = 0; v < vertices.length; v++) {
    values.push(Math.random() * 30);
    }

    scene.add(mesh);

    } );



    var light = new THREE.AmbientLight( 0x404040 );
    scene.add( light );

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    window.addEventListener('resize', onWindowResize, false);



  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

  var frame = 0;

  function animate() {

    uniforms.amplitude.value = Math.sin(frame);
    frame += 0.1;

    requestAnimationFrame(animate);
    //controls.update();
    //mesh.rotation.x += 0.005;
    //mesh.rotation.y += 0.005;
    renderer.render(scene, camera);
  }

  animate();

  </script>