threejs cdn(ThreeJs初体验2)

博主:xiaoweixiaowei 2022-12-28 条评论

前期准备工作

  • 引入three文件

1.Github下载代码,引入文件

下载地址

https://github.com/mrdoob/three.js

ThreeJs下载

2.CDN引入文件(推荐使用)

CDN地址

https://www.bootcdn.cn/three.js/

方块旋转

方块选择3D样式

代码

二十行左右的代码就实现一个简单的3D动画。

渲染步骤解析

  • 创建场景

var scene = new THREE.Scene();

  • 创建相机(透视相机)

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  • 渲染器

创建renderervar renderer = new THREE.WebGLRenderer();并将renderer插入到body下,渲染出document.body.appendChild(renderer.domElement);

  • 将物体添加到场景中

创建立方体var geometry = new THREE.CubeGeometry(1, 1, 1);网格基础材料var material = new THREE.MeshBasicMaterial({});添加到场景中var cube = new THREE.Mesh(geometry, material); scene.add(cube);

  • 渲染

render( scene, camera, renderTarget, forceClear )scene:前面定义的场景camera:前面定义的相机renderTarget:渲染的目标,默认是渲染到前面定义的render变量中forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除

换个写法

将各个模块拆分

相机API

相机主要分为两种相机,分别是正交相机、透视相机。

正交相机(OrthographicCamera):物品的渲染尺寸与它距离镜头的远近无关。也就是说在场景中移动一个物体,其大小不会变化。正交镜头适合2D游戏。

透视相机(PerspectiveCamera):模拟人眼的视觉特点,距离远的物体显得更小。透视镜头通常更适合3D渲染。

PerspectiveCamera && OrthographicCamera(x,y,z,t)x – 视野角度(int)y – 渲染区域的比例(建议默认值为window.innerWidth/window.innerHeight)z – 最近镜头的距离t – 远离镜头的距离

  • 移动方法

camera.position(x,y,z):控制相机在整个3D环境中的位置camera.lookAt(x,y,z):控制相机的焦点位置,决定相机的朝向x、y、z分别对应坐标信息requestAnimationFrame()调用

灯光API

new THREE.LightAPI();

  • AmbientLight(环境光)

该光源均匀的打在物体上,光源均匀的打在场景内的物体上

  • PointLight(点光源)

该光源由一点发出,向四周扩散

  • SpotLight(聚光灯)

产生圆锥形光柱的灯光

  • DirectionalLight(平行光)

也就无限光,光线是平行的,所以被照到的地方都是一样的

  • HemisphereLight(半球光)

创建户外自然的光线效果

  • AreaLight(面光源)

指定一个发光的区域

  • LensFlare(镜头光晕)

给光效添加光晕

MESH API

在 threeJs 的世界中,材质(Material)+几何体(Geometry)就是一个 mesh

材质分类

  • MeshBasicMaterial

基本的材质,显示为简单的颜色或者显示为线框

threejs cdn(ThreeJs初体验2)
  • MeshDepthMaterial

使用简单的颜色,但是颜色深度和距离相机的远近有关

  • MeshFacematerial

基于面Geometry的法线(normals)数组来给面着色

  • MeshLambertMateria

l考虑光线的影响,哑光材质

  • MeshPhongMaterial

考虑光线的影响,光泽材质

  • ShaderMaterial

允许使用自己的着色器来控制顶点如何被放置、像素如何被着色

  • LineBasicMaterial

用于THREE.Line对象,创建彩色线条

  • LineDashMaterial

用于THREE.Line对象,创建虚线条

  • RawShaderMaterial

仅和THREE.BufferedGeometry联用,优化静态Geometry(顶点、面不变)的渲染

  • SpriteCanvasMaterial

在针对单独的点进行渲染时用到

  • SpriteMaterial

在针对单独的点进行渲染时用到

  • PointCloudMaterial

在针对单独的点进行渲染时用到

2D & 3D 图形

  • 2D
  • THREE.PlaneGeometry()矩形
  • THREE.CircleGeometry()圆形或者扇形
  • THREE.RingGeometry()圆环或者扇环
  • THREE.ShapeGeometry ()自定义的二维图形
  • 3D
  • THREE.BoxGeometry()长宽高的盒子
  • THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)- 三维球体/不完整球体
  • THREE. CylinderGeometry ()圆柱、圆筒、圆锥或者截锥

外部图形加载

  • 贴图必须是(2的幂数)X (2的幂数),否则容易造成图形变形

格式概述

粒子

var particle = THREE.Sprite()生成之后添加到场景scene.add(particle);

交互

THREE.Raycaster()判断鼠标当前位置THREE.Vector2()获取点击点的平面坐标

动画

requestAnimationFrame(动画)

参考资料

https://sq.163yun.com/blog/article/203590884053413888

The End

发布于:2022-12-28,除非注明,否则均为 主机评测原创文章,转载请注明出处。