mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-21 19:05:57 +10:00
alteredq
255c042b1e
This allows to work around ANGLE antialiasing issue appearing when compositing WebGL framebuffer with transparent background color with HTML canvas element background (while keeping antialiasing on).
WebGLRenderer constructor now takes JSON object with few optional parameters:
renderer = new THREE.WebGLRenderer { scene: scene,
antialias: true,
clearColor: 0x000000,
clearAlpha: 0 };
Here is how to change clear color in runtime:
renderer.setClearColor( 0xff0000, 1 );
170 lines
4.3 KiB
HTML
170 lines
4.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - webgl fresnel</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background:#fff;
|
|
padding:0;
|
|
margin:0;
|
|
font-weight: bold;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
color: #ffffff;
|
|
padding: 5px;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
z-index:1000;
|
|
}
|
|
|
|
a {
|
|
color: #ffffff;
|
|
}
|
|
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<pre id="log"></pre>
|
|
|
|
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube Fresnel shader demo. texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a> </div>
|
|
|
|
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<!--
|
|
-->
|
|
|
|
<script type="text/javascript">
|
|
|
|
var statsEnabled = true;
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, webglRenderer;
|
|
var cameraCube, sceneCube;
|
|
|
|
var mesh, zmesh, lightMesh, geometry;
|
|
|
|
var directionalLight, pointLight;
|
|
|
|
var mouseX = 0;
|
|
var mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
init();
|
|
setInterval( loop, 1000 / 60 );
|
|
|
|
function init() {
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
|
|
camera.position.z = 3200;
|
|
|
|
cameraCube = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
|
|
|
|
scene = new THREE.Scene();
|
|
sceneCube = new THREE.Scene();
|
|
|
|
var geometry = new Sphere( 100, 32, 16 );
|
|
|
|
var path = "textures/cube/Park2/";
|
|
var format = '.jpg';
|
|
var urls = [
|
|
path + 'posx' + format, path + 'negx' + format,
|
|
path + 'posy' + format, path + 'negy' + format,
|
|
path + 'posz' + format, path + 'negz' + format
|
|
];
|
|
|
|
|
|
var images = ImageUtils.loadArray( urls );
|
|
var textureCube = new THREE.Texture( images );
|
|
|
|
var fragment_shader = ShaderUtils.lib["fresnel"].fragment_shader;
|
|
var vertex_shader = ShaderUtils.lib["fresnel"].vertex_shader;
|
|
var uniforms = ShaderUtils.lib["fresnel"].uniforms;
|
|
|
|
uniforms["tCube"].texture = textureCube;
|
|
|
|
var material = new THREE.MeshShaderMaterial( { fragment_shader: fragment_shader,
|
|
vertex_shader: vertex_shader,
|
|
uniforms: uniforms
|
|
} );
|
|
|
|
for ( var i = 0; i < 200; i ++ ) {
|
|
|
|
var mesh = new THREE.Mesh( geometry, material );
|
|
mesh.position.x = Math.random() * 10000 - 5000;
|
|
mesh.position.y = Math.random() * 10000 - 5000;
|
|
mesh.position.z = Math.random() * 10000 - 5000;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
|
|
scene.addObject( mesh );
|
|
}
|
|
|
|
SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
|
|
|
|
webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
|
|
webglRenderer.setSize( window.innerWidth, window.innerHeight );
|
|
webglRenderer.autoClear = false;
|
|
container.appendChild( webglRenderer.domElement );
|
|
|
|
if ( statsEnabled ) {
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX ) * 10;
|
|
mouseY = ( event.clientY - windowHalfY ) * 10;
|
|
|
|
}
|
|
|
|
function loop() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
|
|
cameraCube.target.position.x = - camera.position.x;
|
|
cameraCube.target.position.y = - camera.position.y;
|
|
cameraCube.target.position.z = - camera.position.z;
|
|
|
|
webglRenderer.clear();
|
|
webglRenderer.render( sceneCube, cameraCube );
|
|
webglRenderer.render( scene, camera );
|
|
|
|
if ( statsEnabled ) stats.update();
|
|
|
|
}
|
|
|
|
function log( text ) {
|
|
|
|
var e = document.getElementById("log");
|
|
e.innerHTML = text + "<br/>" + e.innerHTML;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|