mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-18 01:16:20 +10:00
alteredq
cff95a119c
That was much tougher than expected. No wonder other WebGL video demos around the web are broken. Firefox OpenGL / ANGLE and Chrome OpenGL were ok, getting it to work in Chrome ANGLE was rather tricky. Please report if something got broken. I tried to go through all textured examples but I may have missed something. If you want to refresh texture on WebGL side, you just set "texture.needsUpdate" flag (if you use Loader or ImageUtils.loadTexture / loadTextureCube everything is taken care of). Flag has to be set also for canvas-based textures, sorry no escaping this :(. I tried and it lead to ugly problems (e.g. AO minecraft demo mixes several asynchronously loaded and generated images into one texture, with autodetect always something was broken). "needsUpdate" should work also on cube textures, though it's not tested yet (also there I didn't put hack for Chrome ANGLE).
215 lines
6.6 KiB
HTML
215 lines
6.6 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js canvas - materials</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
font-family: Monospace;
|
|
background-color: #202020;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
|
|
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
|
|
|
|
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer, objects;
|
|
var particleLight, pointLight;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
camera.position.y = 200;
|
|
camera.position.z = 800;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// Grid
|
|
|
|
var geometry = new THREE.Geometry();
|
|
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, 0, 0 ) ) );
|
|
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, 0, 0 ) ) );
|
|
|
|
var material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } );
|
|
|
|
for ( var i = 0; i <= 10; i ++ ) {
|
|
|
|
var line = new THREE.Line( geometry, material );
|
|
line.position.y = - 120;
|
|
line.position.z = ( i * 100 ) - 500;
|
|
scene.addObject( line );
|
|
|
|
var line = new THREE.Line( geometry, material );
|
|
line.position.x = ( i * 100 ) - 500;
|
|
line.position.y = - 120;
|
|
line.rotation.y = 90 * Math.PI / 180;
|
|
scene.addObject( line );
|
|
|
|
}
|
|
|
|
// Spheres
|
|
|
|
var geometry = new Sphere( 100, 14, 7, false );
|
|
|
|
var materials = [
|
|
|
|
{ material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), overdraw: false, doubleSided: true },
|
|
{ material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true },
|
|
{ material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false },
|
|
{ material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false },
|
|
{ material: new THREE.MeshDepthMaterial(), overdraw: true, doubleSided: false },
|
|
{ material: new THREE.MeshNormalMaterial(), overdraw: true, doubleSided: false },
|
|
{ material: new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false },
|
|
{ material: new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false },
|
|
{ material: new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } ), overdraw: false, doubleSided: false }
|
|
|
|
];
|
|
|
|
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
|
|
|
|
var face = geometry.faces[ i ];
|
|
if ( Math.random() > 0.7 ) face.material = [ materials[ Math.floor( Math.random() * materials.length ) ].material ];
|
|
|
|
}
|
|
|
|
materials.push( { material: new THREE.MeshFaceMaterial(), overdraw: false, doubleSided: true } );
|
|
|
|
objects = [];
|
|
|
|
for ( var i = 0, l = materials.length; i < l; i ++ ) {
|
|
|
|
var sphere = new THREE.Mesh( geometry, materials[ i ].material );
|
|
sphere.overdraw = materials[ i ].overdraw;
|
|
sphere.doubleSided = materials[ i ].doubleSided;
|
|
|
|
sphere.position.x = ( i % 5 ) * 200 - 400;
|
|
sphere.position.z = Math.floor( i / 5 ) * 200 - 200;
|
|
|
|
sphere.rotation.x = Math.random() * 200 - 100;
|
|
sphere.rotation.y = Math.random() * 200 - 100;
|
|
sphere.rotation.z = Math.random() * 200 - 100;
|
|
|
|
objects.push( sphere );
|
|
|
|
scene.addObject( sphere );
|
|
|
|
}
|
|
|
|
particleLight = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xffffff } ) );
|
|
particleLight.scale.x = particleLight.scale.y = particleLight.scale.z = 4;
|
|
scene.addObject( particleLight );
|
|
|
|
// Lights
|
|
|
|
scene.addLight( new THREE.AmbientLight( Math.random() * 0x202020 ) );
|
|
|
|
var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
|
|
directionalLight.position.x = Math.random() - 0.5;
|
|
directionalLight.position.y = Math.random() - 0.5;
|
|
directionalLight.position.z = Math.random() - 0.5;
|
|
directionalLight.position.normalize();
|
|
scene.addLight( directionalLight );
|
|
|
|
pointLight = new THREE.PointLight( 0xffffff, 1 );
|
|
scene.addLight( pointLight );
|
|
|
|
renderer = new THREE.CanvasRenderer();
|
|
// renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
var debugCanvas = document.createElement( 'canvas' );
|
|
debugCanvas.width = 512;
|
|
debugCanvas.height = 512;
|
|
debugCanvas.style.position = 'absolute';
|
|
debugCanvas.style.top = '0px';
|
|
debugCanvas.style.left = '0px';
|
|
|
|
container.appendChild( debugCanvas );
|
|
|
|
debugContext = debugCanvas.getContext( '2d' );
|
|
debugContext.setTransform( 1, 0, 0, 1, 256, 256 );
|
|
debugContext.strokeStyle = '#000000';
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild(stats.domElement);
|
|
|
|
}
|
|
|
|
function loadImage( path ) {
|
|
|
|
var image = document.createElement( 'img' );
|
|
var texture = new THREE.Texture( image, THREE.UVMapping )
|
|
|
|
image.onload = function () { texture.needsUpdate = true; };
|
|
image.src = path;
|
|
|
|
return texture;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
var timer = new Date().getTime() * 0.0001;
|
|
|
|
camera.position.x = Math.cos( timer ) * 1000;
|
|
camera.position.z = Math.sin( timer ) * 1000;
|
|
|
|
for ( var i = 0, l = objects.length; i < l; i++ ) {
|
|
|
|
var object = objects[ i ];
|
|
|
|
object.rotation.x += 0.01;
|
|
object.rotation.y += 0.005;
|
|
|
|
}
|
|
|
|
particleLight.position.x = Math.sin( timer * 7 ) * 300;
|
|
particleLight.position.y = Math.cos( timer * 5 ) * 400;
|
|
particleLight.position.z = Math.cos( timer * 3 ) * 300;
|
|
|
|
pointLight.position.x = particleLight.position.x;
|
|
pointLight.position.y = particleLight.position.y;
|
|
pointLight.position.z = particleLight.position.z;
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|