1、使用vite创建一个html项目

 pnpm create vite my-three-app --template vanilla  

2、安装依赖

p

3、运行项目

p

4、清理项目

1、删除main.js内容

2、删除src下面其他内容

5、配置vite

1、在根目录下新建vite.config.js

import { defineConfig } from 'vite'


// https://vite.dev/config/
export default defineConfig({
  base:"/",
  publicDir:"public",
  server:{
    port:5001,
    open:true,
  },
  build:{
    rollupOptions:{
      input:{
        main:"index.html",  //可以配置多个html，用于写不同的测试效果
        test:"test.html",
      }
    }
  }
})

6、安装threejs

 pnpm install three@0.178.0 --save

7、3D基本概念 场景Scene、相机Camera、渲染器Renderer

8、案例1，创建一个正方体

1、效果如下

2、步骤代码如下

1、在main.js中引入threejs

//引入threejs
import * as THREE from 'three';

//引入轨道控制器扩展库
//平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。
import { OrbitControls } from "three/examples/jsm/Addons.js";

2、创建场景

//创建3D场景对象Scene
const scene = new THREE.Scene();

3、创建相机

// 实例化一个透视投影相机对象
const width = window.innerWidth; //宽度
const height = window.innerHeight; //高度
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(200, 200, 200); 
camera.lookAt(0, 0, 0);

4、创建物体mesh（立方体）

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(30,30,30);
//外观材质
 const material = new THREE.MeshBasicMaterial({
     color: 0xffee00,//0xffee00
 }); 
// 物体，两个参数分别为几何体geometry、材质material
const mesh1 = new THREE.Mesh(geometry, material); //网格模型对象Mesh
// 默认位置
mesh1.position.set(0,0,0);
//添加物体到常见
scene.add(mesh1);

5、创建渲染器

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera);
//渲染到body
document.body.appendChild(renderer.domElement);

到这里已经可以看到立方体了。后面的为辅助效果

6、添加辅助坐标轴 X=红色 Y=绿色 Z=蓝色

// 添加辅助坐标轴
const axisHelper = new THREE.AxesHelper(500);
scene.add(axisHelper);

7、添加相机辅助

const controls = new OrbitControls( camera, renderer.domElement );//OrbitControls 无 辅助旋转 操作球

// 渲染循环函数
function animate() {
    requestAnimationFrame(animate);

    // 更新轨道控制器
    controls.update();

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

// 启动渲染循环
animate();

到这里运行代码既可以看到效果