1、html页面样式

html,body{margin: 0; padding: 0; overflow: hidden}

2、引入js

<script src="../js/three.js"></script><script src="./js/jquery.min.js"></script>//Stats.js性能监控器，主要用于检测动画运行时的帧数<script src="./js/Stats.js"></script>//图形界面库,使用这个库可以很容易地创建出能够改变代码变量的界面组件<script src="./js/dat.gui.js"></script>

3、代码

//性能监控器输出容器<div id="stats"></div>$(function(){//统计功能的引入function initStats(){var stats = new Stats();//0 FPS 刷新频率,一秒渲染次数//1 MS 刷新周期，渲染一次时间stats.setMode(0);stats.domElement.style.position = "absolute";stats.domElement.style.left = "0px";stats.domElement.style.top = "0px";$("#stats").append(stats.domElement);return stats;}var stats = initStats();//定义dat.GUI需要修改的变量var controls = new function(){this.rotationSpeed = 0.02;this.bouncingSpeed = 0.03;}var gui = new dat.GUI();//变量传递给dat.GUI并限定取值范围gui.add(controls,"rotationSpeed",0,0.5);gui.add(controls,"bouncingSpeed",0,0.5);//屏幕尺寸var size = {"w": window.innerWidth,"h": window.innerHeight,//屏幕比例"s": window.innerWidth / window.innerHeight};//定义场景var scene = new THREE.Scene();//定义相机，参数一是角度，参数二屏幕比例，参数三最小可视范围，参数四最大可视范围var camera = new THREE.PerspectiveCamera(45,size.s,0.1,1000);//相机观察位置、及方向camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;camera.lookAt(scene.position);//定义渲染器var renderer = new THREE.WebGLRenderer();//设置场景背景色renderer.setClearColor(new THREE.Color(0xeeeeee));//设置场景尺寸renderer.setSize(size.w,size.h);//开启阴影renderer.shadowMapEnabled = true;//设置聚光灯光源var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40,60,-10);//开启阴影spotLight.castShadow = true;scene.add(spotLight);//定义坐标，参数为坐标的大小var axes = new THREE.AxesHelper(20);scene.add(axes);//定义模型//地板模型的形状var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);//模型材质var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc });var plane = new THREE.Mesh(planeGeometry,planeMaterial);//开启阴影plane.receiveShadow = true;plane.rotation.x = -0.5*Math.PI;//Math.PI = 180度plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;scene.add(plane);//立体体模型var cubeGeometry = new THREE.BoxGeometry(4,4,4);var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000,//wireframe是否开启模型的边框线wireframe: false});var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);//开启阴影cube.castShadow = true;cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;scene.add(cube);//球体模型var sphereGeometry = new THREE.SphereGeometry(4,20,20);var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff,//wireframe是否开启模型的边框线wireframe: false});var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);//开启阴影sphere.castShadow = true;sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;scene.add(sphere);//渲染到页面中$("body").append(renderer.domElement);//定义渲染函数及动画效果var step = 0;function renderScene(){stats.update();cube.rotation.x += controls.rotationSpeed;cube.rotation.y += controls.rotationSpeed;cube.rotation.z += controls.rotationSpeed;step += controls.bouncingSpeed;sphere.position.x = 20+(10*Math.cos(step));sphere.position.y = 4+(10*Math.abs(Math.sin(step)));//requestAnimationFrame是浏览器用于定时循环操作的一个接口requestAnimationFrame(renderScene);renderer.render(scene,camera);}renderScene();});</script>

运行效果：

左一为性能监控器输，右一为dat.GUI