45 lines
1.2 KiB
HTML
45 lines
1.2 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.z = 100;
|
|
|
|
// add a light to the scene
|
|
var light = new THREE.PointLight(0xFFFF00);
|
|
light.position.set(10, 30, 25);
|
|
scene.add(light);
|
|
|
|
// add a cube to the scene
|
|
var geometry = new THREE.BoxGeometry(20, 20, 20);
|
|
var material = new THREE.MeshLambertMaterial({color: 0xfd59d7});
|
|
var cube = new THREE.Mesh(geometry, material);
|
|
scene.add(cube);
|
|
|
|
// 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>
|