three.js 笔记

Three.js 是基于 WebGL的 3D 开发框架。

一些概念

物体

○ 点（Points）线（Line）面（Sprite）等基础物体
○ 立方体、圆柱、圆环、圆锥等各种几何体(以 Geometry 为后缀)
○ 坐标系工具（AxisHelper）等辅助工具（辅助工具由几何体、点线面封装）

Scene

场景，用来承载物体。

Group

分组，可以理解为一个小的场景。

Renderer

渲染 Scene 中各种物体。

Camera

用一个二维平面来反映三维世界。
透视相机 PerspectiveCamera：一个点找个角度来看三维世界
正交相机 OrthographicCamera：从一个平面来平行的看三维世界

Sprite

永远面向相机的二维平面

Mesh

三角形构成的三维物体。一个三位物体由几何体Geometry 和材质 Material组成。

Geometry

几何体。
圆柱几何体 CylinderBufferGeometry
字体几何体 TextGeometry
平面几何体 PlaneGeometry
挤压几何体 ExtrudeGeometry
立方体 BoxGeometry

Material

材质：纹理（Texture）贴图，图片，颜色可以作为材质。Material。

Texture

纹理贴图

TextureLoader

纹理加载器

代码片段

场景添加物体

const scene = new THREE.Scene();
scene.add(xxx);
scene.add(yyy);
scene.add(group);

// 坐标系工具
const axisHelper = new THREE.AxisHelper(max);
scene.add(axisHelper)

渲染

const renderer = new THREE.WebGLRenderer();
//设置渲染区域尺寸
renderer.setSize(width, height)
renderer.render(scene, camera)
//设置背景颜色
renderer.setClearColor(0xFFFFFF, 1);
// 环境光
const light = new THREE.AmbientLight(0xCCCCCC);
scene.add(light);
//body元素中插入canvas对象
document.body.appendChild(renderer.domElement)

动画效果

function render() {
    renderer.render(scene, camera)
    requestAnimationFrame(render)
}
render();

贴图

// 贴图
var texture1 = new THREE.TextureLoader().load("img/h1.png");
//设置精灵纹理贴图
var spriteMaterial = new THREE.SpriteMaterial({ map: texture1 });
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite)

圆柱几何体

const 圆柱几何体 = new THREE.CylinderBufferGeometry(上圆半径, 下圆半径, 高度, 侧面分段数量);

const 侧面材质 = new THREE.MeshBasicMaterial({map: 纹理图片});
const 上面材质 = new THREE.MeshBasicMaterial({color: 'red'});
const 下面材质 = new THREE.MeshBasicMaterial({color: 'red'});

const 圆柱 = new THREE.Mesh(圆柱几何体, [侧面材质, 上面材质, 下面材质]);

创建一个半径100，高70，4面的圆柱体

new THREE.CylinderBufferGeometry(100, 100, 70, 4);

文字

const fontLoader = new THREE.FontLoader();

fontLoader.load('./font/xxx.typeface.json', function (font) {
    var textGeometry = new THREE.TextGeometry('文字', 参数);
    const textMaterial = [
        new THREE.MeshBasicMaterial({color: '字体颜色'}),
        new THREE.MeshBasicMaterial({color: '侧面颜色'}),
    ];

    const text = new THREE.Mesh(textGeometry, textMaterial);
});

图片材质

const cakeTexture1 = new THREE.TextureLoader().load('img/cake1.png');
const cakeMaterail1 = new THREE.MeshBasicMaterial({map: cakeTexture1});

颜色材质

const pinkMaterial = new THREE.MeshBasicMaterial({color: 'pink'});

生成立体纹理做全景

let urls = [
  './img/home.left.jpg',
  './img/home.right.jpg',
  './img/home.top.jpg',
  './img/home.bottom.jpg',
  './img/home.front.jpg',
  './img/home.back.jpg'
];
let cubeTexture = new THREE.CubeTextureLoader().load(urls);
scene.background = cubeTexture;