Three.js Basic examples(1)

来源：互联网发布：eve作战网络装备编辑：程序博客网时间：2024/06/09 14:02
例子来源：http://stemkoski.github.io/Three.js/Materials-Solid.html
主要是把一些不理解的语句加上备注。
<!doctype html><html lang="en"><head>    <title>Materials - Solid (Three.js)</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">    <link rel=stylesheet href="css/base.css"/></head><body><script src="js/Three.js"></script><script src="js/Detector.js"></script><script src="js/Stats.js"></script><script src="js/OrbitControls.js"></script><script src="js/THREEx.KeyboardState.js"></script><script src="js/THREEx.FullScreen.js"></script><script src="js/THREEx.WindowResize.js"></script><!-- jQuery code to display an information button and box when clicked. --><script src="js/jquery-1.9.1.js"></script><script src="js/jquery-ui.js"></script><link rel=stylesheet href="css/jquery-ui.css" /><link rel=stylesheet href="css/info.css"/><script src="js/info.js"></script><div id="infoButton"></div><div id="infoBox" title="Demo Information">This three.js demo is part of a collection at<a href="http://stemkoski.github.io/Three.js/">http://stemkoski.github.io/Three.js/</a></div><!-- ------------------------------------------------------------ --><div id="ThreeJS" style="z-index: 1; position: absolute; left:0px; top:0px"></div><script>/*    Three.js "tutorials by example"    Author: Lee Stemkoski    Date: July 2013 (three.js v59dev) */// MAIN// standard global variablesvar container, scene, camera, renderer, controls, stats;var keyboard = new THREEx.KeyboardState();var clock = new THREE.Clock();// custom global variables自定义的全局变量var cube;init();animate();// FUNCTIONS        function init() {    // SCENE    scene = new THREE.Scene();    // CAMERA    var 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);  //将相机的中心点指向到scene.position所指向的位置    // RENDERER    if ( Detector.webgl )        renderer = new THREE.WebGLRenderer( {antialias:true} );    else        renderer = new THREE.CanvasRenderer();     renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);     container = document.getElementById( 'ThreeJS' );    container.appendChild( renderer.domElement );    // EVENTS    THREEx.WindowResize(renderer, camera);    THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });    // CONTROLS    controls = new THREE.OrbitControls( camera, renderer.domElement );    // STATS    stats = new Stats();    stats.domElement.style.position = 'absolute';    stats.domElement.style.bottom = '0px';    stats.domElement.style.zIndex = 100;    container.appendChild( stats.domElement );    // LIGHT    var light = new THREE.PointLight(0xffffff);    light.position.set(0,150,100);    scene.add(light);    // FLOOR    var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;     floorTexture.repeat.set( 10, 10 );    var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);    var floor = new THREE.Mesh(floorGeometry, floorMaterial);    floor.position.y = -0.5;    floor.rotation.x = Math.PI / 2;    scene.add(floor);    // SKYBOX/FOG    var 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);    scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );    ////////////    // CUSTOM //    ////////////    // Sphere parameters: radius, segments along width, segments along height    var sphereGeom =  new THREE.SphereGeometry( 50, 32, 16 );    // Three types of materials, each reacts differently to light.    var darkMaterial = new THREE.MeshBasicMaterial( { color: 0x000088 } );    var darkMaterialL = new THREE.MeshLambertMaterial( { color: 0x000088 } );    var darkMaterialP = new THREE.MeshPhongMaterial( { color: 0x000088 } );    // Creating three spheres to illustrate the different materials.    // Note the clone() method used to create additional instances    //    of the geometry from above.    var sphere = new THREE.Mesh( sphereGeom.clone(), darkMaterial );    sphere.position.set(-150, 50, 0);    scene.add( sphere );        var sphere = new THREE.Mesh( sphereGeom.clone(), darkMaterialL );    sphere.position.set(0, 50, 0);    scene.add( sphere );        var sphere = new THREE.Mesh( sphereGeom.clone(), darkMaterialP );    sphere.position.set(150, 50, 0);    scene.add( sphere );        // create a small sphere to show position of light    var lightbulb = new THREE.Mesh(         new THREE.SphereGeometry( 10, 16, 8 ),         new THREE.MeshBasicMaterial( { color: 0xffaa00 } )    );    scene.add( lightbulb );    lightbulb.position = light.position;}function animate() {    requestAnimationFrame( animate );    render();           update();}function update(){    if ( keyboard.pressed("z") )     {         // do something    }    controls.update();    stats.update();}function render() {    renderer.render( scene, camera );}</script></body></html>
0 0