我是三个 js 和 webgl 的新手。我正在构建一个复杂的太阳系,在我想要制作任何动画之前,一切都运行良好。这是一个非常精简的版本来显示问题(太阳处于低分辨率)。如果我添加行 sun.rotate.y += 1;它根本不会加载或运行任何东西。我环顾四周,但不明白为什么。我确信我错过了一些愚蠢的事情。感谢您的帮助。
<script>
// SETUP SCENE
var camera, controls, scene, renderer;
var container
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 90000 );
camera.position.z = 100;
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = .2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = true;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
// ADD THE SUN PHYSICAL LOCATION
var geometry = new THREE.SphereGeometry(5, 3, 3, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshBasicMaterial({color: "Yellow"});
var sun = new THREE.Mesh(geometry, material);
scene.add(sun);
//RENDER
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
render();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
sun.rotate.y +=1; // Problem animating?
renderer.render( scene, camera );
}
</script>
最佳答案
您需要将 sun
定义为全局变量,因为目前它在 render()
作用域中不可见。
此外,我认为要旋转网格,您可以调用“rotateX()、rotateY() 或rotateZ()”,因此它是sun.rotateY(0.01)
编辑:我意识到您可以通过修改其rotation
而不是其rotate
属性来旋转网格。
关于javascript - 三个JS动画屏幕空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40335843/