Threejs

Three.js是基于原生WebGL(Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。)封装运行的三维引擎
三要素是：场景(Scene)、相机(Camera)、渲染器(Renderer),下面通过三要素在浏览器中创建几何体并显示

import * as THREE from "three"
// three.js最基本的创建流程
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0,0,10)
scene.add(camera)
const cubeGeometry = new THREE.BoxGeometry()
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
//根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
//将几何体添加到场景中
scene.add(cube)
//初始化渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
//使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera)

threejs开源项目目录结构

…后续补坑

References
https://juejin.cn/post/7020396322062598181