Three.js Basic examples(1)
2016-07-31 10:48
176 查看
例子来源: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 variables var 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 = af0b 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>
相关文章推荐
- three.js 源码注释(四十六)Material /LineBasicMaterial.js
- 33 Three.js的材质THREE.MeshBasicMaterial
- Three.js 教程和示例(Tutorials and Examples)
- three.js 04-01 之 MeshBasicMaterial 材质
- three.js 源码注释(四十八)Material /MeshBasicMaterial.js
- Yomotsu 使用 THREE.js 创建的示例(Examples created by Yomotsu using THREE.js)
- three.js 04-09 之 LineBasicMaterial 材质
- Creating a Basic Site With node.js and ExpresS
- phantomjs/examples/echoToFile.js at master · ariya/phantomjs
- 关于怎样使用three.js的小教程<一>
- three.js使用二:修复three.js的纹理路径多一个\的问题
- 【three.js详解之一】入门篇
- THREE.js 学习笔记(前记)
- three.js使用三:加载有纹理的模型,结合blender和convert_obj_three.py
- Convert a model from Maya to WebGL for use with THREE.js
- 利用HTML5构筑物理模拟环境~ WebGL库Three.js入门(1/3)
- three.js使用一:本机建网站浏览example
- Three Basic Sort for using C#
- 原生态webgl--DEMO,以后可能选择Three.JS来代替了,代码网上找的,参考引用
- 结合Blender和Three.js使用WEBGL