1. 引入three.js
// 原生写法,需要在官网先下载three.js文件包,然后在HTML文件中配置引入
// vue 或 react 引入three插件
npm install three --save
// 原生在js文件中引入
//vue 和 react 需要使用的页面中引入three
import * as THREE from 'three'
2. 创建3D场景对象 (scene)
const scene = new THREE.Scene()
3. 创建几何体(geometry)
BoxGeometry 长方体 ConeGeometry 圆锥体 CylinderGeometry 圆柱体
SphereGeometry 球体 PlaneGeometry 矩形平面 CircleGeometry 圆平面
//创建一个长宽高为100px的长方体(正方体)
const geomerty = new THREE.BoxGeometry(100,100,100)
geometry.scale(2,2,2) //设置XYZ的缩放比例
geometry.translate(50,0,0) //设置几何体向X轴平移50px
geometry.rotateX(Math.PI / 4) //设置几何体绕X轴旋转45度
geometry.center() //设置几何体居中
4. 物体材质(material)
MeshBasicMaterial 网络基础材质
MeshLamberMaterial 网络漫反射材质
MeshPhoneMaterial 网络高光材质
PointsMaterial 点材质
LineBasicMaterial 线基础材质
SpriteMaterial 精灵材质
MeshPhysicalMaterical / MeshStandardMaterial 物理材质
const material = new THREE.MeshBasicMaterial({
color: 0xff0000, //设置材质颜色为红色(十六进制)
transparent: true, //设置材料是否透明
opacity: 0.6, //设置透明度
})
4. 网络模型(mesh)
//将创建的几何体和物理材质挂栽到网络模型上
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 10, 0) //设置模型放置位置
scene.add(mesh) //将网络模型放到场景中显示
5. 透视投影相机(camera)
const width = 800
const height = 600
const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 30000)
camera.position.set(200, 200, 200)
camera.lookAt(0, 0 0)
6. 渲染器(renderer)
const renderer = new THREE.WebGLRenderer()
renderer.antialias = true //设置渲染器锯齿属性
renderer.setPixelRatio(window.devicePixelRatio) //设置设备像素比,避免模糊
renderer.serClearColor(0x444444, 1) //设置渲染区域背景颜色
renderer.setSize(width, height) //设置渲染区域的尺寸(像素PX)
renderer.render(scene, carema) //执行渲染操作
document.getElementById('webgl').appendChild(renderer.domElement)
7. 相机控件(OrbitControls):改变相机参数,360°旋转预览效果
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
const controls = new OrbitControls(camera, renderer.docElement)
controls.addEventListener('change', function() {
renderer.render(scene, camera)
})
8. 光源
AmbientLight: 环境光 SpotLgiht: 聚光灯光源
PointLight: 点光源 DirectionalLight: 平行光
const pointLight = new THREE.PointLight(0xffffff, 1.0)
pointLight.position.set(400, 0, 0) //设置光源位置
scene.add(directionalLight) //将光源添加到场景中
//添加光源辅助观察
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
scene.add(pointLightHelper)
9. 辅助坐标系
const axesHelper = new THREE.AxesHelper(150) //参数为辅助坐标轴的长度
scene.add(axesHelper)
10. 动画
function render () {
renderer.render(scene, camera) //执行渲染函数
mesh.rotateY(0.01) //每次绕y轴旋转0.01弧度
requestAnimationFrame(render) //请求再次执行渲染函数
}
render()