Threejs动画问题

Question

每次运行 animate 函数时，尝试使用 Threejs 将 STL 模型加载到画布中都会给我一个错误；

未捕获的类型错误：无法读取未定义的属性“渲染” 在动画（

我知道 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();

}

那我做错了什么？

Answer 1

您必须在创建渲染器时删除 var 关键字。做吧：

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