THREEJS学习第一天

threejs的安装

npm i three

1. 在vue中通过 import * as THREE from 'three'引入

2. threejs的三要素 场景 scene、  相机 camera、渲染器 renderer

创建一个基础的盒子

代码：

1. import * as THREE from 'three';
   const scene = new THREE.Scene() // 创建场景
   // 创建透视相机
   const camera = new THREE.PerspectiveCamera(
       45, // 视角
       window.innerWidth / window.innerHeight; // 宽高比
       0.1,//近平面
       1000, // 远平面
   )
   
   // 创建渲染器
   const renderer = new THREE.WEBGL1Renderer();
   // 设置渲染器尺寸
   renderer.setSize(window.innerWidth,window.innerHeight);
   //将渲染器挂载在容器中
   document.body.appendChild(renderer.domElement);
   
   // 创建几何体 (立方体)
   const geometry = new THREE.BoxGeometry(1,1,1)
   
   // 创建材料 
   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   
   // 创建网格
   const cube = new THREE.Mesh(geometry, material);
   
   // 将物体添加进场景
   scene.add(cube);
   
   //设置相机位置
   camera.position.z = 5;
   camera.position.x = 0;
   camera.position.y = 0;
   
   // 设置圆点 默认就是(0,0,0)
   camera.lookAt(0,0,0)
   
   // 渲染
    renderer.render(scene, camera);
   
   
   
   
   
   

运行结果：

         忽略掉图片中的坐标轴 

一、场景

        在threejs中只有一个场景 ，场景是所有物体的容器 通过new创建一个场景对象

const scene = new THREE.Scene()

 方法：

        

方法名	参数	作用
.add()	obj(所需添加的物体)	将物体添加进场景
.remove()	obj(所要移除的物体)	将物体移出场景

 

二、相机

        在threejs中相机决定着场景中的物体以什么角度展示在用户的眼前。在threejs中有多种相机。

                1. 透视相机 PerspectiveCamera(视角，宽高比，近平面，远平面) 

                        透视相机就是根据物体的近大远小的原理展示物体

                       参数

                        视角：用户可以看到的范围 当视角为0 用户可以看到的场景为0，视角为180，用户可以看到非常广阔的场景

                        宽高比：实际窗口的纵横比，即宽度除以高度。这个值越大，说明你宽度越大

                        近平面：用户看到的最近的截面的距离

                        远平面： 用户所看到的最远的截面的距离

 三、渲染器

        渲染器的作用就是将相机拍摄的照片放进浏览器中。

        创建渲染器

const renderer = new THREE.WebGL1Renderer()

               属性

属性	默认值	作用
antialias	true/ false	是否开启反齿距
alpha	true/false	背景色是否为透明
maxLights	int	最大灯光数,我们的场景中最多能够添加多少个灯光。
logarithmicDepthBuffer	true/false	模型的重叠部位不停的闪烁。这便是Z-Fighting问题， 为解决这个问题，我们可以采用该种方法(详细解释大家感兴趣参照https://www.cnblogs.com/lst619247/p/9098845.htm)

               方法

方法	作用
setSize()	设置渲染器的宽高
setClearColor()	设置canvas背景色(clearColor)和背景色透明度(clearAlpha)
setPixelRatio()	设置分辨率,解决场景模糊，抗锯齿的一-种很好的方法

        运行结果

属性：

1. alpha 

const renderer = new THREE.WebGL1Renderer({ alpha: true });

四、创建物体

        1. 创建一个立方体    

const geometry = new THREE.BoxGeometry(1, 1, 1);

五、创建材料

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

六、创建网格

// 创建网格
const cube = new THREE.Mesh(geometry, material);

// 将物体添加进场景
scene.add(cube);

七、自动旋转

        通过渲染网格进行旋转

        设置渲染函数 进行渲染

function animate() {
 
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染
  renderer.render(scene, camera);
}

animate();

八、轨道控制器 和 阻尼

        1. 轨道控制器

                   OrbitControls是THREEJS中最常用的一个控制器，可以帮助我们实现以目标为焦点的旋转缩放，同时平移相机观察场景的操作，看上去是物体在进行变换，实际上所有的变化都是相机的相对位置在发生改变。

        创建

import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 设置轨道控制器
const control = new OrbitControls(相机, 事件);

       2.带阻尼惯性

        阻尼惯性 当用户用鼠标滑动停止时，并不会立马停止而是会通过惯性之后停止

        阻尼越小滑动越大 反之，滑动越小

        

/*
 * 阻尼系数越小 -- 平滑度越大
 * 阻尼系数越大 -- 平滑度越小
 */
control.dampingFactor = 0.05;

                

        控制器的自动旋转 

// 自动旋转
control.autoRotate = true;

       九、相对位置与父子元素

        父子元素

        

// 创建父几何体网格
const parentCube = new THREE.Mesh(parentGeometry, parentMaterial);

// 创建网格
const cube = new THREE.Mesh(geometry, material);

// 添加进场景
scene.add(parentCube);
parentCube.add(cube);

        相对位置 

               通过 .position.set(0,0,0 )设置  网格的位置 (三维属性) 

                

cube.position.set(3, 0, 0);
parentCube.position.set(-3, 0, 0);

// 此时子元素的位置在圆点 ，原因是父元素的位置为 -3 而子元素的位置为父元素的相对位置 3格，及在圆点

十、物体的缩放与旋转

物体的缩放与旋转也为 相对与父元素的

缩放  

子元素的长宽高放大了2倍

  cube.scale.set(2, 2, 2); 

如何父元素的长宽高放大了2倍，此时子元素将被放大到原本的4倍

旋转

 cube.rotation.x = Math.PI / 4;

子元素旋转了45度

parentCube.rotation.x = Math.PI / 4;

父元素旋转了45度，此时子元素将旋转90度