上代码初始化基础代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>learning threejs</title>
</head>
<body>
    <canvas id="webgl"></canvas>
</body>
</html>

import * as THREE from 'three'
import './style.css'


// canvas
const canvas = document.getElementById('webgl');

// scene
const scene = new THREE.Scene();

// geometry
const geometry = new THREE.BoxGeometry(1,1,1);
const material =  new THREE.MeshBasicMaterial({color: 0xff0000})
const cube = new THREE.Mesh(geometry,material);
scene.add(cube)

// sizes
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

// camera
const camera = new THREE.PerspectiveCamera(75,sizes.width / sizes.height,0.1,100)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(sizes.width,sizes.height);

// clock
const clock = new THREE.Clock();

// animation
const tick = () => {
  const elapsedTime = clock.getElapsedTime()

   cube.rotation.y =elapsedTime * Math.PI*0.25

  renderer.render(scene,camera);
  window.requestAnimationFrame(tick)
}

tick()

渲染：一个红色小方块不停的旋转

企业微信截图_16862101214586.png

下面是一些重要的基础概念

webgl vs threejs

WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中渲染高性能交互式 3D 和 2D 图形，而无需使用插件，但是学起来复杂，先从threejs入门。 threejs 是一个webgl的库用于渲染webgl很方便

scene 场景

场景相当于一个舞台里面包括所有的要展示的东西同样创建的任何东西都要add到scene里

Core API

创建场景 const scence = new THREE.scene()
add scence.add(camera) add里面的东西下面会将
渲染 render.render(scene,camera)

镜头

相当于在场景里的某个位置放了台相机，用户看到的展示出来的画面都是这个从镜头里看到的

Core API

创建 const camera = new THREE.PerspectiveCamera(75,width,/heigth,0.1,100) 相机有不同种类一般选择透视镜头 PerspectiveCamera 像人的眼睛近大远小下面依次是它的参数：
- fov视野0 0，180 基本看不见，这个值越小看到的东西越大这个值越大看到的东西越小
- aspect宽高比染容器的宽高比
- near 镜头最近的可见距离
- far 镜头最远的可见距离这些参数一起决定能看到的东西的范围

在近截面和远截面直接的范围就是你能看到范围

渲染

将场景的东西渲染到浏览器页面上

    const canvas = document.getElementById('webgl');
    const renderer = new THREE.WebGLRenderer({canvas});
    renderer.setSize(sizes.width,sizes.height);
    renderer.render(scene,camera);

Geometry 几何体

包括以下各种几何体：

立方体 BoxGeometry

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 参数 长宽高

胶囊图形类 CapsuleGeometry

const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 ); // 参数 半径 中间区域长度 构造盖子的曲线部分的个数 覆盖胶囊圆周的分离的面的个数 覆盖胶囊圆周的分离的面的个数

圆形 CircleGeometry

const geometry = new THREE.CircleGeometry( 5, 32 ); // 参数 半径 分段

圆锥缓冲几何体 ConeGeometry

const geometry = new THREE.ConeGeometry( 5, 20, 32 ); // 参数 半径 高度 侧面分段数

圆柱缓冲几何体

const geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 ); // 参数 顶部半径 底部半径 高度 侧面分段数

十二面缓冲几何体（DodecahedronGeometry）参数 radius — 十二面体的半径，默认值为1。

平面 PlaneGeometry
八面缓冲几何体（OctahedronGeometry）

Material 材质

物品表面的颜色贴图光亮程度反光性粗糙度下面一些常用材质：

MeshBasicMaterial 最基础的材质设置啥颜色就是啥颜色不反射光不受光照的影响

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

MeshLambertMaterial 非光泽表面的材质，没有镜面高光这可以很好地模拟一些表面（例如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面（例如涂漆木材）
MeshMatcapMaterial 编码了材质的颜色与明暗不对灯光作出反应。它将会投射阴影到一个接受阴影的物体上，不对灯光作出反应。它将会投射阴影到一个接受阴影的物体上
MeshNormalMaterial 一种把法向量映射到RGB颜色的材质
MeshPhongMaterial 一种用于具有镜面高光的光泽表面的材质可以模拟具有镜面高光的光泽表面（例如涂漆木材）
MeshToonMaterial 一种实现卡通着色的材质
MeshStandardMaterial 除光泽度外，还有粗糙度和金属度
MeshPhysicalMaterial 除光泽度、粗糙度、金属度外，还有清漆度和清漆粗糙度

mesh 网格

一种特定的几何体和材质绘制出的一个特定的几何体系。

const cube = new THREE.Mesh(geometry,material);
scene.add(cube)

Light 光源

不同光源

AmbientLight 环境光会均匀的照亮场景中的所有物体没有阴影
DirectionalLight 平行光有方向如太阳光
PointLight 点光源从一个点向各个方向发射例如灯泡
SpotLigh 聚光灯光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大

animation

几何体和相机都可以设置方向一般就是三角坐标系 x y z x 认为平行于屏幕 y 认为垂直于屏幕 z 可以想象成一条线穿透屏幕还可以设置屏几何体和相机的旋转方向 x y z 轴，x 轴想象成一根棍子横着插入几何体，然后几何体只能绕着这个棍子旋转， y轴想象成一根棍子竖着插入几何体

threejs 系列一 基础概念

上代码 初始化 基础代码

webgl vs threejs

scene 场景

Core API

镜头

Core API

渲染

Geometry 几何体

Material 材质

mesh 网格

Light 光源

animation

threejs 系列一基础概念

上代码初始化基础代码