创建一个方块

安装threejs

这里只说明的npm安装，还有一种是本地引入min文件

npm install three

在js文件中引入引入Three.js

import * as THREE from "three"

创建场景、相机和渲染器

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Sizes
const sizes = {
    width: 800,
    height: 600
}

// Scene 场景
const scene = new THREE.Scene()

// Object 对象
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)//创建一个立方体几何对象
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: '#ff0000'
})//材质
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cubeMesh)//添加立方体对象到场景

// Camera 相机
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)// 透视相机
camera.position.z = 3
scene.add(camera)//添加相机到场景

// Renderer 渲染
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)

关于创建的对象，网格模型Mesh是由立方体几何体geometry和材质material两部分构成

几何体是由多个三角形构成，每三个点就可以形成一个三角形，three.js的api会封装好方法，让顶点互相链接对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。

所以配置立方体的Api BoxGeometry中设置的三个值分别就是长宽高

以下是其相关参数

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width — X轴上面的宽度，默认值为1。
height — Y轴上面的高度，默认值为1。
depth — Z轴上面的深度，默认值为1。
widthSegments — （可选）宽度的分段数，默认值是1。
heightSegments — （可选）高度的分段数，默认值是1。
depthSegments — （可选）深度的分段数，默认值是1。

效果图

注：这里看到了立方体的一个面，如果需要看到其他的面需要我们调整相机角度来实现

Three.js学习（一）创建一个简单的立方体

安装