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