-
Notifications
You must be signed in to change notification settings - Fork 333
/
basic-scene.html
142 lines (115 loc) · 3.19 KB
/
basic-scene.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Hello, world!</title>
<!-- include three.js library -->
<script src='js/three.js'></script>
</head>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<!--
Example created by Lee Stemkoski: https://github.com/stemkoski
-->
<!-- ---------------- Custom Shader Code ------------------------ -->
<script id="vertexShader" type="x-shader/x-vertex">
uniform float time;
varying vec2 textureUV;
void main()
{
textureUV = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
uniform float time;
uniform sampler2D baseTexture;
varying vec2 textureUV;
void main()
{
gl_FragColor = texture2D( baseTexture, textureUV );
}
</script>
<!-- ----------------------------------------------------------- -->
<script>
var scene, camera, renderer, clock, deltaTime, totalTime;
var mesh, shaderMaterial;
initialize();
animate();
function initialize()
{
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0, 2, 4);
camera.lookAt( scene.position );
scene.add( camera );
let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
scene.add( ambientLight );
// let pointLight = new THREE.PointLight();
// camera.add( pointLight );
renderer = new THREE.WebGLRenderer({
antialias : true,
alpha: false
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
clock = new THREE.Clock();
deltaTime = 0;
totalTime = 0;
let geometry = new THREE.BoxGeometry(1,1,1);
let loader = new THREE.TextureLoader();
let texture = loader.load( 'images/color-grid.png', render );
/*
// Basic, unlit material
let basicMaterial = new THREE.MeshBasicMaterial({
color: 0x0000ff,
wireframe: false,
});
*/
// Basic, lit material
let material = new THREE.MeshLambertMaterial({
map: texture
});
/*
// Shader-based material
let shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
time: { value: 1.0 },
baseTexture: { value: texture }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});
*/
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
function update()
{
mesh.rotation.y += 0.01;
// shaderMaterial.uniforms.time.value += deltaTime;
}
function render()
{
renderer.render( scene, camera );
}
function animate()
{
requestAnimationFrame(animate);
deltaTime = clock.getDelta();
totalTime += deltaTime;
update();
render();
}
function onWindowResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
</body>
</html>