Examples: Improved webgl_materials_physical_transmission_alpha.

mrdoob · May 12, 2023 · 79cc93c · 79cc93c
1 parent eb0a994
commit 79cc93c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 12 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -158,6 +158,7 @@
 		"webgl_materials_physical_clearcoat",
 		"webgl_materials_physical_reflectivity",
 		"webgl_materials_physical_transmission",
+		"webgl_materials_physical_transmission_alpha",
 		"webgl_materials_standard",
 		"webgl_materials_subsurface_scattering",
 		"webgl_materials_texture_anisotropy",

diff --git a/examples/screenshots/webgl_materials_physical_transmission.2.jpg b/examples/screenshots/webgl_materials_physical_transmission.2.jpg
diff --git a/examples/screenshots/webgl_materials_physical_transmission_alpha.jpg b/examples/screenshots/webgl_materials_physical_transmission_alpha.jpg
diff --git a/...gl_materials_physical_transmission.2.html → ...aterials_physical_transmission_alpha.html b/...gl_materials_physical_transmission.2.html → ...aterials_physical_transmission_alpha.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>threejs webgl - materials - transmission 2</title>
+		<title>threejs webgl - materials - transmission - alpha</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 			body {
-				background-color: #ffffff;
+				background-color: #888888;
 			}
 
 			#table {
@@ -48,7 +48,7 @@
 		</table>
 
 		<div id="container"></div>
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - Transmission 2</div>
+		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - transmission - alpha</div>
 
 		<!-- Import maps polyfill -->
 		<!-- Remove this when import maps will be widely supported -->
@@ -144,12 +144,9 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 
-				// transparent background
-				renderer.setClearColor( 0x000000, 0 );
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
@@ -163,17 +160,15 @@
 
 				scene = new THREE.Scene();
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.position.set( 0, 1, 1 );
-				//scene.add( light );
-
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.set( -10, 2, 0 );
+				camera.position.set( -5, 0.5, 0 );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render ); // use if there is no animation loop
 				controls.minDistance = 5;
 				controls.maxDistance = 20;
+				controls.target.y = 0.5;
+				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize );