import * as THREE from 'three';
// step 1
// 场景
const scene = new THREE.Scene();
// PerspectiveCamera 透视相机，参数一：视野角度（FOV)；参数二：长宽比，参数三：近界面 参数四：远截面
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染尺寸
renderer.setSize( window.innerWidth, window.innerHeight );
// 将渲染器的dom元素添加到html
document.body.appendChild( renderer.domElement );

// step 2
// 创建立方体对象
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 创建材质对象
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 创建网状物对象，包含立方体以及作用在立方体上的材质
const cube = new THREE.Mesh( geometry, material );
// 将物体添加到坐标 (0,0,0)，此时摄像机和立方体彼此在一起
scene.add( cube );
// 将摄像机稍向外移动一些，不让摄像机和物体贴在一起
camera.position.z = 5;

// step 3
// 渲染场景
function animate(){
    requestAnimationFrame(animate)

    // 旋转动画
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera)
}
animate();