-
Notifications
You must be signed in to change notification settings - Fork 0
/
test3.html
101 lines (77 loc) · 2.95 KB
/
test3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>
<head>
<title>My first Three.js app</title>
<style>
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div id="mousetop"></div>
<div id="mouseleft"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(SCREEN_WIDTH / -2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / -2, 0, 1600);
scene.add(camera);
camera.position.z = 1500;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// add hemisphere light
var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
hemiLight.color.setHSL(0.6, 1, 0.6);
hemiLight.groundColor.setHSL(0.095, 1, 0.75);
hemiLight.position.set(200, 400, -200);
this.scene.add(hemiLight);
//
dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.color.setHSL(0.1, 1, 0.95);
dirLight.position.set(-1, 1.75, 1);
dirLight.position.multiplyScalar(50);
scene.add(dirLight);
dirLight.castShadow = true;
dirLight.shadowMapWidth = 2048;
dirLight.shadowMapHeight = 2048;
var d = 50;
dirLight.shadowCameraLeft = -d;
dirLight.shadowCameraRight = d;
dirLight.shadowCameraTop = d;
dirLight.shadowCameraBottom = -d;
dirLight.shadowCameraFar = 3500;
dirLight.shadowBias = -0.0001;
dirLight.shadowDarkness = 0.35;
//dirLight.shadowCameraVisible = true;
var geometry = new THREE.BoxGeometry(150, 150, 150, 10, 10, 10);
// material
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('pythie.png')
});
window.addEventListener('resize', onWindowResize, false);
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function render() {
requestAnimationFrame(render);
window.onmousemove = function (event) {
ev = event || window.event;
document.getElementById("mousetop").innerHTML = ev.pageY + "px";
document.getElementById("mouseleft").innerHTML = ev.pageX + "px";
}
cube.rotation.x += 0.01 * ev.pageX / 100;
cube.rotation.y += 0.01 * ev.pageY / 100;
renderer.render(scene, camera);
};
render();
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
</script>
</body>
</html>