<!DOCTYPE html>
<html>
<head>
<title>GLTF Loader Doc</title>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/GLTFLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
var scene, camera, renderer;
var loader;
init();
function init() {
//Renderer
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
//Camera
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.set( 20, 20, 20 );
camera.lookAt( 0, 0, 0 );
//Controls
controls = new THREE.OrbitControls(camera);
//controls.addEventListener('change', renderer); // this causes errors
//Lights
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
/*
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
*/
//Load GlTF File
loader = new THREE.GLTFLoader();
loader.load('Stroke Limiter.gltf', function(gltf){
scene.add(gltf.scene);
});
}
animate();
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
</script>
</body>
</html>