30 Dec js-07-1
Posted at 20:31h
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 ********
// light
var sunlight = new THREE.DirectionalLight('white', 0.9);
sunlight.position.set(200, 300, 0);
scene.add(sunlight);
//dino body
var dino = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100),
new THREE.MeshPhongMaterial({color:'orange'}));
dino.rotation.set(0, -Math.PI/2, 0);
scene.add(dino);
//dino neck
var neck = new THREE.Mesh(new THREE.CubeGeometry(60, 50, 50),
new THREE.MeshPhongMaterial({color:'orange'}));
neck.position.set(0, 75, -25);
dino.add(neck);
//dino head
var head = new THREE.Mesh(new THREE.CubeGeometry(80, 60, 60),
new THREE.MeshPhongMaterial({color:'orange'}));
head.position.set(0, 95, -35);
dino.add(head);
//dino lower jaw
var lowerJaw = new THREE.Mesh(new THREE.CubeGeometry(80, 10, 40),
new THREE.MeshPhongMaterial({color:'orange'}));
lowerJaw.position.set(0, 70, -85);
dino.add(lowerJaw);
//dino upper jaw
var upperJaw = new THREE.Mesh(new THREE.CubeGeometry(80, 30, 40),
new THREE.MeshPhongMaterial({color:'orange'}));
upperJaw.position.set(0, 110, -85);
dino.add(upperJaw);
//dino butt
var butt = new THREE.Mesh(new THREE.CubeGeometry(80, 60, 80),
new THREE.MeshPhongMaterial({color:'orange'}));
butt.position.set(0, -30, 50);
dino.add(butt);
//dino upper tail
var upperTail = new THREE.Mesh(new THREE.CubeGeometry(40, 30, 60),
new THREE.MeshPhongMaterial({color:'orange'}));
upperTail.position.set(0, -30, 120);
dino.add(upperTail);
//dino lower tail
var lowerTail = new THREE.Mesh(new THREE.CubeGeometry(20, 20, 30),
new THREE.MeshPhongMaterial({color:'orange'}));
lowerTail.position.set(0, -10, 155);
dino.add(lowerTail);
//dino left leg
var leftHip = new THREE.Object3D();
leftHip.position.set(-35, -30, -20);
dino.add(leftHip);
var leftLeg = new THREE.Mesh(new THREE.CubeGeometry(40, 100, 40),
new THREE.MeshPhongMaterial({color:'orange'}));
leftLeg.position.set(0, -40, 0);
leftHip.add(leftLeg);
//dino right leg
var rightHip = new THREE.Object3D();
rightHip.position.set(35, -30, -20);
dino.add(rightHip);
var rightLeg = new THREE.Mesh(new THREE.CubeGeometry(40, 100, 40),
new THREE.MeshPhongMaterial({color:'orange'}));
rightLeg.position.set(0, -40, 0);
rightHip.add(rightLeg);
var hip1;
var hip2;
var hip3;
var hip4;
function makePigAt(x, z){
var pig = new THREE.Object3D();
scene.add(pig);
pig.position.set(x, -65, z);
var body = new THREE.Mesh(new THREE.SphereGeometry(50),
new THREE.MeshPhongMaterial({color: 'pink'}));
body.applyMatrix( new THREE.Matrix4().makeScale( 1.5, 1, 1 ) );
pig.add(body);
var nose = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 20),
new THREE.MeshPhongMaterial({color: 'pink'}));
pig.add(nose);
nose.position.set(-75, -10, 0);
nose.rotation.set(0, 0, Math.PI/2);
var lEye = new THREE.Mesh(new THREE.SphereGeometry(5),
new THREE.MeshPhongMaterial({color: 'black'}));
pig.add(lEye);
lEye.position.set(-60, 10, 20);
var rEye = new THREE.Mesh(new THREE.SphereGeometry(5),
new THREE.MeshPhongMaterial({color: 'black'}));
pig.add(rEye);
rEye.position.set(-60, 10, -20);
var lEar = new THREE.Mesh(new THREE.CylinderGeometry(1, 20 ,35, 3),
new THREE.MeshPhongMaterial({color: 'pink'}));
pig.add(lEar);
lEar.position.set(-40, 35, 35);
lEar.rotation.set(Math.PI/4, -Math.PI/6, 0);
var rEar = new THREE.Mesh(new THREE.CylinderGeometry(1, 20 ,35, 3),
new THREE.MeshPhongMaterial({color: 'pink'}));
pig.add(rEar);
rEar.position.set(-40, 35, -35);
rEar.rotation.set(-Math.PI/4, -Math.PI/6, 0);
hip1 = new THREE.Object3D();
pig.add(hip1);
hip1.position.set(-40, -20, 25);
var leg1 = new THREE.Mesh(new THREE.CylinderGeometry(10, 5 ,40),
new THREE.MeshPhongMaterial({color: 'pink'}));
hip1.add(leg1);
leg1.position.set(0, -20, 0);
hip2 = new THREE.Object3D();
pig.add(hip2);
hip2.position.set(-40, -20, -25);
var leg2 = new THREE.Mesh(new THREE.CylinderGeometry(10, 5 ,40),
new THREE.MeshPhongMaterial({color: 'pink'}));
hip2.add(leg2);
leg2.position.set(0, -20, 0);
hip3 = new THREE.Object3D();
pig.add(hip3);
hip3.position.set(40, -20, -25);
var leg3 = new THREE.Mesh(new THREE.CylinderGeometry(10, 5 ,40),
new THREE.MeshPhongMaterial({color: 'pink'}));
hip3.add(leg3);
leg3.position.set(0, -20, 0);
hip4 = new THREE.Object3D();
pig.add(hip4);
hip4.position.set(40, -20, 25);
var leg4 = new THREE.Mesh(new THREE.CylinderGeometry(10, 5 ,40),
new THREE.MeshPhongMaterial({color: 'pink'}));
hip4.add(leg4);
leg4.position.set(0, -20, 0);
var tail = new THREE.Mesh(new THREE.CylinderGeometry(6, 2, 20),
new THREE.MeshPhongMaterial({color: 'pink'}));
pig.add(tail);
tail.position.set(75, -10, 0);
tail.rotation.set(0, 0, Math.PI/3);
return pig;
}
var pig = makePigAt(800, 0);
// create trees
function makeTreeAt(x, z){
var trunk = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 200),
new THREE.MeshPhongMaterial({color: 'sienna'}));
scene.add(trunk);
trunk.position.x = x;
trunk.position.y = -25;
trunk.position.z = z;
var tt1 = new THREE.Mesh(new THREE.CylinderGeometry(40, 80, 100),
new THREE.MeshPhongMaterial({color: 'forestgreen'}));
trunk.add(tt1);
tt1.position.y = 75;
var tt2 = new THREE.Mesh(new THREE.CylinderGeometry(20, 60, 100),
new THREE.MeshPhongMaterial({color: 'forestgreen'}));
trunk.add(tt2);
tt2.position.y = 175;
var tt3 = new THREE.Mesh(new THREE.CylinderGeometry(1, 40, 100),
new THREE.MeshPhongMaterial({color: 'forestgreen'}));
trunk.add(tt3);
tt3.position.y = 275;
return trunk;
}
var tree = makeTreeAt(500, 0);
// set up camera
camera.position.z = 1000;
camera.position.x = -0;
camera.position.y = -0;
camera.lookAt(dino.position);
// define global variables
var isMovingForward = false;
var isJump = false;
var changeY = 0;
var degree = 0;
var speed = 50;
var degreePig = 0;
var speedPig = 50;
// add keyboard respond
document.addEventListener('keydown', sentKeyDown);
function sentKeyDown(event){
var code = event.code;
if (code == 'KeyW') isMovingForward = true;
if (code == 'Space') isJump = true;
}
document.addEventListener('keyup', sentKeyUp);
function sentKeyUp(event){
var code = event.code;
if (code == 'KeyW') isMovingForward = false;
}
function walk(){
if (!isMovingForward) return;
tree.position.x -= speed;
if (tree.position.x < -1000) tree.position.x = 2000;
dino.rotation.x = Math.sin(degree/2)*0.1;
leftHip.rotation.x = -Math.sin(degree/2);
rightHip.rotation.x = Math.sin(degree/2);
degree ++;
}
function walkpig(){
if (!isMovingForward) pig.position.x -= speedPig/10;
else
tree.position.x -= speed;
if (tree.position.x < -1000) tree.position.x = 2000;
dino.rotation.x = Math.sin(degree/2)*0.1;
leftHip.rotation.x = -Math.sin(degree/2);
rightHip.rotation.x = Math.sin(degree/2);
degree ++;
}
function jump(){
if (isJump == true && dino.position.y == 0){
changeY = 60;
isJump = false;
}
dino.position.y += changeY;
if (dino.position.y > 0){
changeY -= 4;
}
else{
dino.position.y = 0;
isJump = false;
}
}
function animate(){
requestAnimationFrame(animate);
walk();
jump();
renderer.render(scene, camera);
}
animate();
// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
</script>
No Comments