58 lines
1.7 KiB
HTML
58 lines
1.7 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
|
|
// args: radiusTop, radiusBottom, height, radialSegments
|
|
var cyl = new THREE.Mesh(
|
|
new THREE.CylinderBufferGeometry(1, 1, 10, 12),
|
|
new THREE.MeshLambertMaterial({color: 0xAAAAAA}) );
|
|
scene.add(cyl);
|
|
|
|
// clone the cylinder
|
|
var cyl2 = cyl.clone();
|
|
|
|
// modify its rotation by 60 degrees around its z axis
|
|
cyl2.rotateOnAxis(new THREE.Vector3(0,0,1), Math.PI/3);
|
|
scene.add(cyl2);
|
|
// clone the cylinder again
|
|
var cyl3 = cyl.clone();
|
|
scene.add(cyl3);
|
|
// set its rotation directly using "Euler angles", to 120 degrees on z axis
|
|
cyl3.rotation.set(0,0,2*Math.PI/3);
|
|
|
|
// 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>
|