gitadmin
/
three.js
spegling av https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
							<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Three.js - Shadows - Fake</title>
    <style>
    html, body {
        margin: 0;
        height: 100%;
    }
    #c {
        width: 100%;
        height: 100%;
        display: block;
    }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
  </body>
<script type="importmap">
{
  "imports": {
    "three": "../../build/three.module.js"
  }
}
</script>

<script type="module">
import * as THREE from 'three';

function main() {

	const canvas = document.querySelector( '#c' );
	const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );

	const fov = 45;
	const aspect = 2; // the canvas default
	const near = 0.1;
	const far = 100;
	const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
	camera.position.set( 0, 10, 20 );
	camera.lookAt( 0, 0, 0 );

	const scene = new THREE.Scene();
	scene.background = new THREE.Color( 'white' );

	const loader = new THREE.TextureLoader();

	{

		const planeSize = 40;

		const texture = loader.load( 'resources/images/checker.png' );
		texture.wrapS = THREE.RepeatWrapping;
		texture.wrapT = THREE.RepeatWrapping;
		texture.magFilter = THREE.NearestFilter;
		texture.colorSpace = THREE.SRGBColorSpace;
		const repeats = planeSize / 2;
		texture.repeat.set( repeats, repeats );

		const planeGeo = new THREE.PlaneGeometry( planeSize, planeSize );
		const planeMat = new THREE.MeshBasicMaterial( {
			map: texture,
			side: THREE.DoubleSide,
		} );
		planeMat.color.setRGB( 1.5, 1.5, 1.5 );
		const mesh = new THREE.Mesh( planeGeo, planeMat );
		mesh.rotation.x = Math.PI * - .5;
		scene.add( mesh );

	}

	const shadowTexture = loader.load( 'resources/images/roundshadow.png' );
	const sphereShadowBases = [];
	{

		const sphereRadius = 1;
		const sphereWidthDivisions = 32;
		const sphereHeightDivisions = 16;
		const sphereGeo = new THREE.SphereGeometry( sphereRadius, sphereWidthDivisions, sphereHeightDivisions );

		const planeSize = 1;
		const shadowGeo = new THREE.PlaneGeometry( planeSize, planeSize );

		const numSpheres = 15;
		for ( let i = 0; i < numSpheres; ++ i ) {

			// make a base for the shadow and the sphere.
			// so they move together.
			const base = new THREE.Object3D();
			scene.add( base );

			// add the shadow to the base
			// note: we make a new material for each sphere
			// so we can set that sphere's material transparency
			// separately.
			const shadowMat = new THREE.MeshBasicMaterial( {
				map: shadowTexture,
				transparent: true, // so we can see the ground
				depthWrite: false, // so we don't have to sort
			} );
			const shadowMesh = new THREE.Mesh( shadowGeo, shadowMat );
			shadowMesh.position.y = 0.001; // so we're above the ground slightly
			shadowMesh.rotation.x = Math.PI * - .5;
			const shadowSize = sphereRadius * 4;
			shadowMesh.scale.set( shadowSize, shadowSize, shadowSize );
			base.add( shadowMesh );

			// add the sphere to the base
			const u = i / numSpheres;
			const sphereMat = new THREE.MeshPhongMaterial();
			sphereMat.color.setHSL( u, 1, .75 );
			const sphereMesh = new THREE.Mesh( sphereGeo, sphereMat );
			sphereMesh.position.set( 0, sphereRadius + 2, 0 );
			base.add( sphereMesh );

			// remember all 3 plus the y position
			sphereShadowBases.push( { base, sphereMesh, shadowMesh, y: sphereMesh.position.y } );

		}

	}

	{

		const skyColor = 0xB1E1FF; // light blue
		const groundColor = 0xB97A20; // brownish orange
		const intensity = 0.75;
		const light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
		scene.add( light );

	}

	{

		const color = 0xFFFFFF;
		const intensity = 2.5;
		const light = new THREE.DirectionalLight( color, intensity );
		light.position.set( 0, 10, 5 );
		light.target.position.set( - 5, 0, 0 );
		scene.add( light );
		scene.add( light.target );

	}

	function resizeRendererToDisplaySize( renderer ) {

		const canvas = renderer.domElement;
		const width = canvas.clientWidth;
		const height = canvas.clientHeight;
		const needResize = canvas.width !== width || canvas.height !== height;
		if ( needResize ) {

			renderer.setSize( width, height, false );

		}

		return needResize;

	}

	function render( time ) {

		time *= 0.001; // convert to seconds

		resizeRendererToDisplaySize( renderer );

		{

			const canvas = renderer.domElement;
			camera.aspect = canvas.clientWidth / canvas.clientHeight;
			camera.updateProjectionMatrix();

		}

		sphereShadowBases.forEach( ( sphereShadowBase, ndx ) => {

			const { base, sphereMesh, shadowMesh, y } = sphereShadowBase;

			// u is a value that goes from 0 to 1 as we iterate the spheres
			const u = ndx / sphereShadowBases.length;

			// compute a position for there base. This will move
			// both the sphere and its shadow
			const speed = time * .2;
			const angle = speed + u * Math.PI * 2 * ( ndx % 1 ? 1 : - 1 );
			const radius = Math.sin( speed - ndx ) * 10;
			base.position.set( Math.cos( angle ) * radius, 0, Math.sin( angle ) * radius );

			// yOff is a value that goes from 0 to 1
			const yOff = Math.abs( Math.sin( time * 2 + ndx ) );
			// move the sphere up and down
			sphereMesh.position.y = y + THREE.MathUtils.lerp( - 2, 2, yOff );
			// fade the shadow as the sphere goes up
			shadowMesh.material.opacity = THREE.MathUtils.lerp( 1, .25, yOff );

		} );

		renderer.render( scene, camera );

		requestAnimationFrame( render );

	}

	requestAnimationFrame( render );

}

main();
</script>
</html>