<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程045 - 在平面上创建来回跳动的球体</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
myRenderer.shadowMapEnabled = true;
$("#myContainer").append(myRenderer.domElement);
var myScene = new THREE.Scene();
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
myCamera.position.set(64.7, 15.1, 17.8);
myCamera.lookAt(myScene.position);
var mySpotLight = new THREE.SpotLight(0xffffff);
mySpotLight.position.set(-40, 40, -15);
mySpotLight.castShadow = true;
mySpotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
mySpotLight.shadow.camera.far = 130;
mySpotLight.shadow.camera.near = 40;
myScene.add(mySpotLight);
myScene.add(new THREE.AmbientLight(0x353535));
//在场景中绘制XYZ坐标轴的轴线(红线是X轴，绿线是Y轴，蓝线是Z轴)
myScene.add(new THREE.AxesHelper(120));
//在场景中绘制网格线
myScene.add(new THREE.GridHelper(100, 30, 0x2C2C2C, 0x888888));
//创建平面
var myPlaneGeometry = new THREE.PlaneGeometry(60, 100, 1, 1);
var myPlaneMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
var myPlaneMesh = new THREE.Mesh(myPlaneGeometry, myPlaneMaterial);
myPlaneMesh.rotation.x = -0.5 * Math.PI;
myPlaneMesh.position.x = 26;
myPlaneMesh.position.y = 0;
myPlaneMesh.position.z = 0;
myPlaneMesh.receiveShadow = true;
myScene.add(myPlaneMesh);
//创建球体
var mySphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var mySphereMaterial = new THREE.MeshLambertMaterial({ color: 'red' });
var mySphereMesh = new THREE.Mesh(mySphereGeometry, mySphereMaterial);
mySphereMesh.position.x = 20;
mySphereMesh.position.y = 4;
mySphereMesh.position.z = 2;
mySphereMesh.castShadow = true;
myScene.add(mySphereMesh);
//渲染球体在平面上的弹跳动画
animate();
var step = 0;
function animate() {
step += 0.05;
mySphereMesh.position.x = 20 + (10 * Math.cos(step));
mySphereMesh.position.y = 2 + (10 * Math.abs(Math.sin(step)));
requestAnimationFrame(animate);
myRenderer.render(myScene, myCamera);
}
</script>
</body>
</html>
