简述：Three.js封装了WebGL的底层细节，是一款运行在浏览器中的 3D 引擎，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，目前在Git上已经拥有90k+的star。今天用three.js来构建一个物体和坐标轴
Three.js ～ 第 1 篇 —— Three.js具体使用流程详细
Three.js如何创建3D物体和坐标轴（多看注释）？
一. 首先，在项目中，需要下载threejs的相关依赖
npm install three //或者 cnpm install three //等等
二. 在JS页面引入使用
方式 1: 导入整个 three.js核心库 import * as THREE from 'three'; 使用 const scene = new THREE.Scene(); 方式 2: 仅导入你所需要的部分 import { Scene } from 'three'; 使用 const scene = new Scene();
三. 具体使用详细
引入threejs import * as three from "three"; 引入控制器 控制元素 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; 创建场景 const scene = new three.Scene(); 创建相机 const camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 设置相机位置 camera.position.set(0, 0, 10); 场景绑定相机 scene.add(camera); 创建几何体和材质 const cubeGeometry = new three.BoxGeometry(1, 1, 1); const subeMaterial = new three.MeshBasicMaterial({ color: 0xffff00 }); 根据几何体和材质创建物体 const cube = new three.Mesh(cubeGeometry, subeMaterial); 把物体添加到场景中 scene.add(cube); 初始化渲染器 const renderer = new three.WebGLRenderer(); 设置渲染器尺寸大小 renderer.setSize(window.innerWidth, window.innerHeight); 将渲染内容添加到body document.body.appendChild(renderer.domElement); //使用渲染器将相机里的场景渲染出来 //renderer.render(scene,camera); 创建控制器 const controls = new OrbitControls(camera, renderer.domElement); 创建添加坐标轴线体 const axesHelper = new three.AxesHelper(5); scene.add(axesHelper); 定义函数，实时渲染 function render() { 物体添加动画 cube.position.x += 0.05; if (cube.position.x > 5) { cube.position.x = 0 } 在函数中调用渲染器 renderer.render(scene, camera); 实时渲染函数 requestAnimationFrame(render); } render();
四. 实现的3d效果
