threejs旋转入门

/*
 * @Author: pym
 * @Date: 2022-01-04 11:51:03
 * @LastEditors: pym
 * @Description: 
 * @LastEditTime: 2022-09-17 01:33:12
 */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import * as THREE from 'three';

// init
// 相机
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 0.5;
// 场景
const scene = new THREE.Scene();

// 几何体
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
// 材质
const material = new THREE.MeshNormalMaterial();
// 对象 需要几何对象 和 材质
const mesh = new THREE.Mesh(geometry, material);
// 把地图加入场景
scene.add(mesh);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置画布的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置动画
renderer.setAnimationLoop(animation);
// 把画布加入dom
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);

// animation()

function animation(time) {

  mesh.rotation.x = time / 2000;
  mesh.rotation.y = time / 1000;
  console.log(time)
  renderer.render(scene, camera);

}
// function start() {
//   // fetch('/tripdocs/test/api', { method: 'POST' });
// }

// setTimeout(() => {
//   start();
// }, 1000);
// function Three() {
//   return 
// }
// ReactDOM.render(<div className="app">qqq</div>, document.getElementById('root'));