42 lines
1.1 KiB
HTML
42 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>My first Three.js app</title>
|
|
<style>
|
|
body { margin: 0; }
|
|
canvas { width: 100%; height: 100% }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="js/three.min.js"></script>
|
|
<script>
|
|
var scene = new THREE.Scene();
|
|
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
var renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
var geometry = new THREE.BoxGeometry(1, 1, 1);
|
|
var material = new THREE.MeshLambertMaterial({color: 0x00FF00 });
|
|
var cube = new THREE.Mesh(geometry, material);
|
|
scene.add(cube);
|
|
var point_light = new THREE.PointLight(0xFFFFFF);
|
|
point_light.position.x = 1;
|
|
point_light.position.y = 2;
|
|
point_light.position.z = 5;
|
|
scene.add(point_light);
|
|
camera.position.z = 5;
|
|
|
|
function render()
|
|
{
|
|
requestAnimationFrame(render);
|
|
cube.rotation.x += 0.01;
|
|
cube.rotation.y += 0.01;
|
|
renderer.render(scene, camera);
|
|
}
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|