62 lines
1.8 KiB
HTML
62 lines
1.8 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);
|
|
|
|
// "fuselage"
|
|
// args: radius, widthSegments, heightSegments
|
|
var fuselage = new THREE.Mesh(
|
|
new THREE.SphereBufferGeometry(7,12,8),
|
|
new THREE.MeshLambertMaterial({color: 0xAAAAAA}) );
|
|
scene.add(fuselage);
|
|
fuselage.scale.set(2, 0.2, 0.5);
|
|
|
|
// "wing"
|
|
// args: radiusTop, radiusBottom, height, radialSegments
|
|
var wing = new THREE.Mesh(
|
|
new THREE.CylinderBufferGeometry(4, 4, 1, 60),
|
|
new THREE.MeshLambertMaterial({color: 0xAAAAAA}) );
|
|
scene.add(wing);
|
|
wing.scale.set(0.5, 0.2, 3);
|
|
|
|
// use a scaled coordinate system to modify clones of the fuselage and wing
|
|
var scaledGroup = new THREE.Object3D();
|
|
scaledGroup.add(fuselage.clone());
|
|
scaledGroup.add(wing.clone());
|
|
scaledGroup.scale.set(0.25, 1.5, 0.75);
|
|
scene.add(scaledGroup);
|
|
|
|
// 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>
|