<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>threejs练习</title> <script type="text/javascript" src="three.js"></script> <style> *{margin:0;padding:0;} </style> </head> <body> <script> //1。thressjs中三大重建：场景、相机、渲染器 var scene=new THREE.Scene();//场景 //透视相机 var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); var renderer=new THREE.WebGLRenderer();//渲染器 //设置渲染器的大小为窗口的内高度，也就是内容区的宽度 renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); //2.添加物体到场景中 var geometry=new THREE.CubeGeometry(1,1,1); //THREE.CubeGeometry是一个几何体 var material=new THREE.MeshBasicMaterial({color:0x008080});//0x00ff00 var cube=new THREE.Mesh(geometry,material); scene.add(cube); //3.渲染。渲染循环 camera.position.z = 5; function render() { requestAnimationFrame(render); cube.rotation.x += 0.08;//设置x,y的移动长度 cube.rotation.y += 0.08; /*cube.rotation.z += 0.05;*/ renderer.render(scene, camera); } render(); </script> </body> </html>