Threejs在vue中使用(场景、相机、渲染器、gltf模型添加、环境贴图等)

前言

Three.js ( Javascript 3D library ) 是基于原生WebGL封装运行的三维引擎,WebGL可以看成是浏览器给我们提供的接口,在JavaScript中可以直接用这些API进行3D图形的绘制;而Three.js它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能,让你不必要再从底层WebGL开始写起。 Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。
Three.js开发3D应用,通常包括渲染器(Renderer)、场景(Scene)、照相机(Camera),以及在场景中创建的物体,光照等。

一、threejs的安装

1、NPM的安装

   npm install --save three

2、组件内使用

import * as THREE from "three";

二、场景

1、场景(scene)介绍

它相当于一个容器,在3d场景中要展现的所有物体、灯光、摄像机等都必须添加到这个容器里面。

2、创建场景对象Scene

Var scene = new THREE.Scene();

3、设置场景的背景色

scene.background = new THREE.Color("#F7F7F7");

三、相机

在threejs中提供了一系列的相机,其中最常用到的是 PerspectiveCamera(透视相机) 和 OrthographicCamera(正交投影相机),它们之间的区别在于透视相机在观察场景中的物体时,呈现出来的物体近大远小,最接近自然的视图。正交投影相机无论从哪个角度观察物体,大小都是一样的。

1、PerspectiveCamera创建, 确定视野范围

let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

参数说明:
fov: 视场;垂直方向的观察角度,也就是眼睛上下俯视的观察角度。
aspect: (长宽比)是照相机水平方向和竖直方向长度的比值。
near: (近面距离)相机到视景体最近的距离。
far: (远面距离)相机到视景体最远的距离。

2、确定相机的位置

this.camera.position.set(0, 10, 20);

3、操作相机

在很多场景下,我们需要移动相机来观察物体的各个角度,这时需要相机操作控件来控制相机的位置。常用的控制器有:OrbitControls(轨道控制器)、TrackballControls(轨迹球控制器)

OrbitControls:可以使用鼠标控制场景中的对象围绕场景中心旋转和平移
TrackballControls:可以使用鼠标(或控制球)来轻松移动、平移和缩放场景
Pointerlockcontrols:第一人称控制器,以第一人称视角观察室内场景

1)添加控制器

controls = new OrbitControls(camera, canvas);

2)设置控制器聚焦点

 controls.target.set(0, 5, 0);

四、光照

在场景中,如果没有光源,那所有的物体都将看不见。最常用的几种光源是AmbientLight、PointLight、SpotLight、DirectionalLight。
AmbientLight:环境光;全局均匀地照亮场景中的所有对象。
PointLight:点光源;从空间中的一点向所有方向发射光线。
SpotLight:聚光源;投射出的是类似圆锥形的光线。
DirectionalLight:平行光;比如太阳光。
例:

 {
   
    const color = 0xf1f1f1;  //光的颜色
    const intensity = 1;

你可能感兴趣的:(threejs,vue,three.js)