27 Dec js-04-1
Posted at 20:36h
in
code
by admin
<body></body>
<script src="/three.js"></script>
<script src="/controls/FlyControls.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 bodyShape = new THREE.CubeGeometry(30,50,30);
var cover = new THREE.MeshNormalMaterial('flat');
var body = new THREE.Mesh(bodyShape, cover);
//body.add(camera);
camera.add(body);
body.rotation.set(-Math.PI/2, 0,0);
body.position.set(0, -200,-500);
var headShape = new THREE.CylinderGeometry(5,21,150, 4);
var head = new THREE.Mesh(headShape, cover);
body.add(head);
head.rotation.set(0,Math.PI/4, 0);
head.position.set(0,100,0);
var wingShape = new THREE.CylinderGeometry(10,15,100,2);
var w1 = new THREE.Mesh(wingShape, cover);
body.add(w1);
var wendShape = new THREE.CylinderGeometry(3,3,50);
var wend1 = new THREE.Mesh(wendShape, cover);
w1.add(wend1);
wend1.position.set(0,50,-20);
wend1.rotation.set(Math.PI/2, 0, 0);
w1.rotation.set(Math.PI/2, 0, Math.PI/3);
w1.position.set(-58,0,30);
var w2 = new THREE.Mesh(wingShape, cover);
body.add(w2);
var wend2 = new THREE.Mesh(wendShape, cover);
w2.add(wend2);
wend2.position.set(0,50,-20);
wend2.rotation.set(Math.PI/2, 0, 0);
w2.rotation.set(Math.PI/2, 0, -Math.PI/3);
w2.position.set(58,0,30);
var w3 = new THREE.Mesh(wingShape, cover);
body.add(w3);
var wend3 = new THREE.Mesh(wendShape, cover);
w3.add(wend3);
wend3.position.set(0,50,20);
wend3.rotation.set(Math.PI/2, 0, 0);
w3.rotation.set(-Math.PI/2, 0, Math.PI/3);
w3.position.set(-58,0,-30);
var w4 = new THREE.Mesh(wingShape, cover);
body.add(w4);
var wend4 = new THREE.Mesh(wendShape, cover);
w4.add(wend4);
wend4.position.set(0,50,20);
wend4.rotation.set(Math.PI/2, 0, 0);
w4.rotation.set(-Math.PI/2, 0, -Math.PI/3);
w4.position.set(58,0,-30);
var sunlight = new THREE.DirectionalLight('white', 0.9);
sunlight.position.set(200,300,0);
scene.add(sunlight);
function r(max){
if (max) return max * Math.random();
return Math.random();
}
function rColor(){
return new THREE.Color(r(), r(), r());
}
function makePlanet(){
var size = r(50);
var x = r(40000)-20000;
var y = r(40000)-20000;
var z = r(40000)-40000;
var c = rColor();
// var c = new THREE.Color(0.6, 0.8, 1);
var planet = new THREE.Mesh(new THREE.SphereGeometry(size),
new THREE.MeshPhongMaterial({color: c}));
scene.add(planet);
planet.position.set(x, y, z);
}
for (var i=0; i<2000; i++){
makePlanet();
}
var controls = new THREE.FlyControls(camera);
controls.movementSpeed = 1000;
controls.rollSpeed = 0.4;
controls.autoForward = true;
var clock = new THREE.Clock();
function animate(){
var delta = clock.getDelta();
controls.update(delta);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
</script>
No Comments