目录
导入模块
渲染器renderer
场景scene
网络模型mesh
几何体geometry
材质material
生成网络模型对象mesh
光源light
环境光ambientLight
点光源pointLight
添加坐标轴辅助线AxesHelper
相机camera
添加鼠标放大缩小旋转
顶点篇
导入模块
在项目中导入three.js包
yarn add three
页面中引入
import * as THREE from 'three'
渲染器renderer
为了目录能够呈现api的层次我把渲染器摆在前面，可以优先往下看完场景和相机，渲染器就是用于渲染它们的（renderer.render(scene,camera)）。
ref在组件内定义一个box
<div ref={el => { this.box = el }}> </div>
const height = window.innerHeight const width = window.innerWidth const renderer = new THREE.WebGLRenderer() renderer.setSize(height,width)//尺寸 renderer.setClearColor(0xb9d3ff, 1)//背景色 const { box } = this box.appendChild(renderer.domElement); //box中插入渲染器的domElement对象 renderer.render(scene,camera)//场景相机加入渲染器
场景scene
场景对象，必要的，网络模型和光源就添加在场景上
const scene = new THREE.Scene()
网络模型mesh
一个网络模型包括了很多个方面，最简单的就是几何体加上构成几何体的材质构成
几何体geometry
还有许多几何体详见three.js官方api
const geometry = new THREE.BoxGeometry(100,200,150)//柱状体，入参为在x、y、z轴上的长度 const geometry2 = new THREE.SphereGeometry(50,60,60)//球状体，入参为半径，水平分段、垂直分段，如果分段数较小得到的不是平整的球
材质material
const material = new THREE.MeshLambertMaterial({ color:'red',//颜色 opacity: 0.7,//透明度 //其他入参详见官方api })
生成网络模型对象mesh
将几何体和材质放入就生成了网络模型对象
const mesh = new THREE.Mesh(geometry,material)
将mesh添加进场景
scene.add(mesh)
光源light
环境光ambientLight
const ambient = new THREE.AmbientLight(0x444444)//16进制数字代表光强度 scene.add(ambient)//直接加入场景
点光源pointLight
const point = new THREE.PointLight(0xffffff) point.position.set(400,200,300)//设置光源位置 scene.add(point) • 1 • 2 • 3
添加坐标轴辅助线AxesHelper
const axesHelper = new THREE.AxesHelper(250); axesHelper.setColors('red', 'blue', 'yellow') scene.add(axesHelper); //网格模型添加到场景中
相机camera
const height = window.innerHeight//当然也可以后面存放场景的容器的高度 const width = window.innerWidth//当然也可以后面存放场景的容器的宽度 const k = width/height const s = 200 //系数越大，可以看作相机离得越远，视口更大 const camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000) camera.position.set(200,100,200)//相机位置 camera.lookAt(scene.position)//相机方向设置为场景方向
添加鼠标放大缩小旋转
//需要导入对应的api import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' //renderer.render(scene, camera) 修改渲染器渲染过程，放入一个函数 function rend(params) { renderer.render(scene, camera); } rend() const controls = new OrbitControls(camera, renderer.domElement) controls.addEventListener('change', rend)
顶点篇
想要继续深入学习移步：three.js顶点篇
