TORONTO KIDS COMPUTER CLUB | js-01
20156
post-template-default,single,single-post,postid-20156,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-7.6.2,wpb-js-composer js-comp-ver-6.8.0,vc_responsive

js-01

21 Dec js-01

<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>
No Comments

Sorry, the comment form is closed at this time.