太阳光影（Sun and shadow）

光影（Sun and shadow）"/>

太阳光影（Sun and shadow）

太阳光影

• 示例
• HTML
• JS

示例

HTML

<script src="//cdnjs.cloudflare/ajax/libs/three.js/r61/three.min.js"></script>
<script src=".js/js/Detector.js"></script>
<script src=".js/js/Stats.js"></script>
<script src=".js/js/OrbitControls.js"></script>
<script src=".js/js/KeyboardState.js"></script>
<script src=".js/js/THREEx.FullScreen.js"></script>
<script src=".js/js/THREEx.WindowResize.js"></script>
<!-- ------------------------------------------------------------ --><div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

JS

/*Three.js "tutorials by example"Author: Lee StemkoskiDate: July 2013 (three.js v59dev)*/// MAIN// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new KeyboardState();
var clock = new THREE.Clock();// custom global variables
var mesh;
var materials;
var projector, mouse = { x: 0, y: 0 }, INTERSECTED;init();
animate();// FUNCTIONS 		
function init() 
{// SCENEscene = new THREE.Scene();// CAMERAvar SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);scene.add(camera);camera.position.set(0,150,400);camera.lookAt(scene.position);	// RENDERERif ( Detector.webgl )renderer = new THREE.WebGLRenderer( {antialias:true} );elserenderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);container = document.getElementById( 'ThreeJS' );container.appendChild( renderer.domElement );// EVENTSTHREEx.WindowResize(renderer, camera);THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });// CONTROLScontrols = new THREE.OrbitControls( camera, renderer.domElement );// STATSstats = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.bottom = '0px';stats.domElement.style.zIndex = 100;container.appendChild( stats.domElement );// PROJECTOR// initialize object to perform world/screen calculationsprojector = new THREE.Projector();// LIGHTvar light = new THREE.PointLight(0xffffff);light.position.set(100,250,100);scene.add(light);// MATERIALSmaterials = [//		new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map } ),new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1 } )];// SKYBOXvar skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );scene.add(skyBox);// CUSTOM //var material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );var gradMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors } );var triangleGeometry = new THREE.Geometry();triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  1.0, 0.0));triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0));triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0));triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));var face = triangleGeometry.faces[0];var color = new THREE.Color( 0xffffff );var white = new THREE.Color( 'rgba(255, 255, 255, 0.5)' );color.setHex( Math.random() * 0xffffff );face.vertexColors[ 0 ] = white;face.vertexColors[ 1 ] = color;face.vertexColors[ 2 ] = color;var triangleMesh = new THREE.Mesh( triangleGeometry, gradMaterial );var triangleScale = 10;triangleMesh.scale.set(triangleScale, triangleScale, triangleScale);scene.add( triangleMesh );triangleMesh.geometry.dynamic = true;createSelectionTriangle();// when the mouse moves, call the given functiondocument.addEventListener( 'mousemove', onDocumentMouseMove, false );document.addEventListener( 'touchmove', onDocumentMouseMove, false );}var selectionTriangle;function createSelectionTriangle() {var triangleGeometry = new THREE.Geometry();triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  10.0, 0.0));triangleGeometry.vertices.push(new THREE.Vector3(-10.0, -10.0, 0.0));triangleGeometry.vertices.push(new THREE.Vector3( 10.0, -10.0, 0.0));triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));var material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );selectionTriangle = new THREE.Mesh( triangleGeometry, material );selectionTriangle.geometry.dynamic = true;selectionTriangle.position.set( 0, 0, 0);// selectionTriangle.scale.set(triangleScale, triangleScale, triangleScale);scene.add( selectionTriangle );
}function addTriangle() {var triangleGeometry = new THREE.Geometry();triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  1.0, 0.0));triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0));triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0));triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));var material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );var triangleMesh = new THREE.Mesh( triangleGeometry, material );var triangleScale = 10;triangleMesh.position.set( -20, 0, 0);triangleMesh.scale.set(triangleScale, triangleScale, triangleScale);scene.add( triangleMesh );
}function onDocumentMouseMove( event ) 
{// the following line would stop any other event handler from firing// (such as the mouse's TrackballControls)event.preventDefault();// update the mouse variablemouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;var targetVertex = selectionTriangle.geometry.vertices[0];//targetVertex.x = mouse.x * window.innerWidth / 4;targetVertex.x = mouse.x * window.innerWidth / (camera.position.z / 100);targetVertex.y = mouse.y * window.innerHeight / (camera.position.z / 100);}function animate() 
{requestAnimationFrame( animate );render();		update();
}function update()
{if ( keyboard.pressed("z") ) {	  // do something}// find intersections// create a Ray with origin at the mouse position//   and direction into the scene (camera direction)var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );projector.unprojectVector( vector, camera );var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );// create an array containing all objects in the scene with which the ray intersectsvar intersects = ray.intersectObjects( scene.children );// INTERSECTED = the object in the scene currently closest to the camera //		and intersected by the Ray projected from the mouse position 	// if there is one (or more) intersectionsif ( intersects.length > 0 ){// if the closest object intersected is not the currently stored intersection objectif ( intersects[ 0 ].object != INTERSECTED ) {// restore previous intersection object (if it exists) to its original colorif ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );// store reference to closest object as current intersection objectINTERSECTED = intersects[ 0 ].object;// store color of closest object (for later restoration)INTERSECTED.currentHex = INTERSECTED.material.color.getHex();// set a new color for closest objectINTERSECTED.material.color.setHex( 0xffff00 );}} else // there are no intersections{// restore previous intersection object (if it exists) to its original colorif ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );// remove previous intersection object reference//     by setting current intersection object to "nothing"INTERSECTED = null;}controls.update();stats.update();
}function render() 
{selectionTriangle.geometry.verticesNeedUpdate = true;//mesh.geometry.normalsNeedUpdate = true;renderer.render( scene, camera );
}