Three.js从入门到放弃_threejs开源项目

一、为什么要学Three.js?

目前许多公司企业对web3D可视化技术需求越来越多，比如公司需求在官网上可视化3D展示公司形象、政府的一些新基建项目（数字孪生、智慧城市、智慧工厂等项目）、汽车的3D展示等场景都有用到web3D可视化技术。

而Three.js是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。它的出现让web3D应用开发更简单。

二、小试牛刀

1. 搭建three.js开发环境

安装parcel打包工具

npm install parcel-bundler 
1

配置package.json

 "scripts": {"dev": "parcel src/index.html","build": "parcel build src/index.html"}, 
1

项目结构

2. 渲染场景和物体

2.1 导入threejs

import * as THREE from "three"; 
1

2.2 创建场景和相机

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, //视野角度（FOV）window.innerWidth / window.innerHeight, // 长宽比0.1, // 近截面1000 // 远截面
);

// 设置相机位置
camera.position.set(0, 0, 10);
// 添加相机到场景中
scene.add(camera); 
1
2
3
4
5
6
7
8
9
10

3. 创建几何体和材质

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 材质
const material = new THREE.MeshBasicMaterial
1
2
3
4