69 lines
2.1 KiB
HTML
69 lines
2.1 KiB
HTML
<html>
|
|
<head>
|
|
|
|
<script src="three.js"></script>
|
|
<script>
|
|
'use strict'
|
|
|
|
function draw() {
|
|
// create renderer attached to HTML Canvas object
|
|
var c = document.getElementById("canvas");
|
|
var renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
|
|
|
|
// create the scenegraph
|
|
var scene = new THREE.Scene();
|
|
|
|
// create a camera
|
|
var fov = 75;
|
|
var aspect = 600/600;
|
|
var near = 0.1;
|
|
var far = 1000;
|
|
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
|
|
camera.position.set(0, 10, 30);
|
|
|
|
// add a light to the scene
|
|
var light = new THREE.PointLight(0xFFFFFF);
|
|
light.position.set(0, 10, 30);
|
|
scene.add(light);
|
|
|
|
// add a cylinder ('hut walls')
|
|
// args: radiusTop, radiusBottom, height, radialSegments
|
|
var walls = new THREE.Mesh(
|
|
new THREE.CylinderBufferGeometry(4, 4, 4, 12),
|
|
new THREE.MeshLambertMaterial({color: 0x800020}) );
|
|
scene.add(walls);
|
|
|
|
// add a cone ('hut roof')
|
|
// args: radius, height, segments
|
|
var roof = new THREE.Mesh(
|
|
new THREE.ConeBufferGeometry(6, 4, 24),
|
|
new THREE.MeshLambertMaterial({color: 0x800080}) );
|
|
///scene.add(roof); // not needed, since roof will be added as a child of walls
|
|
roof.position.set(0, 4, 0);
|
|
|
|
// set the roof as a child of the walls, i.e. nest their coordinate systems
|
|
walls.add(roof);
|
|
|
|
// move the walls.. and their nested roof! (try it with the previous line removed)
|
|
walls.position.set(0,-5,0);
|
|
|
|
// clone the walls object and its children
|
|
// and move the cloned "hut" to a new (random) position
|
|
var hut2 = walls.clone();
|
|
scene.add(hut2);
|
|
var x = (Math.random()-0.5)*15;
|
|
var y = (Math.random()-0.5)*15;
|
|
var z = (Math.random()-0.5)*15;
|
|
hut2.position.set(x,y,z);
|
|
|
|
// render the scene as seen by the camera
|
|
renderer.render(scene, camera);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="draw();">
|
|
<canvas id="canvas" width="600" height="600"></canvas>
|
|
</body>
|
|
</html>
|