Here is the code from my firstpage.js file:
$(function(){
/* initializing variables */
var scene, camera, renderer;
var spotLight, hemi;
var SCREEN_WIDTH, SCREEN_HEIGHT;
var mouse
var loader, model, animation;
var objects = [];
function init(){
/* creating scene and renderer */
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, .1, 1000);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(0xEBE0FF);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled= true;
renderer.shadowMapSoft = false;
camera.position.x = -2;
camera.position.y = 2;
camera.position.z = -9;
camera.lookAt(scene.position);
//hemi light
hemi = new THREE.HemisphereLight(0xbbbbbb, 0x660066);
scene.add(hemi);
/* adding spot light with starting parameters*/
spotLight = new THREE.SpotLight(0xffffff);
spotLight.castShadow = true;
spotLight.position.set (20, 35, 40);
scene.add(spotLight);
//load blender scene
var loader = new THREE.ObjectLoader();
loader.load("test.json",function ( obj ) {
scene.add( obj );
scene.traverse(function(children){
objects.push(children);
});
});
$("#webGL-container").append(renderer.domElement);
}
function render() {
scene.rotation.y += .005;
}
function animate(){
requestAnimationFrame(animate);
render();
renderer.render(scene, camera);
}
init();
animate();
$(window).resize(function(){
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
});
});
And here is the content of my firstpage.html file:
<HTML>
<title> Demo Page</title>
<body>
<div id ="webGL-container" style="z-index:-9;"></div>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<script type="text/javascript" src="three.min.js"></script>
<script type ="text/javascript" src="firstpage.js"></script>
</body>
</html>
I want to make each model a hyperlink that redirects to a new page. The test.json file contains four different characters.