Three.js Threejs动画问题

Three.js Threejs动画问题,three.js,Three.js,每次运行animate函数时,试图将STL模型加载到带有Threejs的canavas中都会给我一个错误 未捕获的TypeError:无法读取未定义的属性“render” 至少( 我知道STL文件很好,它以前工作过 这是我的密码 // Globals var scene, camera, light, renderer; init(); animate(); // Sets up the scene. function init() { // Create the

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

未捕获的TypeError:无法读取未定义的属性“render” 至少(

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

}

那么我做错了什么呢?

在创建渲染器时,必须删除
var
关键字。只需执行以下操作:

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

接得好:)我没注意到。关于
摄影机
灯光
也一样。只要不使用
阻尼
自动旋转
等功能,就不需要在动画循环中更新
轨道控制