Threejs动画问题

时间:2018-03-18 15:57:19

标签: three.js

尝试将STL模型加载到带有Threejs的canavas中,每次运行animate函数时都会给出错误;

未捕获的TypeError:无法读取未定义的属性'render'     在animate(

我知道STL文件之前有用。

这是我的代码;

    // Globals 
var scene, camera, light, renderer;

 init();
 animate();


  // Sets up the scene.
  function init() {

 // Create the scene and set the scene size.
scene = new THREE.Scene();

//Scene Lighting
scene.add( new THREE.AmbientLight( 0x000000 ) );

//Renderer
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('modelCan'), antialias:true});
renderer.setClearColor(0xfffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize( window.innerWidth/3, window.innerHeight/3 );

//Camera
  var camera = new THREE.PerspectiveCamera(1000, window.innerWidth/window.innerHeight, 1, 10000);
  scene.add(camera);
//Camera Lightning
  var light = new THREE.PointLight( 0xffffff, 1);
      camera.add( light );

     var loader = new THREE.STLLoader();
                loader.load( 'Sac_Fuel_Tank.stl', function ( geometry ) {

                    var material = new THREE.MeshLambertMaterial( { color: 0x286617,
                     wireframe: true 

                 } );

                    var mesh = new THREE.Mesh( geometry, material );
                        mesh.rotation.x = Math.PI / 2;
                        mesh.position.set(20,10,-10);
                        //  mesh.rotation.z = Math.PI;
                    scene.add( mesh );


                } );
                controls = new THREE.OrbitControls(camera, renderer.domElement);

}


  function animate() {

 // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
 requestAnimationFrame(animate);

 // Render the scene.
 renderer.render(scene, camera);
 controls.update();

}

那我该怎么办?

1 个答案:

答案 0 :(得分:3)

创建渲染器时,您必须删除var关键字。只是做:

renderer = new THREE.WebGLRenderer( { canvas: document.getElementById('modelCan'), antialias:true } );