图片.png
<pre id="line1"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跳动的小球</title> <script src="[../js/three.js](view-source:https://scqilin.github.io/mycodes/threejs01/js/three.js)"></script> <style> body{
margin: 0;
overflow: hidden;
} </style> </head> <body> <div id="three"></div> <script type="text/javascript"> var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(0,20,40);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor('#CCCCCC');
renderer.shadowMapEnabled = true;
//坐标
var axes = new THREE.AxisHelper(4);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(40,10,1,1);
var planeMaterial = new THREE.MeshLambertMaterial({
color:0x8DCC87
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.position.set(0,0,0);
plane.rotation.x = -0.5*Math.PI;
plane.receiveShadow = true;
scene.add(plane);
var sphereGeometry = new THREE.SphereGeometry(2,20,20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color:0xFF00F7
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.set(-16,2,0);
sphere.castShadow = true;
scene.add(sphere);
var ambientLight = new THREE.AmbientLight('#212121');
scene.add(ambientLight);
var SpotLight = new THREE.SpotLight(0xFFFFFF);
SpotLight.position.set(0,80,0);
SpotLight.castShadow = true;
scene.add(SpotLight);
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
var step = 0;
function run() {
step += 0.04;
sphere.position.x = 16*(Math.sin(step));
sphere.position.y = 2+(8*Math.abs(Math.cos(step)));
console.log(sphere.position.y);
requestAnimationFrame(run);
renderer.render(scene,camera);
}
run() </script> </body> </html></pre>
