Three.JS第 1 篇，Three.js新手教学，如何使用Three.js（three.js使用流程，three.js使用详细，three.js的使用方式，three.js创建3d物体）_threejs

前言

Three.JS封装了WebGL的底层细节，是一款运行在浏览器中的 3D 引擎，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，目前在Git上已经拥有90k+的star。今天用three.js来构建一个物体和坐标轴

---

Three.js ～ 第 1 篇    ——    Three.JS具体使用详细  

一. 首先，在项目中下载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效果

---

五. 更多操作，请看

Three.JS官网https://threejs.org/

创作不易，感觉有用，就一键三连，感谢(●'◡'●)