123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>facing cube with lighting</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;
- cursor: none;
- }
- </style>
- </head>
- <body>
- <script src="./three.js"></script>
- <script src="./WebGL.js"></script>
- <script>
- var camera, scene, renderer, raycaster;
- var mesh, mouse, plane, intersectPoint, cameraHeight, light, mousePoint;
- if ( WEBGL.isWebGLAvailable() === false ) {
- document.body.appendChild( WEBGL.getWebGLErrorMessage() );
- }
- init();
- animate();
- function init() {
- raycaster = new THREE.Raycaster();
- mouse = new THREE.Vector2();
- camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
- camera.position.z = 100;
- camera.position.y = -50;
- cameraHeight = 100;
- scene = new THREE.Scene();
- plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
- intersectPoint = new THREE.Vector3();
- //var texture = new THREE.TextureLoader().load( './greebles.jpg' );
- var geometry = new THREE.BoxBufferGeometry(20, 20, 20);
- var material = new THREE.MeshStandardMaterial({color: "gray"});
-
- var sphere = new THREE.SphereBufferGeometry( 0.5, 16, 8 );
- mousePoint = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial( { color: "red" } ));
- scene.add(mousePoint);
- mesh = new THREE.Mesh(geometry, material);
- scene.add( mesh );
- light = new THREE.PointLight(0xffffff, 5, 50, 1);
- light.position.set(-10, -20, 30);
- //light.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffffff } ) ) );
- scene.add(light);
- renderer = new THREE.WebGLRenderer({antialias: true});
- renderer.setPixelRatio(window.devicePixelRatio);
- renderer.setSize(window.innerWidth, window.innerHeight);
- document.body.appendChild(renderer.domElement);
- window.addEventListener('resize', onWindowResize, false);
- }
- function onWindowResize() {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize(window.innerWidth, window.innerHeight);
- }
- function animate() {
- requestAnimationFrame(animate);
- camera.position.z = cameraHeight;
- camera.lookAt(mesh.position);
- camera.updateMatrixWorld();
- raycaster.setFromCamera(mouse, camera);
- raycaster.ray.intersectPlane(plane, intersectPoint);
- mesh.lookAt(intersectPoint);
- mousePoint.position.x = intersectPoint.x;
- mousePoint.position.y = intersectPoint.y;
- mousePoint.position.z = intersectPoint.z;
- //light.position.z = 30 + Math.sin((new Date().getTime() / 1000)) * 5;
- renderer.render(scene, camera);
- }
- document.addEventListener("mousemove", function(event) {
- event.preventDefault();
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
- mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
- });
- var scaling = false;
- var pinchCenter = {x:0, y: 0};
- var origDistance = null;
- var origCameraHeight = null;
- document.addEventListener("touchstart", function(event) {
- scaling = false;
- if(event.touches.length == 2) {
- scaling = true;
- pinchCenter = {
- x: (event.touches[0].clientX + event.touches[1].clientX) / 2,
- y: (event.touches[0].clientY + event.touches[1].clientY) / 2
- };
- origDistance = Math.hypot(
- event.touches[0].clientX - pinchCenter.x,
- event.touches[0].clientY - pinchCenter.y
- );
- origCameraHeight = cameraHeight;
- }
- });
- document.addEventListener("touchmove", function(event) {
- if(event.touches.length == 1) {
- mouse.x = (event.touches[0].clientX / window.innerWidth) * 2 - 1;
- mouse.y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1;
- }
- if(scaling && event.touches.length == 2) {
- var newDist = Math.hypot(
- event.touches[0].clientX - pinchCenter.x,
- event.touches[0].clientY - pinchCenter.y
- );
- cameraHeight = origCameraHeight * (origDistance / newDist);
- cameraHeight = Math.max(Math.min(cameraHeight, 250), 50);
- }
- });
- document.addEventListener("touchend", function(event) {
- if(scaling) {
- scaling = false;
- }
- });
- document.addEventListener("wheel", function(event) {
- cameraHeight += (event.deltaY / 10);
- cameraHeight = Math.max(Math.min(cameraHeight, 250), 50);
- });
- </script>
- </body>
- </html>
|