Three.js Threejs动画问题
每次运行animate函数时,试图将STL模型加载到带有Threejs的canavas中都会给我一个错误 未捕获的TypeError:无法读取未定义的属性“render” 至少( 我知道STL文件很好,它以前工作过 这是我的密码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
// 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 } );
接得好:)我没注意到。关于
摄影机
和灯光
也一样。只要不使用阻尼
或自动旋转
等功能,就不需要在动画循环中更新轨道控制
。