javascript - 无法将动画置换着色器与 OBJ 加载器一起使用(TypeError : mesh is undefined)

标签 javascript three.js shader objloader

我正在尝试在 OBJ 对象上放置一个带有动画位移的基本着色器。着色器在 CubeBufferGeometry 上工作正常,但我无法让它与 OBJLoader 一起工作。

            // OBJ Loader
            var loader = new THREE.OBJLoader();
            loader.load( "obj/statue.obj", function ( group ) {
                geometry = group.children[ 0 ].geometry;
                geometry.attributes.uv2 = geometry.attributes.uv;
                geometry.center();

                mesh = new THREE.Mesh( geometry, material );
                mesh.scale.multiplyScalar( 15 );
                mesh.position.y = -700;

                mesh.traverse( function( node ) {
                    if( node.material ) {
                    node.material.side = THREE.DoubleSide;
                    }
                }); 
                mesh.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                    child.geometry.computeFaceNormals();
                    }
                });

                scene.add( mesh );

                // Vertex Displacement
                vertexDisplacement = new Float32Array(geometry.attributes.position.count);
                    for (var i = 0; i < vertexDisplacement.length; i += 1){
                        vertexDisplacement[i] = Math.sin(i);
                }

                geometry.addAttribute('vertexDisplacement', new THREE.BufferAttribute(vertexDisplacement, 1));


            } );

但是,在我的渲染/动画函数中,我的网格变量未定义(我已经将 var mesh 作为全局变量)。我认为这是因为我的网格也在 OBJLoader 函数中定义?

我得到:'TypeError: mesh is undefined'

这是我的渲染/动画功能:

        var delta = 0;
        function animate() {

            requestAnimationFrame( animate );

            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;

            delta +=0.1;

            mesh.material.uniforms.delta.value = 0.5 + Math.sin(delta) * 0.5;

            for (var i = 0; i < vertexDisplacement.length; i += 1) {
                vertexDisplacement[i] = 0.5 + Math.sin(i * delta) * 0.25;
            }
            mesh.geometry.attributes.vertexDisplacement.needsUpdate = true;


            renderer.render( scene, camera );

        }

最佳答案

您需要设置网格变量。

尝试访问未设置的声明全局变量将导致undefined

var mesh;
console.log(mesh);
// undefined
mesh = function(){};
console.log(mesh);
// function(){}

关于javascript - 无法将动画置换着色器与 OBJ 加载器一起使用(TypeError : mesh is undefined),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45226138/

相关文章:

javascript - 使用 native JavaScript 触发 jQuery 实时事件

javascript - 如何避免在 IE 上加载特定的 javascript 库?

three.js - 导入 Zip 文件

java - 手机无法编译shader

javascript - 如何使用 Javascript 而不是 JQuery 获取选定的选项 ID

javascript - Three.js – 创建半个环并为其设置动画

graphics - 将任意 2D 多边形投影到 3D 三角形网格上的最佳方法?

android - OpenGL ES 2.0 指定位置属性 vec3 或 vec4

ipad - 顶点着色器中的纹理查找在 iPad 设备和 iPad 模拟器上的行为不同 - OpenGL ES 2.0

javascript - cometd 背景架构