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(涂聚文）
浙公网安备 33010602011771号