mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-19 18: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 );
152 lines
4.0 KiB
HTML
152 lines
4.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - webgl cube reflection [balls]</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;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank">Paul Debevec</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 = false;
|
|
|
|
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 );
|
|
geometry.sortFacesByMaterial();
|
|
|
|
var path = "textures/cube/pisa/";
|
|
var format = '.png';
|
|
var urls = [
|
|
path + 'px' + format, path + 'nx' + format,
|
|
path + 'py' + format, path + 'ny' + format,
|
|
path + 'pz' + format, path + 'nz' + format
|
|
];
|
|
|
|
var images = ImageUtils.loadArray( urls );
|
|
var textureCube = new THREE.Texture( images );
|
|
// var textureCube = new THREE.Texture( images, new THREE.CubeRefractionMapping );
|
|
|
|
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: textureCube } );
|
|
|
|
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.addPanoramaCubePlanes( sceneCube, 100000, images );
|
|
//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
|
|
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();
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|