three.js画一个几何体

1、安装three.js依赖

npm install three --save

2、直接上代码运行

import * as THREE from "three";
//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// console.log(THREE);

const scene = new THREE.Scene(); //1.创建一个场景

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
); //2.创建一个透视相机

camera.position.set(0, 0, 10); //设置相机位置，对应x,y,z坐标
scene.add(camera); //将相机添加到场景中

// 添加物体
// 创建几何体对象
const cubeGeomentry = new THREE.BoxGeometry(1, 1, 1); //几何体的宽高深度
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); //设置几何体材质，初始化颜色
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeomentry, cubeMaterial);
// 修改几何体的位置
cube.position.set(2,3,1);
cube.rotation.set(Math.PI / 4,0,0);
// 将几何体添加到场景中
scene.add(cube);

//初始化渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
//将渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement);

//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

//添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

//设置时钟
const clock = new THREE.Clock();

//渲染方法
function render() {
    //获取始终运行的总时长
    // let time = clock.getElapsedTime();
    let deltaTime = clock.getDelta();
    // console.log('时钟总时长', time);
    console.log('两次时间间隔', deltaTime);

    // 使用渲染器，通过相机将场景渲染进来
    renderer.render(scene, camera);
    // 告诉浏览器下一帧继续渲染
    requestAnimationFrame(render);
}

//初始化调用一次
render();