23 Dec js-03
Posted at 20:38h
in
code
by admin
<body></body>
<script src="/three.js"></script>
<script>
// The "scene" is where stuff in our game will happen:
var scene = new THREE.Scene();
var flat = {flatShading: true};
var light = new THREE.AmbientLight('white', 0.8);
scene.add(light);
// The "camera" is what sees the stuff:
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
camera.position.z = 500;
scene.add(camera);
// The "renderer" draws what the camera sees onto the screen:
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// ******** START CODING ON THE NEXT LINE ********
var banana = new THREE.Mesh(new THREE.CubeGeometry(100,150,60),
new THREE.MeshNormalMaterial(flat));
scene.add(banana);
var head = new THREE.Mesh(new THREE.CubeGeometry(120,100,120),
new THREE.MeshNormalMaterial(flat));
banana.add(head);
head.position.set(0,125,0);
// left arm
var leftShoulder = new THREE.Object3D();
leftShoulder.position.set(-75, 65, 0);
banana.add(leftShoulder);
var leftArm = new THREE.Mesh(new THREE.CubeGeometry(50,150,50),
new THREE.MeshNormalMaterial(flat));
leftShoulder.add(leftArm);
leftArm.position.set(0,-65,0);
// right arm
var rightShoulder = new THREE.Object3D();
rightShoulder.position.set(75, 65, 0);
banana.add(rightShoulder);
var rightArm = new THREE.Mesh(new THREE.CubeGeometry(50,150,50),
new THREE.MeshNormalMaterial(flat));
rightShoulder.add(rightArm);
rightArm.position.set(0,-65,0);
// left leg
var leftHip = new THREE.Object3D();
leftHip.position.set(-25, -85, 0);
banana.add(leftHip);
var leftLeg = new THREE.Mesh(new THREE.CubeGeometry(50,150,50),
new THREE.MeshNormalMaterial(flat));
leftHip.add(leftLeg);
leftLeg.position.set(0,-65,0);
// right leg
var rightHip = new THREE.Object3D();
rightHip.position.set(25, -85, 0);
banana.add(rightHip);
var rightLeg= new THREE.Mesh(new THREE.CubeGeometry(50,150,50),
new THREE.MeshNormalMaterial(flat));
rightHip.add(rightLeg);
rightLeg.position.set(0,-65,0);
var sunlight = new THREE.DirectionalLight('white', 0.9);
sunlight.position.set(200, 300, 0);
sunlight.castShadow = true;
scene.add(sunlight);
// create trees
var trunk = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 200),
new THREE.MeshPhongMaterial({color: 'sienna'}));
scene.add(trunk);
trunk.position.x = -500;
var tt1 = new THREE.Mesh(new THREE.CylinderGeometry(40, 80, 100),
new THREE.MeshPhongMaterial({color: 'forestgreen'}));
scene.add(tt1);
tt1.position.x = -500;
tt1.position.y = 75;
var tt2 = new THREE.Mesh(new THREE.CylinderGeometry(20, 60, 100),
new THREE.MeshPhongMaterial({color: 'forestgreen'}));
scene.add(tt2);
tt2.position.x = -500;
tt2.position.y = 175;
var tt3 = new THREE.Mesh(new THREE.CylinderGeometry(1, 40, 100),
new THREE.MeshPhongMaterial({color: 'forestgreen'}));
scene.add(tt3);
tt3.position.x = -500;
tt3.position.y = 275;
document.addEventListener('keydown', sendKeyDown);
var isSpin = false;
function sendKeyDown(event){
var code = event.code;
if (code == 'ArrowLeft') banana.position.x -= 5;
if (code == 'ArrowRight') banana.position.x += 5;
if (code == 'ArrowDown') banana.position.z += 5;
if (code == 'ArrowUp') banana.position.z -= 5;
if (code == 'KeyS') isSpin = !isSpin;
}
function animate(){
requestAnimationFrame(animate);
if (isSpin == true){
banana.rotation.y = banana.rotation.y + 0.05;
leftShoulder.rotation.x = leftShoulder.rotation.x + 0.01;
rightShoulder.rotation.x = rightShoulder.rotation.x - 10;
head.rotation.y = head.rotation.y + 5;
}
renderer.render(scene, camera);
}
animate();
// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
</script>
No Comments