midas
/
midas-wobble-threejs


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<html>

<head>
	<style type="text/css">
		html,
		body {
			margin: 0;
			padding: 0;
			background-color: #121212;
		}

		#demo {
			width: 66%;
			height: 66%;
			margin: 10% auto auto auto;
			display: block;
		}
	</style>
</head>

<body>
	<div id="demo"></div>
	<script src="./three.min.js"></script>
	<script type="text/javascript">
		var plane;
		var camera;
		var renderer;
		var velocity = { x: 0.005, y: -0.01 };
		var oscillator = 0;
		var targetObject;
		var spotLight;

		var demoContainer = document.getElementById("demo");

		window.addEventListener("resize", function (event) {
			demoContainer = document.getElementById("demo");
			camera = new THREE.PerspectiveCamera(66, demoContainer.clientWidth / demoContainer.clientHeight, 0.1, 1000);
			camera.position.z = 2.4;
			renderer.setSize(demoContainer.clientWidth, demoContainer.clientHeight);
		});

		document.addEventListener("DOMContentLoaded", function () {
			var scene = new THREE.Scene();

			scene.background = new THREE.Color(0x000000);
			camera = new THREE.PerspectiveCamera(66, demoContainer.clientWidth / demoContainer.clientHeight, 0.1, 1000);

			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(demoContainer.clientWidth, demoContainer.clientHeight);

			var texture = new THREE.TextureLoader().load('./midas.jpg');
			var geometry = new THREE.PlaneGeometry(2, 2, 8, 8);

			var material = new THREE.MeshLambertMaterial({ map: texture, color: 0xffffff, side: THREE.DoubleSide });


			plane = new THREE.Mesh(geometry, material);
			scene.add(plane);

			camera.position.z = 2.4;

			// var light = new THREE.AmbientLight( 0xffffff );
			// scene.add( light );

			targetObject = new THREE.Object3D();
			scene.add(targetObject);

			spotLight = new THREE.SpotLight(0xffffff);
			spotLight.position.set(0, 0, 10);

			spotLight.angle = 0.20;
			spotLight.penumbra = 1;
			spotLight.target = targetObject;
			scene.add(spotLight);

			demoContainer.appendChild(renderer.domElement);

			function animate() {
				requestAnimationFrame(animate);

				update();

				renderer.render(scene, camera);
			}
			animate();
		});

		function update() {
			oscillator += 1;
			oscillator %= 360;

			plane.position.z = Math.sin(oscillator * Math.PI / 180);
			// plane.rotation.x = Math.cos(oscillator * Math.PI / 180);
			// plane.rotation.y = Math.cos(oscillator * Math.PI / 180);
			plane.rotation.z = Math.cos(oscillator * Math.PI / 180) / 8;

			targetObject.position.x = Math.cos(oscillator * Math.PI / 180);
			targetObject.position.y = Math.sin(oscillator * Math.PI / 180);
		}
	</script>
</body>

</html>