|
@@ -57,15 +57,15 @@
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
|
|
//
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 2000000 );
|
|
|
- camera.position.set( -3, 0.4, -18 );
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 2000000 );
|
|
|
+ camera.position.set( 0, 0, 7 );
|
|
|
camera.updateProjectionMatrix();
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
//
|
|
|
|
|
|
- //scene.add( new THREE.AmbientLight( 0x444444 ) );
|
|
|
+ scene.add( new THREE.AmbientLight( 0x999999 ) );
|
|
|
|
|
|
// var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
|
|
|
// light1.position.set( 1, 1, 1 );
|
|
@@ -185,15 +185,16 @@
|
|
|
"b":{type:'f',value:null},
|
|
|
"tex":{type:'t',value:null}
|
|
|
},
|
|
|
- vertexShader: [
|
|
|
- "precision highp float;",
|
|
|
- "varying vec2 tc;",
|
|
|
- "attribute vec4 p;",
|
|
|
- "void main(){",
|
|
|
- " gl_Position=p;",
|
|
|
- " tc=vec2(0.5,0.5/8.0)*p.xy+vec2(0.5,6.5/8.0);",
|
|
|
- "}"
|
|
|
- ].join( "\n" ),
|
|
|
+ vertexShader: `
|
|
|
+ precision highp float;
|
|
|
+ varying vec2 tc;
|
|
|
+ attribute vec4 p;
|
|
|
+ void main(){
|
|
|
+ gl_Position=p;
|
|
|
+ tc=vec2(0.5,0.5/8.0)*p.xy+vec2(0.5,6.5/8.0);
|
|
|
+ }
|
|
|
+ `
|
|
|
+ ,
|
|
|
fragmentShader: [
|
|
|
"precision highp float;",
|
|
|
"varying vec2 tc;",
|
|
@@ -204,28 +205,27 @@
|
|
|
" gl_FragColor.xyz=s.xyz*(b*s.w);",
|
|
|
"}"
|
|
|
].join( "\n" )
|
|
|
- };
|
|
|
-
|
|
|
- var positions = new Float32Array([-1, -1, 0.5, 1, 3, -1, 0.5, 1, -1, 3, 0.5, 1]);
|
|
|
-
|
|
|
- var geometry = new THREE.BufferGeometry();
|
|
|
- geometry.addAttribute( 'p', new THREE.BufferAttribute( positions, 3 ) );
|
|
|
-
|
|
|
- geometry.computeBoundingSphere();
|
|
|
+ };
|
|
|
+
|
|
|
+ var material;
|
|
|
+ var positions = new Float32Array([-1, -1, 0.5, 1, 3, -1, 0.5, 1, -1, 3, 0.5, 1]);
|
|
|
+ var geometry = new THREE.BufferGeometry();
|
|
|
+ geometry.addAttribute( 'p', new THREE.BufferAttribute( positions, 3 ) );
|
|
|
+ geometry.computeBoundingSphere();
|
|
|
|
|
|
new THREE.TextureLoader().load( 'textures/sky.png', function ( texture ) {
|
|
|
- this.material = new THREE.RawShaderMaterial( {
|
|
|
+ material = new THREE.RawShaderMaterial( {
|
|
|
uniforms: shader.uniforms,
|
|
|
vertexShader: shader.vertexShader,
|
|
|
fragmentShader: shader.fragmentShader
|
|
|
} );
|
|
|
|
|
|
- this.material.uniforms.b.value = 7 * Math.sqrt(0.488874);
|
|
|
- this.material.uniforms.tex.value = texture;
|
|
|
- mesh = new THREE.Mesh( geometry, this.material );
|
|
|
+ material.uniforms.b.value = 7 * Math.sqrt(0.488874);
|
|
|
+ material.uniforms.tex.value = texture;
|
|
|
+ mesh = new THREE.Mesh( geometry, material );
|
|
|
scene.add( mesh );
|
|
|
|
|
|
- }.bind(this));
|
|
|
+ }.bind(this));
|
|
|
|
|
|
// this.material = new RawShaderMaterial( {
|
|
|
// uniforms: shader.uniforms,
|
|
@@ -237,18 +237,24 @@
|
|
|
//this.material.uniforms.b.value = 7 * Math.sqrt(0.488874);//7 * Math.sqrt(this.backgroundBrightness))
|
|
|
//
|
|
|
var texture1 = new THREE.TextureLoader().load( 'textures/crate.gif' );
|
|
|
- var geometry1 = new THREE.BoxBufferGeometry( 200, 200, 200 );
|
|
|
- var material1 = new THREE.MeshBasicMaterial( { map: texture1 } );
|
|
|
+ var geometry1 = new THREE.BoxBufferGeometry( .1, .1,.1 );
|
|
|
+ var material1 = new THREE.MeshBasicMaterial( { } );
|
|
|
|
|
|
mesh1 = new THREE.Mesh( geometry1, material1 );
|
|
|
scene.add( mesh1 );
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
+ controls.addEventListener( 'change', render );
|
|
|
+ controls.target.set( 0, 0, 0 );
|
|
|
+ controls.update();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
stats = new Stats();
|
|
|
container.appendChild( stats.dom );
|
|
@@ -270,9 +276,13 @@
|
|
|
function animate() {
|
|
|
requestAnimationFrame( animate );
|
|
|
renderer.render( scene, camera );
|
|
|
- controls.update();
|
|
|
+
|
|
|
}
|
|
|
+ function render() {
|
|
|
+
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
</body>
|