three.Js: Screen size change
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-moible-web-app-capable" content="yes"> <meta name="apple-moible-web-app-status-bar-style" content="black"> <title>Example 01.06 - Screen size change</title> <meta content=" Three.js r95" name="keywords"> <meta content=" Three.js r95" name="description"> <meta name="author" content="Geovin Du"> <meta itemprop="name" content="Car Visualizer"> <meta itemprop="image" content="shareImageCarVisualizer.jpg"> <meta itemprop="description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes."> <meta property="og:image" content="shareImageCarVisualizer.jpg"> <meta name="description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes." /> <meta property="og:type" content="website"> <meta property="og:title" content="Car Visualizer" /> <meta property="og:image" content="shareImageCarVisualizer.jpg" /> <meta property="og:url" content="http://threejs.org/" /> <meta property="og:description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes." /> <!-- For Chrome for Android: --> <link rel="icon" sizes="192x192" href="touch-icon-192x192.png"> <!-- For iPhone 6 Plus with @3× display: --> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png"> <!-- For iPad with @2× display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png"> <!-- For iPad with @2× display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <!-- For iPhone with @2× display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png"> <!-- For iPhone with @2× display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png"> <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px --> <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" /> <link rel="bookmark" href="/favicon.ico" type="image/gif" /> <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script> <script type="text/javascript" src="../libs/util/Stats.js"></script> <script type="text/javascript" src="../libs/util/dat.gui.js"></script> <script type="text/javascript" src="js/util.js"></script> <script type="text/javascript"> function init() { // listen to the resize events 监听窗体大小事件 window.addEventListener('resize', onResize, false); var camera;//摄像机 var scene;//场景 var renderer; //渲染 // initialize stats var stats = initStats(); // create a scene, that will hold all our elements such as objects, cameras and lights. scene = new THREE.Scene(); // create a camera, which defines where we're looking at. camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // create a render and set the size renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0x000000)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; // initialize the trackball controls and the clock which is needed var trackballControls = initTrackballControls(camera, renderer); var clock = new THREE.Clock(); // create the ground plane var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1); var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // rotate and position the plane plane.rotation.x = -0.5 * Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; // add the plane to the scene scene.add(plane); // create a cube var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; // position the cube cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; // add the cube to the scene scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff }); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // position the sphere sphere.position.x = 20; sphere.position.y = 0; sphere.position.z = 2; sphere.castShadow = true; // add the sphere to the scene scene.add(sphere); // position and point the camera to the center of the scene camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // add subtle ambient lighting var ambienLight = new THREE.AmbientLight(0x353535); scene.add(ambienLight); // add spotlight for the shadows var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-10, 20, -5); spotLight.castShadow = true; scene.add(spotLight); // add the output of the renderer to the html element document.getElementById("webgl-output").appendChild(renderer.domElement); // call the render function var step = 0; var controls = new function () { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }; var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5); gui.add(controls, 'bouncingSpeed', 0, 0.5); // attach them here, since appendChild needs to be called first 可以旋转场景 var trackballControls = initTrackballControls(camera, renderer); var clock = new THREE.Clock(); render(); function render() { // update the stats and the controls trackballControls.update(clock.getDelta()); stats.update(); // rotate the cube around its axes cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; // bounce the sphere up and down step += controls.bouncingSpeed; sphere.position.x = 20 + (10 * (Math.cos(step))); sphere.position.y = 2 + (10 * Math.abs(Math.sin(step))); // render using requestAnimationFrame requestAnimationFrame(render); renderer.render(scene, camera); } //根据窗体的大小改变,有一定的算法 function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } } </script> <link rel="stylesheet" href="../css/default.css"> </head> <body> <div id="webgl-output"></div> <!-- Javascript code that runs our Three.js examples --> <script type="text/javascript"> (function () { // your page initialization code here // the DOM will be available here init() })(); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-moible-web-app-capable" content="yes"> <meta name="apple-moible-web-app-status-bar-style" content="black"> <title>Example 02.04 - Geometries</title> <meta content=" Three.js r95" name="keywords"> <meta content=" Three.js r95" name="description"> <meta name="author" content="Geovin Du"> <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" /> <link rel="bookmark" href="/favicon.ico" type="image/gif" /> <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ConvexGeometry.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/QuickHull.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ParametricGeometries.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/utils/SceneUtils.js"></script> <script type="text/javascript" src="../libs/util/Stats.js"></script> <script type="text/javascript" src="../libs/util/dat.gui.js"></script> <script type="text/javascript" src="js/util.js"></script> <script type="text/javascript"> function init() { // listen to the resize events 监听窗体大小事件 window.addEventListener('resize', onResize, false); var stats = initStats(); // create a scene, that will hold all our elements such as objects, cameras and lights. var scene = new THREE.Scene(); // create a camera, which defines where we're looking at. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // create a render and set the size var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0x000000)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; // create the ground plane var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1); var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // rotate and position the plane plane.rotation.x = -0.5 * Math.PI; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; // add the plane to the scene scene.add(plane); // position and point the camera to the center of the scene camera.position.x = -50; camera.position.y = 30; camera.position.z = 20; camera.lookAt(new THREE.Vector3(-10, 0, 0)); // add subtle ambient lighting var ambientLight = new THREE.AmbientLight(0x555555); scene.add(ambientLight); // add spotlight for the shadows var spotLight = new THREE.SpotLight(0xffffff, 1.2, 150, Math.PI / 4, 0, 2); spotLight.shadow.mapSize.height = 1024; spotLight.shadow.mapSize.width = 1024; spotLight.position.set(-40, 30, 30); spotLight.castShadow = true; scene.add(spotLight); // add geometries addGeometries(scene); // add the output of the renderer to the html element document.getElementById("webgl-output").appendChild(renderer.domElement); // call the render function var step = 0; //添加几何体 function addGeometries(scene) { var geoms = []; geoms.push(new THREE.CylinderGeometry(1, 4, 4)); // basic cube geoms.push(new THREE.BoxGeometry(2, 2, 2)); // basic spherer geoms.push(new THREE.SphereGeometry(2)); geoms.push(new THREE.IcosahedronGeometry(4)); // create a convex shape (a shape without dents) // using a couple of points // for instance a cube var points = [ new THREE.Vector3(2, 2, 2), new THREE.Vector3(2, 2, -2), new THREE.Vector3(-2, 2, -2), new THREE.Vector3(-2, 2, 2), new THREE.Vector3(2, -2, 2), new THREE.Vector3(2, -2, -2), new THREE.Vector3(-2, -2, -2), new THREE.Vector3(-2, -2, 2) ]; geoms.push(new THREE.ConvexGeometry(points)); // create a lathgeometry //http://en.wikipedia.org/wiki/Lathe_(graphics) var pts = []; //points array - the path profile points will be stored here var detail = .1; //half-circle detail - how many angle increments will be used to generate points var radius = 3; //radius for half_sphere for (var angle = 0.0; angle < Math.PI; angle += detail) //loop from 0.0 radians to PI (0 - 180 degrees) pts.push(new THREE.Vector3(Math.cos(angle) * radius, 0, Math.sin(angle) * radius)); //angle/radius to x,z geoms.push(new THREE.LatheGeometry(pts, 12)); // create a OctahedronGeometry geoms.push(new THREE.OctahedronGeometry(3)); // create a geometry based on a function geoms.push(new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius3d, 20, 10)); // geoms.push(new THREE.TetrahedronGeometry(3)); geoms.push(new THREE.TorusGeometry(3, 1, 10, 10)); geoms.push(new THREE.TorusKnotGeometry(3, 0.5, 50, 20)); var j = 0; for (var i = 0; i < geoms.length; i++) { var cubeMaterial = new THREE.MeshLambertMaterial({ wireframe: true, color: Math.random() * 0xffffff }); var materials = [ new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }), new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true }) ]; var mesh = THREE.SceneUtils.createMultiMaterialObject(geoms[i], materials); mesh.traverse(function (e) { e.castShadow = true }); //var mesh = new THREE.Mesh(geoms[i],materials[i]); //mesh.castShadow=true; mesh.position.x = -24 + ((i % 4) * 12); mesh.position.y = 4; mesh.position.z = -8 + (j * 12); if ((i + 1) % 4 == 0) j++; scene.add(mesh); } } //工具栏 var controls = new function () { this.rotationSpeed = 0.02; //默认值 }; //加载工具栏 var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5); var trackballControls = initTrackballControls(camera, renderer); var clock = new THREE.Clock(); render(); function render() { trackballControls.update(clock.getDelta()); stats.update(); // rotate the cubes around its axes 工具栏设置变化值 scene.traverse(function (e) { if (e instanceof THREE.Mesh && e != plane) { e.rotation.x += controls.rotationSpeed; e.rotation.y += controls.rotationSpeed; e.rotation.z += controls.rotationSpeed; } }); // render using requestAnimationFrame requestAnimationFrame(render); renderer.render(scene, camera); } //根据窗体的大小改变,有一定的算法 function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } } </script> <link rel="stylesheet" href="../css/default.css"> </head> <body> <div id="webgl-output"> </div> <!-- Javascript code that runs our Three.js examples --> <script type="text/javascript"> (function () { // your page initialization code here // the DOM will be available here init() })(); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-moible-web-app-capable" content="yes"> <meta name="apple-moible-web-app-status-bar-style" content="black"> <title>Example 02.08 - Cameras,Audio</title> <meta content=" Three.js r95" name="keywords"> <meta content=" Three.js r95" name="description"> <meta name="author" content="Geovin Du"> <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" /> <link rel="bookmark" href="/favicon.ico" type="image/gif" /> <style> div { display: block; } #fwa { width: 100px; height: 100px; left: 0; bottom: 0; position: absolute; opacity: 0; z-index: 10 } .buttonBG { z-index: 2; background-color: #000; position: absolute; border: 1px solid #fff; } .button { text-align: center; font-size: 1em; color: #eee; line-height: 40px; z-index: 40; position: absolute; } #topLeft { left: 15px; } #topLeft, #topRight { width: 130px; height: 40px; position: absolute; z-index: 2; top:150px; } #topRight { right: 15px; } #topLeft, #topRight { width: 130px; height: 40px; position: absolute; z-index: 2; top: 150px; } #toolBar { width: 590px; height: 40px; left: 50%; margin-left: -145px; bottom: 40px; z-index: 2; position: absolute; color:#ff0000; } </style> <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ConvexGeometry.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/QuickHull.js"></script> <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ParametricGeometries.js"></script> <script type="text/javascript" src="../libs/util/Stats.js"></script> <script type="text/javascript" src="../libs/util/dat.gui.js"></script> <script type="text/javascript" src="js/util.js"></script> <script type="text/javascript"> function init() { window.addEventListener('resize', onResize, false); var stats = initStats(); var clock = new THREE.Clock(); // create a scene, that will hold all our elements such as objects, cameras and lights. var scene = new THREE.Scene(); initDefaultLighting(scene); // create a camera, which defines where we're looking at. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 120; camera.position.y = 60; camera.position.z = 180; /*1 //声音 var analyser; // create an AudioListener and add it to the camera var listener = new THREE.AudioListener(); camera.add(listener); // create an Audio source var sound = new THREE.Audio(listener); // load a sound and set it as the Audio object's buffer var audioLoader = new THREE.AudioLoader(); audioLoader.load('../assets/audio/cow.ogg', function (buffer) { sound.setBuffer(buffer); sound.setLoop(false); // 一次 sound.setVolume(0.5); sound.play(); }); // scene(audioLoader); // create an AudioAnalyser, passing in the sound and desired fftSize analyser = new THREE.AudioAnalyser(sound, 32); // get the average frequency of the sound var data = analyser.getAverageFrequency(); */ //2 声音 var listener1 = new THREE.AudioListener(); camera.add(listener1); // controls = new THREE.FirstPersonControls(camera); // create a render and set the size var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0x000000)); renderer.setSize(window.innerWidth, window.innerHeight); // create the ground plane var planeGeometry = new THREE.PlaneGeometry(180, 180); var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); // rotate and position the plane plane.rotation.x = -0.5 * Math.PI; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; // add the plane to the scene scene.add(plane); var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) { for (var i = 0; i < planeGeometry.parameters.width / 5; i++) { var rnd = Math.random() * 0.75 + 0.25; var cubeMaterial = new THREE.MeshLambertMaterial(); cubeMaterial.color = new THREE.Color(rnd, 0, 0); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5); cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5); cube.position.y = 2; scene.add(cube); } } var lookAtGeom = new THREE.SphereGeometry(3); var lookAtMesh = new THREE.Mesh(lookAtGeom, new THREE.MeshLambertMaterial({ color: 0x00ff00 })); scene.add(lookAtMesh); //var cube = new THREE.BoxGeometry(40, 40, 40); var material_1 = new THREE.MeshBasicMaterial({ color: 0xffffff, map: THREE.ImageUtils.loadTexture("../assets/textures/animals/cow.png") }); // sound spheres var mesh1 = new THREE.Mesh(cubeGeometry, material_1); mesh1.position.set(0, 20, 100); scene.add(mesh1); /**/ //声音 var posSound1 = new THREE.PositionalAudio(listener1); var audioLoader = new THREE.AudioLoader(); audioLoader.load('../assets/audio/cow.ogg', function (buffer) { posSound1.setBuffer(buffer); posSound1.setRefDistance(30); posSound1.play(); posSound1.setRolloffFactor(10); posSound1.setVolume(2.5); //音量 posSound1.setLoop(false);//不循环false true }); mesh1.add(posSound1); // ground var helper = new THREE.GridHelper(500, 10); helper.position.y = 0.1; scene.add(helper); var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7); directionalLight.position.set(-20, 40, 60); scene.add(directionalLight); // add subtle ambient lighting var ambientLight = new THREE.AmbientLight(0x292929); scene.add(ambientLight); // add the output of the renderer to the html element document.getElementById("webgl-output").appendChild(renderer.domElement); // call the render function var step = 0; var controls = new function () { this.perspective = "Perspective"; this.switchCamera = function () { if (camera instanceof THREE.PerspectiveCamera) { camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500); camera.position.x = 120; camera.position.y = 60; camera.position.z = 180; camera.lookAt(scene.position); this.perspective = "Orthographic"; } else { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 120; camera.position.y = 60; camera.position.z = 180; camera.lookAt(scene.position); this.perspective = "Perspective"; } }; }; var gui = new dat.GUI(); gui.add(controls, 'switchCamera'); gui.add(controls, 'perspective').listen(); // make sure that for the first time, the // camera is looking at the scene //camera.lookAt(scene.position); // render(); animate(); function animate() { requestAnimationFrame(animate); render(); } var step = 0; function render() { //var delta = clock.getDelta(), time = clock.getElapsedTime() * 5; //controls.update(delta); stats.update(); // render using requestAnimationFrame step += 0.02; if (camera instanceof THREE.Camera) { var x = 10 + (100 * (Math.sin(step))); camera.lookAt(new THREE.Vector3(x, 10, 0)); lookAtMesh.position.copy(new THREE.Vector3(x, 10, 0)); } // .position.x = 20+( 10*(Math.cos(step))); requestAnimationFrame(render); renderer.render(scene, camera); } //根据窗体的大小改变,有一定的算法 function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } } </script> <link rel="stylesheet" href="../css/default.css"> </head> <body> <!-- Div which will hold the Output --> <div id="webgl-output"> </div> <div id="topLeft"><div id="topLeftButton0" style="visibility: visible; left: 0px;"><div id="backgroundtopLeftButton0" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 0px;"></div><div id="buttontopLeftButton0" class="button" style="width: 40px; height: 40px; left: 0px;"><img src="../../gui/fullscreen.png"></div></div><div id="topLeftButton1" style="visibility: visible; left: 45px;"><div id="backgroundtopLeftButton1" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 45px;"></div><div id="buttontopLeftButton1" class="button" style="width: 40px; height: 40px; left: 45px;"><img src="../../gui/camera.png"></div></div><div id="topLeftButton2" style="visibility: visible; left: 90px;"><div id="backgroundtopLeftButton2" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 90px;"></div><div id="buttontopLeftButton2" class="button" style="width: 40px; height: 40px; left: 90px;"><img src="../../gui/plus.png"></div></div></div> <div id="topRight"><div id="topRightButton0" style="visibility: visible; right: 0px;"><div id="backgroundtopRightButton0" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 0px;"></div><div id="buttontopRightButton0" class="button" style="width: 40px; height: 40px; right: 0px;"><img src="../../gui/facebook.png"></div></div><div id="topRightButton1" style="visibility: visible; right: 45px;"><div id="backgroundtopRightButton1" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 45px;"></div><div id="buttontopRightButton1" class="button" style="width: 40px; height: 40px; right: 45px;"><img src="../../gui/google.png"></div></div><div id="topRightButton2" style="visibility: visible; right: 90px;"><div id="backgroundtopRightButton2" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 90px;"></div><div id="buttontopRightButton2" class="button" style="width: 40px; height: 40px; right: 90px;"><img src="../../gui/twitter.png"></div></div></div> <div id="toolBar"><div id="audioButton" style="visibility: visible; left: 255px;"><div id="backgroundaudioButton" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.5; left: 255px;"></div><div id="buttonaudioButton" class="button" style="width: 40px; height: 40px; left: 255px;"><img src="../../gui/volumeOn.png"></div></div></div> <!-- Javascript code that runs our Three.js examples --> <script type="text/javascript"> (function () { // your page initialization code here // the DOM will be available here init() })(); </script> </body> </html>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文)