21 Dec js-01
Posted at 20:34h
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 ********
// ball
var shape = new THREE.SphereGeometry(100,100,100);
var cover = new THREE.MeshNormalMaterial(flat);
var ball = new THREE.Mesh(shape, cover);
scene.add(ball);
ball.position.set(-250, 250, -250); //x, y, z
// box
var shape = new THREE.CubeGeometry(100,100,100);
var cover = new THREE.MeshNormalMaterial(flat);
var box = new THREE.Mesh(shape, cover);
scene.add(box);
box.rotation.set(0.5, 0.5, 0);
box.position.set(-250, -250, -250);
// cylinder
var shape = new THREE.CylinderGeometry(1, 100, 100, 4);
var cover = new THREE.MeshNormalMaterial(flat);
var tube = new THREE.Mesh(shape, cover);
scene.add(tube);
tube.rotation.set(0.5, 0, 0);
tube.position.set(250, -250, -250);
// donuts
var shape = new THREE.TorusGeometry(100, 50, 20, 20);
var cover = new THREE.MeshNormalMaterial(flat);
var donut = new THREE.Mesh(shape, cover);
scene.add(donut);
donut.rotation.set(-0.5, 0, 0);
donut.position.set(250, 250, -250);
var clock = new THREE.Clock();
function animate()
{
requestAnimationFrame(animate);
var t = clock.getElapsedTime();
box.rotation.set(t, 20*t, t);
donut.rotation.set(5*t, 0, 0);
renderer.render(scene, camera);
}
animate();
// Now, show what the camera sees on the screen:
</script>
Sorry, the comment form is closed at this time.