THREE.JS使用详细（three.js创建3d物体，three.js的使用方式）

向右看齐 2023-10-08 21:47 26阅读 0赞

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

#### 1、首先，在项目中需要下载threejs的相关依赖； ####

npm install three

#### 2、在js页面引入使用； ####

方式 1: 导入整个 three.js核心库
    import * as THREE from 'three';
    使用
    const scene = new THREE.Scene();
    
    
    方式 2: 仅导入你所需要的部分
    import { Scene } from 'three';
    使用
    const scene = new Scene();

#### **3、具体使用详细；** ####

引入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();

#### **4、实现的3d效果；** ####

**![1398fd41bc6445bda868c326665059ec.gif][]**

[1398fd41bc6445bda868c326665059ec.gif]: https://img-blog.csdnimg.cn/1398fd41bc6445bda868c326665059ec.gif