Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_materials_physical_transmission.html 5.5 KB
Newer Older
M
r108  
Mr.doob 已提交
1 2 3 
<!DOCTYPE html>
<html lang="en">
	<head>
M
r119  
Mr.doob 已提交
4 
		<title>threejs webgl - materials - transmission</title>
M
r108  
Mr.doob 已提交
5 6 7 8 9 10 11 
		<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">
	</head>
	<body>

		<div id="container"></div>
M
r130  
Mr.doob 已提交
12 
		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - Transmission</div>
M
r108  
Mr.doob 已提交
13 14 15 16 17 18 19 

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import { GUI } from './jsm/libs/dat.gui.module.js';
			import { OrbitControls } from './jsm/controls/OrbitControls.js';
M
r112  
Mr.doob 已提交
20 
			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
M
r108  
Mr.doob 已提交
21
M
r122  
Mr.doob 已提交
22 
			const params = {
M
r108  
Mr.doob 已提交
23 
				color: 0xffffff,
M
r129  
Mr.doob 已提交
24 25 26 27 
				transmission: 1,
				opacity: 1,
				metalness: 0,
				roughness: 0,
M
r130  
Mr.doob 已提交
28 
				reflectivity: 0.5,
M
r131  
Mr.doob 已提交
29 30 31 
				thickness: 0.01,
				specularIntensity: 1,
				specularTint: 0xffffff,
M
r108  
Mr.doob 已提交
32 33 34 35 36 
				envMapIntensity: 1,
				lightIntensity: 1,
				exposure: 1
			};
M
r122  
Mr.doob 已提交
37 
			let camera, scene, renderer;
M
r108  
Mr.doob 已提交
38
M
r130  
Mr.doob 已提交
39 
			let mesh;
M
r108  
Mr.doob 已提交
40
M
r122  
Mr.doob 已提交
41 
			const hdrEquirect = new RGBELoader()
M
r112  
Mr.doob 已提交
42 
				.setPath( 'textures/equirectangular/' )
M
r122  
Mr.doob 已提交
43 
				.load( 'royal_esplanade_1k.hdr', function () {
M
r108  
Mr.doob 已提交
44
M
r131  
Mr.doob 已提交
45 46 
					hdrEquirect.mapping = THREE.EquirectangularReflectionMapping;
M
r108  
Mr.doob 已提交
47 
					init();
M
r130  
Mr.doob 已提交
48 
					render();
M
r108  
Mr.doob 已提交
49 50 51 52 53 54 55 56 57 

				} );

			function init() {

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.shadowMap.enabled = true;
M
r130  
Mr.doob 已提交
58 
				document.body.appendChild( renderer.domElement );
M
r108  
Mr.doob 已提交
59 60 61 62 

				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = params.exposure;
M
r112  
Mr.doob 已提交
63 
				renderer.outputEncoding = THREE.sRGBEncoding;
M
r108  
Mr.doob 已提交
64 65 66 67 68 69 70 71 

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.set( 0, 0, 120 );

				//
M
r131  
Mr.doob 已提交
72 
				scene.background = hdrEquirect;
M
r108  
Mr.doob 已提交
73 74 75 

				//
M
r125  
Mr.doob 已提交
76 
				const geometry = new THREE.SphereGeometry( 20, 64, 32 );
M
r108  
Mr.doob 已提交
77
M
r122  
Mr.doob 已提交
78 
				const texture = new THREE.CanvasTexture( generateTexture() );
M
r108  
Mr.doob 已提交
79 80 81 82 83 
				texture.magFilter = THREE.NearestFilter;
				texture.wrapT = THREE.RepeatWrapping;
				texture.wrapS = THREE.RepeatWrapping;
				texture.repeat.set( 1, 3.5 );
M
r122  
Mr.doob 已提交
84 
				const material = new THREE.MeshPhysicalMaterial( {
M
r108  
Mr.doob 已提交
85 
					color: params.color,
M
r129  
Mr.doob 已提交
86 87 
					metalness: params.metalness,
					roughness: params.roughness,
M
r130  
Mr.doob 已提交
88 
					reflectivity: params.reflectivity,
M
r108  
Mr.doob 已提交
89 
					alphaMap: texture,
M
r131  
Mr.doob 已提交
90 
					envMap: hdrEquirect,
M
r108  
Mr.doob 已提交
91 
					envMapIntensity: params.envMapIntensity,
M
r119  
Mr.doob 已提交
92 
					transmission: params.transmission, // use material.transmission for glass materials
M
r131  
Mr.doob 已提交
93 94 
					specularIntensity: params.specularIntensity,
					specularTint: params.specularTint,
M
r129  
Mr.doob 已提交
95 
					opacity: params.opacity,
M
r130  
Mr.doob 已提交
96 
					side: THREE.DoubleSide,
M
r108  
Mr.doob 已提交
97 98 99 
					transparent: true
				} );
M
r130  
Mr.doob 已提交
100 101 
				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );
M
r108  
Mr.doob 已提交
102 103 104 

				//
M
r122  
Mr.doob 已提交
105 
				const controls = new OrbitControls( camera, renderer.domElement );
M
r130  
Mr.doob 已提交
106 
				controls.addEventListener( 'change', render ); // use if there is no animation loop
M
r108  
Mr.doob 已提交
107 108 109 
				controls.minDistance = 10;
				controls.maxDistance = 150;
M
r125  
Mr.doob 已提交
110 
				window.addEventListener( 'resize', onWindowResize );
M
r108  
Mr.doob 已提交
111 112 113 

				//
M
r122  
Mr.doob 已提交
114 
				const gui = new GUI();
M
r108  
Mr.doob 已提交
115 116 117 118 

				gui.addColor( params, 'color' )
					.onChange( function () {
M
r130  
Mr.doob 已提交
119 120 
						material.color.set( params.color );
						render();
M
r108  
Mr.doob 已提交
121 122 123 

					} );
M
r129  
Mr.doob 已提交
124 
				gui.add( params, 'transmission', 0, 1, 0.01 )
M
r108  
Mr.doob 已提交
125 126 
					.onChange( function () {
M
r130  
Mr.doob 已提交
127 128 
						material.transmission = params.transmission;
						render();
M
r108  
Mr.doob 已提交
129 130 131 

					} );
M
r129  
Mr.doob 已提交
132 
				gui.add( params, 'opacity', 0, 1, 0.01 )
M
r108  
Mr.doob 已提交
133 134 
					.onChange( function () {
M
r130  
Mr.doob 已提交
135 136 
						material.opacity = params.opacity;
						render();
M
r129  
Mr.doob 已提交
137 138 139 140 141 142 

					} );

				gui.add( params, 'metalness', 0, 1, 0.01 )
					.onChange( function () {
M
r130  
Mr.doob 已提交
143 144 
						material.metalness = params.metalness;
						render();
M
r129  
Mr.doob 已提交
145 146 147 148 149 150 

					} );

				gui.add( params, 'roughness', 0, 1, 0.01 )
					.onChange( function () {
M
r130  
Mr.doob 已提交
151 152 153 154 155 156 157 158 159 160 
						material.roughness = params.roughness;
						render();

					} );

				gui.add( params, 'reflectivity', 0, 1, 0.01 )
					.onChange( function () {

						material.reflectivity = params.reflectivity;
						render();
M
r131  
Mr.doob 已提交
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 

					} );

				gui.add( params, 'thickness', 0, 5, 0.01 )
					.onChange( function () {

						material.thickness = params.thickness;
						render();

					} );

				gui.add( params, 'specularIntensity', 0, 1, 0.01 )
					.onChange( function () {

						material.specularIntensity = params.specularIntensity;
						render();

					} );

				gui.addColor( params, 'specularTint' )
					.onChange( function () {

						material.specularTint.set( params.specularTint );
						render();
M
r108  
Mr.doob 已提交
185 186 187 

					} );
M
r129  
Mr.doob 已提交
188 189 
				gui.add( params, 'envMapIntensity', 0, 1, 0.01 )
					.name( 'envMap intensity' )
M
r108  
Mr.doob 已提交
190 191 
					.onChange( function () {
M
r130  
Mr.doob 已提交
192 193 
						material.envMapIntensity = params.envMapIntensity;
						render();
M
r108  
Mr.doob 已提交
194 195 196 

					} );
M
r129  
Mr.doob 已提交
197 
				gui.add( params, 'exposure', 0, 1, 0.01 )
M
r108  
Mr.doob 已提交
198 199 200 
					.onChange( function () {

						renderer.toneMappingExposure = params.exposure;
M
r130  
Mr.doob 已提交
201 
						render();
M
r108  
Mr.doob 已提交
202 203 204 205 206 207 208 209 210 

					} );

				gui.open();

			}

			function onWindowResize() {
M
r122  
Mr.doob 已提交
211 212 
				const width = window.innerWidth;
				const height = window.innerHeight;
M
r108  
Mr.doob 已提交
213 214 215 216 217 218 

				camera.aspect = width / height;
				camera.updateProjectionMatrix();

				renderer.setSize( width, height );
M
r130  
Mr.doob 已提交
219 220 
				render();
M
r108  
Mr.doob 已提交
221 222 223 224 225 226 
			}

			//

			function generateTexture() {
M
r122  
Mr.doob 已提交
227 
				const canvas = document.createElement( 'canvas' );
M
r108  
Mr.doob 已提交
228 229 230 
				canvas.width = 2;
				canvas.height = 2;
M
r122  
Mr.doob 已提交
231 
				const context = canvas.getContext( '2d' );
M
r108  
Mr.doob 已提交
232 233 234 235 236 237 238 
				context.fillStyle = 'white';
				context.fillRect( 0, 1, 2, 1 );

				return canvas;

			}
M
r130  
Mr.doob 已提交
239 
			function render() {
M
r108  
Mr.doob 已提交
240 241 242 243 244 245 246 247 

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>