29 Dec js-06-2
Posted at 20:42h
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*3/4, 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);
// define global variables
var isMovingForward = false;
var degree = 0;
// add keyboard respond
document.addEventListener('keydown', sentKeyDown);
function sentKeyDown(event){
var code = event.code;
if (code == 'KeyW') isMovingForward = true;
}
function walk(){
if (!isMovingForward) return;
leftHip.rotation.x = -Math.sin(degree/10);
rightHip.rotation.x = Math.sin(degree/10);
degree ++;
}
function animate(){
requestAnimationFrame(animate);
walk();
renderer.render(scene, camera);
}
animate();
// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
</script>
No Comments