<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script type="text/javascript" script src="libs/three.js"></script> <script type="text/javascript" script src="libs/stats.min.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> <script> var renderer; var stats; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width, height); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); stats = new Stats(); //stats对象初始化 stats.domElement.style.position = 'absolute'; //将stats对象加入到html网页中,绝对坐标 stats.domElement.style.left = '0px';// (0,0)px,左上角 stats.domElement.style.top = '0px'; document.getElementById('canvas-frame').appendChild(stats.domElement); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 600; camera.up.x = 0;//camera.up 设置相机的倾斜角度，歪着拿相机，照片自然也不是水平的 camera.up.y = 0; camera.up.z = 0; camera.lookAt({ //镜头看着哪里呢？景物在动 x : 0, y : 0, z : 0 }); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { light = new THREE.PointLight(0x00FF00); light.position.set(0, 0,300); scene.add(light); } var cube; var mesh; function initObject() { var geometry = new THREE.CylinderGeometry( 10,15,40); var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} ); mesh = new THREE.Mesh( geometry,material); mesh.position.x = 100; mesh.position.y = 100; mesh.position.z = 100; scene.add(mesh); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); animation(); } function animation() { mesh.position.z+=1; renderer.render(scene, camera); requestAnimationFrame(animation); stats.update();//这个函数真好用 } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>
