three.js官网即开发dome

three.js官方
官网地址：threejs官网网址
three.js中文网
http://www.webgl3d.cn/

根据官网文档
安装依赖
安装threejs和构建工具vite

# three.js
npm install --save three

# vite
npm install --save-dev vite

在终端运行

npx vite

为啥用npx，npx是什么？
npx 与 Node.js 一同安装，可运行 Vite 等命令行程序，这样你就不必自己在 node_modules/ 中搜索正确的文件。

1.创建3D场景

	import * as THREE from 'three';
	//引入轨道控制器
	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
	// 创建3d场景
	const scene = new THREE.Scene();
    //创建相机
      const camera = new THREE.PerspectiveCamera(75, 100 / 200, 0.1, 100);
      camera.position.z = 1;
      camera.position.y = 1;
      //创建图形
      const geometry = new THREE.BoxGeometry();
      //创建材质
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      //创建网格
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);
      //添加网格地面
      const gridHelper = new THREE.GridHelper(30, 30);
      scene.add(gridHelper);

      //创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      renderer.setAnimationLoop( animate );
      document.body.appendChild(renderer.domElement);
      //创建轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement);
      //监听轨道控制器
      controls.addEventListener('change', function () {
        // renderer.render(scene, camera);
      });
      //添加动画效果
      function animate(time) {
        requestAnimationFrame(animate);
        cube.rotation.x = time /2000;
        cube.rotation.y = time /1000;
        controls.update();//添加轨道控制器
        renderer.render(scene, camera);//进行渲染
      }

2.轨道控制器（OrbitControls）
是附加组件，需要单独引入

/引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

属性（开发时查看官方文档）

 	//创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    //监听轨道控制器
    controls.addEventListener('change', function () {
        //监听
    });
	//添加阻尼
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    //自动旋转
    controls.autoRotate = true;

3.三维坐标轴（AxesHelper）
用于简单模拟3个坐标轴的对象.
红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

4.材质贴图和环境贴图
map材质贴图

 //创建纹理
      const texture = new THREE.TextureLoader().load( "textures/mu.jpg" );
       //创建图形
      const geometry = new THREE.BoxGeometry(1,1,1);
      //创建材质
      const material = new THREE.MeshBasicMaterial({ 
        // color: 0x00ff00 //16进制
        map: texture
      });

立体纹理（cubeTexture）
alphaMap环境贴图

5.threejs_dome项目开发
1>项目搭建(有Node.js,脚手架的环境）

vue create threejs_dome

选择vue3搭建项目搭建完成后下载相关依赖
下载安装three.js (注意版本)

npm i threejs

下载UI组件element- plus，icon库，工具库lodash，less，less-loader

npm i element-plus 
npm i  @element-plus/icons-vue vue-router lodash 
npm i less less-loader

2> 路由配置
在router.js文件配置路由

import { createRouter,createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login.vue')
  }
  //自行定义路由....
]

export default createRouter({
  history: createWebHistory(),
  routes
})

路由挂载到main.js文件
App文件加路由显示占位
3> threejs_dome文件

import {onMounted} from 'vue' //引入生命周期
import * as THREE from 'three' //引入three
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' //引入轨道控制器


//定义变量
let container //容器  
const Image_bg = new URL('../assets/images/bg.jpg',import.meta.url) .href//加载图片
const Image_map = new URL('../assets/images/map.jpg',import.meta.url) .href//纹理贴图
let width //宽度
let height //高度
let depth = 1400 //深度
let zAxis  //相机在z轴的位置
let camera //相机
let scene //场景
let renderer //渲染器
let sphere //球体网格

onMounted(() => {
  container = document.getElementById('login-three-container')
  width = container.clientWidth
  height = container.clientHeight
  initScene()//初始化场景
  initSceneBg()//初始化背景
  initCamera()//初始化相机
  initSphere() //初始化球体
  initLight()//初始化灯光
  initOrbitControls()//初始化控制器
  initRenderer()//初始化渲染器
  animate()//动画
})
 

//场景
  const initScene = () => {
    scene = new THREE.Scene() //场景
    scene.fog = new THREE.Fog(0x000000, 0, 10000)//雾
  }
  //背景
  const initSceneBg = () =>{
    //创建纹理
    new THREE.TextureLoader().load(Image_bg,(texture) =>{
      //创建立方体
      const geometry = new THREE.BoxGeometry(width, height, depth)
      //材质
      const material = new THREE.MeshBasicMaterial({ map: texture,side: THREE.BackSide })//side 显示位置
      //网格
      const mesh = new THREE.Mesh(geometry, material)
      //添加场景
      scene.add(mesh)
    })
    const geometry = new THREE.BoxGeometry(100, 100, 100)
    const material = new THREE.MeshBasicMaterial({ map: texture })

  }
  //相机
  const initCamera = () => {
    //视野夹角
    const fov = 15
    //相机距离物体的距离(已知一条边:物体的宽度/2，算出相机距离物体的距离,Math.PI是180除以12等于15夹角)
    const distance = width / 2 /Math.tan( Math.PI / 12)
    zAxis = Math.floor(distance - depth / 2 )//有可能出现小数用Math.floor取整照相机z轴距离
    camera.position.set(0, 0, zAxis)
    camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000)
    //设置相机所在的位置
    camera.position.set(0, 0, zAxis)
    //相机看向原点
    camera.lookAt(0, 0, 0)
  }
  //创建球体
  const initSphere = () => {
    const geometry = new THREE.SphereGeometry(50, 64, 32)
    //高光材质
    const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
    //添加纹理
    const texture = new THREE.TextureLoader().load(Image_map)
    material.map(texture)
    //位置
    sphere.position.set(1400, 200, -200)
    //网格
    sphere = new THREE.Mesh(geometry, material)
    scene.add(sphere)
  }
  //光照
  const initLight = () => {
  //环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 1)
  scene.add(ambientLight)
  //点光源
  const pointLight = new THREE.PointLight(0xffffff, 5, 0)
  //设置位置
  pointLight.position.set(0, 100, -200)
  scene.add(pointLight)
  }
  //球体的自转
  const renderSphere = () => {
    sphere.rotateY(0.001)
  }
  //渲染器
  const initRenderer = () => {
    renderer = new THREE.WebGLRenderer({ antialias: true })
    //定义渲染器的尺寸
    renderer.setSize(width, height)
    //renderer.setPixelRatio(window.devicePixelRatio)
    //挂载到容器中
    container.appendChild(renderer.domElement)
  }
  //轨道控制器
  const initOrbitControls = () => {
    const controls = new OrbitControls(camera, renderer.domElement)
    //能够控制属性
    controls.enable = true
    //自动更新
    controls.update()
  }
 //动画刷新
  const animate = () => {
    //重绘制
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
    renderSphere()//球体动画
  }