|
|
@@ -4,13 +4,7 @@
|
|
|
<title>three.js webgl - materials - blending</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 {
|
|
|
- margin: 0px;
|
|
|
- background-color: #000000;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- </style>
|
|
|
+ <link type="text/css" rel="stylesheet" href="main.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
@@ -39,9 +33,9 @@
|
|
|
|
|
|
// BACKGROUND
|
|
|
|
|
|
- const canvas = document.createElement( 'canvas' );
|
|
|
- const ctx = canvas.getContext( '2d' );
|
|
|
- canvas.width = canvas.height = 128;
|
|
|
+ const canvasBackground = document.createElement( 'canvas' );
|
|
|
+ const ctx = canvasBackground.getContext( '2d' );
|
|
|
+ canvasBackground.width = canvasBackground.height = 128;
|
|
|
ctx.fillStyle = '#ddd';
|
|
|
ctx.fillRect( 0, 0, 128, 128 );
|
|
|
ctx.fillStyle = '#555';
|
|
|
@@ -53,7 +47,7 @@
|
|
|
ctx.fillStyle = '#777';
|
|
|
ctx.fillRect( 96, 96, 32, 32 );
|
|
|
|
|
|
- mapBg = new THREE.CanvasTexture( canvas );
|
|
|
+ mapBg = new THREE.CanvasTexture( canvasBackground );
|
|
|
mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
|
|
|
mapBg.repeat.set( 128, 64 );
|
|
|
|
|
|
@@ -111,7 +105,6 @@
|
|
|
mesh.position.set( x, y, z );
|
|
|
scene.add( mesh );
|
|
|
|
|
|
-
|
|
|
mesh = new THREE.Mesh( geo2, generateLabelMaterial( blending.name ) );
|
|
|
mesh.position.set( x, y - 75, z );
|
|
|
scene.add( mesh );
|
|
|
@@ -120,9 +113,12 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
+ const canvas = document.createElement( 'canvas' );
|
|
|
+ const context = canvas.getContext( 'webgl', { alpha: false } ); // TODO Remove workaround
|
|
|
+
|
|
|
// RENDERER
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
document.body.appendChild( renderer.domElement );
|
Michael Herzog