mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
alteredq
81b60ea2f6
Noticeable difference: can't anymore assign Material references to faces directly - "face.materials" became "face.materialIndex". Materials have to go to "geometry.materials" array (to which "face.materialIndex" points). This is necessary to allow run-time changing of face materials (this indirection used to be done by arrays). Some casualties: - multi-materials example, this functionality isn't possible anymore - had to simplify LOD Text examples as LODs don't handle groups (used to fake multi-materials) - multi-materials sphere in materials example can't have faces with undefined materials (this may be fixable I guess, when there'll be some real use-case) - scene format still has materials arrays, only the last material will be used (except when there are face materials, then materials from JSON will be used, as before) Other renderers and their corresponding examples were not touched yet. WebGLRenderer still needs some prettification, some things don't make sense anymore without arrays, code can be cleaned up further.
269 lines
6.6 KiB
HTML
Executable File
269 lines
6.6 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - multiple canvases - complex</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
body {
|
|
color: #808080;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
|
|
background-color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
padding: 5px;
|
|
}
|
|
|
|
#container1, #container2, #container3 {
|
|
position: relative;
|
|
border: 1px solid red;
|
|
}
|
|
|
|
#container1 {
|
|
width: 300px;
|
|
height: 200px;
|
|
}
|
|
|
|
#container2 {
|
|
width: 400px;
|
|
height: 100px;
|
|
left: 150px;
|
|
}
|
|
|
|
#container3 {
|
|
width: 200px;
|
|
height: 300px;
|
|
left: 75px;
|
|
}
|
|
|
|
a {
|
|
|
|
color: #0080ff;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container">
|
|
<div id="container1"></div>
|
|
<div id="container2"></div>
|
|
<div id="container3"></div>
|
|
</div>
|
|
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - multiple canvases - complex</div>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script>
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var apps = [];
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
var container1 = document.getElementById( 'container1' );
|
|
var container2 = document.getElementById( 'container2' );
|
|
var container3 = document.getElementById( 'container3' );
|
|
|
|
var fullWidth = 550;
|
|
var fullHeight = 600;
|
|
|
|
apps.push( new App( 'container1', fullWidth, fullHeight, 0, 0, container1.clientWidth, container1.clientHeight ) );
|
|
apps.push( new App( 'container2', fullWidth, fullHeight, 150, 200, container2.clientWidth, container2.clientHeight ) );
|
|
apps.push( new App( 'container3', fullWidth, fullHeight, 75, 300, container3.clientWidth, container3.clientHeight ) );
|
|
|
|
}
|
|
|
|
function animate() {
|
|
|
|
for ( var i = 0; i < apps.length; ++i ) {
|
|
|
|
apps[ i ].animate();
|
|
|
|
}
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
}
|
|
|
|
function App( containerId, fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight ) {
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var mesh, group1, group2, group3, light;
|
|
|
|
var mouseX = 0, mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
init();
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( containerId );
|
|
|
|
camera = new THREE.PerspectiveCamera( 20, container.clientWidth / container.clientHeight, 1, 10000 );
|
|
camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );
|
|
camera.position.z = 1800;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
light = new THREE.DirectionalLight( 0xffffff );
|
|
light.position.set( 0, 0, 1 ).normalize();
|
|
scene.add( light );
|
|
|
|
var shadowMaterial = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/shadow.png' ) } );
|
|
var shadowGeo = new THREE.PlaneGeometry( 300, 300, 1, 1 );
|
|
|
|
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
|
|
mesh.position.y = - 250;
|
|
mesh.rotation.x = - 90 * Math.PI / 180;
|
|
scene.add( mesh );
|
|
|
|
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
|
|
mesh.position.y = - 250;
|
|
mesh.position.x = - 400;
|
|
mesh.rotation.x = - 90 * Math.PI / 180;
|
|
scene.add( mesh );
|
|
|
|
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
|
|
mesh.position.y = - 250;
|
|
mesh.position.x = 400;
|
|
mesh.rotation.x = - 90 * Math.PI / 180;
|
|
scene.add( mesh );
|
|
|
|
var faceIndices = [ 'a', 'b', 'c', 'd' ];
|
|
|
|
var color, f1, f2, f3, p, n, vertexIndex,
|
|
|
|
geometry1 = new THREE.IcosahedronGeometry( 1 ),
|
|
geometry2 = new THREE.IcosahedronGeometry( 1 ),
|
|
geometry3 = new THREE.IcosahedronGeometry( 1 );
|
|
|
|
for ( var i = 0; i < geometry1.faces.length; i ++ ) {
|
|
|
|
f1 = geometry1.faces[ i ];
|
|
f2 = geometry2.faces[ i ];
|
|
f3 = geometry3.faces[ i ];
|
|
|
|
n = ( f1 instanceof THREE.Face3 ) ? 3 : 4;
|
|
|
|
for( var j = 0; j < n; j ++ ) {
|
|
|
|
vertexIndex = f1[ faceIndices[ j ] ];
|
|
|
|
p = geometry1.vertices[ vertexIndex ].position;
|
|
|
|
color = new THREE.Color( 0xffffff );
|
|
color.setHSV( ( p.y + 1 ) / 2, 1.0, 1.0 );
|
|
|
|
f1.vertexColors[ j ] = color;
|
|
|
|
color = new THREE.Color( 0xffffff );
|
|
color.setHSV( 0.0, ( p.y + 1 ) / 2, 1.0 );
|
|
|
|
f2.vertexColors[ j ] = color;
|
|
|
|
color = new THREE.Color( 0xffffff );
|
|
color.setHSV( 0.125 * vertexIndex / geometry1.vertices.length, 1.0, 1.0 );
|
|
|
|
f3.vertexColors[ j ] = color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
var materials = [
|
|
|
|
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
|
|
new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )
|
|
|
|
];
|
|
|
|
var scaleMatrix = new THREE.Matrix4().setScale( 200, 200, 200 );
|
|
geometry1.applyMatrix( scaleMatrix );
|
|
geometry2.applyMatrix( scaleMatrix );
|
|
geometry3.applyMatrix( scaleMatrix );
|
|
|
|
group1 = THREE.SceneUtils.createMultiMaterialObject( geometry1, materials );
|
|
group1.position.x = -400;
|
|
group1.rotation.x = -1.87;
|
|
scene.add( group1 );
|
|
|
|
group2 = THREE.SceneUtils.createMultiMaterialObject( geometry2, materials );
|
|
group2.position.x = 400;
|
|
group2.rotation.x = 0;
|
|
scene.add( group2 );
|
|
|
|
group3 = THREE.SceneUtils.createMultiMaterialObject( geometry3, materials );
|
|
group3.position.x = 0;
|
|
group3.rotation.x = 0;
|
|
scene.add( group3 );
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setSize( container.clientWidth, container.clientHeight );
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild( stats.domElement );
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove( event ) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
mouseY = ( event.clientY - windowHalfY );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
this.animate = function() {
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
};
|
|
|
|
function render() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
|
|
|
|
camera.lookAt( scene.position );
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|