<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { margin: 0; padding: 0; } div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> </head> <body> <div id="canvas-frame"></div> <script src="js/three.js"></script> <script src="js/Stats.js"></script> <script src="js/tween.min.js"></script> <script> //定义一些需要的变量 var renderer, camera, scene, light, object,stats,TWEEN; var width, height; //初始化three 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.domElement.style.position="absolute"; stats.domElement.style.left="0px"; 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.y = 1; 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.AmbientLight(0xFF0000); light.position.set(100, 100, 200); scene.add(light); 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( 100,150,400); var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} ); mesh = new THREE.Mesh( geometry,material); mesh.position = new THREE.Vector3(0,0,0); scene.add(mesh); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); animation(); } function animation() { mesh.position.x-=1; renderer.render(scene, camera); requestAnimationFrame(animation); //调用stats.update()函数来统计时间和帧数 stats.update(); } window.onload = threeStart(); </script> </body> </html>