Threejs：创建几何体——图元

 导入轨道控制器包

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

 

BoxGeometry盒子+MeshBasicMaterial

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

其他辅助添加

// 设置坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 设置轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
camera.position.z = 5;
// 设置地面网格
var gridHelper = new THREE.GridHelper(600, 30, 'yellow', 'gray');
gridHelper.position.y = -100;
gridHelper.position.x = 0;
scene.add(gridHelper);

 

使其动态起来

// 设置动画
function animate() {
  // 使物体旋转起来
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  // cube2.position.y+= 0.01;
  // cube2.rotation.y += 0.01;
  // if(cube2.position.y>2){
  //     cube2.position.y=0;
  // };

  // 渲染场景
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();