解决未定义错误更新的问题

时间:2018-09-10 22:40:01

标签: javascript three.js

我正在为一个网站创建一个页面,该页面将在3D模型旁边显示文本,因此我一直在探索threejs作为将我带到那里的一种方式。 我一直在努力解决此错误:

Uncaught TypeError: Cannot read property 'update' of undefined

它指出了我的js中的此函数的问题。更新即将结束。我没有在线发布该页面,但是尽管出现了该错误,但它似乎在本地运行良好。这里的主要菜鸟,所以对您有帮助。谢谢。

//DIV3
function RenderDiv3(canvas) {
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById(canvas), antialias: true }),
    clock = new THREE.Clock(),
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.25, 2000 ),
    //controls = new THREE.OrbitControls( camera ),
    scene = new THREE.Scene(),
    light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
    geometry = new THREE.BoxGeometry(100,100,100,10,10,10),
    material = new THREE.PointsMaterial({ size: 6, color: 0x000000 });// this material will alow color, the parameter sets the solor of the object

var  mixer ;


//Renderer
        renderer.setClearColor(0xc9d5e8);

        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);

//CAMERA
        camera.position.set( 0, 0, 10 );


//LIGHT
        light.position.set( 0, 1, 0 );
        scene.add( light );

//MODEL
        const loader = new THREE.GLTFLoader();
            loader.load( '../models/gltf/Face_02.gltf', function( gltf ){

                 scene.add( gltf.scene );
                 mixer = new THREE.AnimationMixer(gltf.scene);  
                 mixer.clipAction(gltf.animations[0]).play();
            } );      

//WINDOW RESIZE FUNCTION 
        window.addEventListener("resize", onWindowResize);
        function onWindowResize() {

            camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
        };

//Mesh
        let mesh = new THREE.Points(geometry, material);
        mesh.position.set(0, 0, 100);
        scene.add(mesh);


//Animate
        renderer.render( scene, camera );
        window.requestAnimationFrame( animate );
        function animate() {
            window.requestAnimationFrame( animate );

            render();      
        };

        function render(){
            var delta = clock.getDelta();
            mixer.update(delta);
            renderer.render( scene, camera );
        };
};

0 个答案:

没有答案