<!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>