<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script src="three.js"></script> <script type="text/javascript"> //基础知识恶补 //THREE.Scene： // 场景图 // 是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象 var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { //创建相机 camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10); camera.position.z = 1; //创建场景 scene = new THREE.Scene(); //创建几何体 - 立方体 geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);//参数：长宽高 //创建材质 material = new THREE.MeshNormalMaterial(); //创建网格，几何体是不能被渲染的，只有几何体和材质 结合成网格 才能被渲染到屏幕上 mesh = new THREE.Mesh(geometry, material); //添加到场景 scene.add(mesh); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); } </script> </body> </html>