[TASK] Initial import
This commit is contained in:
commit
940f5da3e9
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>THREE.js Test</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||||
|
<script type="text/javascript" src="three.min.js"></script>
|
||||||
|
<script type="text/javascript" src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,151 @@
|
||||||
|
var cameraDelta = {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
var keyTable = {
|
||||||
|
"Up": {
|
||||||
|
axis: "z",
|
||||||
|
modifier: -2
|
||||||
|
},
|
||||||
|
"Down": {
|
||||||
|
axis: "z",
|
||||||
|
modifier: 2
|
||||||
|
},
|
||||||
|
"Left": {
|
||||||
|
axis: "x",
|
||||||
|
modifier: -2
|
||||||
|
},
|
||||||
|
"Right": {
|
||||||
|
axis: "x",
|
||||||
|
modifier: 2
|
||||||
|
},
|
||||||
|
"PageUp": {
|
||||||
|
axis: "y",
|
||||||
|
modifier: 2
|
||||||
|
},
|
||||||
|
"PageDown": {
|
||||||
|
axis: "y",
|
||||||
|
modifier: -2
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onload = ready;
|
||||||
|
|
||||||
|
function ready() {
|
||||||
|
doAnimation = true;
|
||||||
|
init();
|
||||||
|
registerEventListener();
|
||||||
|
animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
resX = window.innerWidth - 4;
|
||||||
|
resY = window.innerHeight - 4;
|
||||||
|
|
||||||
|
camera = new THREE.PerspectiveCamera(75, resX / resY, 0.1, 20000);
|
||||||
|
camera.position.z = 400;
|
||||||
|
|
||||||
|
scene = new THREE.Scene();
|
||||||
|
|
||||||
|
cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshLambertMaterial({
|
||||||
|
color: 0xCCCC00,
|
||||||
|
wireframe: true
|
||||||
|
}));
|
||||||
|
scene.add(cube);
|
||||||
|
|
||||||
|
cube2 = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x00AAFF,
|
||||||
|
wireframe: false
|
||||||
|
}));
|
||||||
|
scene.add(cube2);
|
||||||
|
|
||||||
|
spotlight = new THREE.SpotLight(0xCCFFCC);
|
||||||
|
spotlight.position.set(100, 150, 200);
|
||||||
|
spotlight.castShadow = true;
|
||||||
|
spotlight.target = new THREE.Object3D(0,0,200);
|
||||||
|
scene.add(spotlight);
|
||||||
|
|
||||||
|
xaxis = new THREE.Mesh(new THREE.CubeGeometry(500, 1, 1), new THREE.MeshBasicMaterial({
|
||||||
|
color: 0xFF0000,
|
||||||
|
wireframe: false
|
||||||
|
}));
|
||||||
|
scene.add(xaxis);
|
||||||
|
|
||||||
|
yaxis = new THREE.Mesh(new THREE.CubeGeometry(1, 500, 1), new THREE.MeshBasicMaterial({
|
||||||
|
color: 0x00FF00,
|
||||||
|
wireframe: false
|
||||||
|
}));
|
||||||
|
scene.add(yaxis);
|
||||||
|
|
||||||
|
zaxis = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 500), new THREE.MeshBasicMaterial({
|
||||||
|
color: 0x0000FF,
|
||||||
|
wireframe: false
|
||||||
|
}));
|
||||||
|
scene.add(zaxis);
|
||||||
|
|
||||||
|
//renderer = new THREE.CanvasRenderer();
|
||||||
|
renderer = new THREE.WebGLRenderer();
|
||||||
|
renderer.setSize(resX, resY);
|
||||||
|
|
||||||
|
document.body.appendChild(renderer.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
if(doAnimation == false) {
|
||||||
|
// request a call for animate before next browser repaint
|
||||||
|
window.requestAnimationFrame(animate);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
camera.position.x += cameraDelta.x;
|
||||||
|
camera.position.y += cameraDelta.y;
|
||||||
|
camera.position.z += cameraDelta.z;
|
||||||
|
//camera.lookAt(new THREE.Vector3(0,0,0));
|
||||||
|
|
||||||
|
cube.rotation.x += 0.01;
|
||||||
|
cube.rotation.y += 0.01;
|
||||||
|
|
||||||
|
cube2.rotation.x -= 0.01;
|
||||||
|
cube2.rotation.y -= 0.01;
|
||||||
|
|
||||||
|
renderer.render(scene, camera);
|
||||||
|
|
||||||
|
// request a call for animate before next browser repaint
|
||||||
|
window.requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerEventListener() {
|
||||||
|
//enable receiving keyboard events
|
||||||
|
renderer.domElement.tabIndex = 1;
|
||||||
|
|
||||||
|
renderer.domElement.onmousedown = processEvent;
|
||||||
|
renderer.domElement.onmouseup = processEvent;
|
||||||
|
renderer.domElement.onmousemove = processEvent;
|
||||||
|
renderer.domElement.onmousewheel = processEvent;
|
||||||
|
renderer.domElement.onkeydown = processEvent;
|
||||||
|
renderer.domElement.onkeyup = processEvent;
|
||||||
|
}
|
||||||
|
|
||||||
|
function processEvent(event) {
|
||||||
|
if(event instanceof MouseEvent) {
|
||||||
|
console.log(["Maus", event.type, event]);
|
||||||
|
} else if(event instanceof KeyboardEvent) {
|
||||||
|
//log and ignore undefined events
|
||||||
|
if(keyTable[event.keyIdentifier] == undefined) {
|
||||||
|
console.log(["Tastatur", event.keyIdentifier, event.type, event]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//apply movement to camera
|
||||||
|
if(event.type == "keydown") {
|
||||||
|
//apply delta on keydown
|
||||||
|
cameraDelta[keyTable[event.keyIdentifier].axis] = keyTable[event.keyIdentifier].modifier;
|
||||||
|
} else if(event.type == "keyup") {
|
||||||
|
//remove delta on keyup
|
||||||
|
cameraDelta[keyTable[event.keyIdentifier].axis] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #555555;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
/*border: 1px solid #FFFFFF;*/
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue