1.法向量材质介绍
MeshNormalMaterial渲染出来的每一面颜色都稍有不同,即使在物体旋转时,这些颜色基本保持原来的位置,之所以这样,是因为每一个面的颜色是从该面向外指的法向量计算得到,法向量即与面垂直的向量,在 three.js 库中法向量有着广泛的应用。它可以用来决定光的反射方向,在三维物体上映射材质时起到辅助作用。还可以在计算光照、阴影时提供有用信息,从而为物体表面像素上色。
MeshNormalMaterial材质的属性也比较少,有如下几个属性可以设置
属性 | 描述 |
---|---|
wireframe | 是否显示线框 |
wireframeLinewidth | 线框的宽度 |
shading(移除) | 该属性用来设置着色方法,THREE.FlagShading表示平面着色,THREE.SmoothShading表示平滑着色 |
flatShading(替换shading) | 该属性用来设置着色方法,是否用平面着色器着色,true:表示平面着色,false:表示平滑着色 |
2.demo说明
如上图,该示例支持以下功能
- 调整visible属性控制物体是否显示
- 通过勾选transparent和调整opacity属性控制物体透明度
- 通过勾选wireframe属性控制物体是否为线框
- 通过勾选arrows属性控制是否展示法向量辅助对象
- 通过下拉选择side属性控制渲染前面、后面、全部
- 通过下拉选择shadow属性控制物体使用平面着色还是平滑着色
- 通过下拉选择mesh属性控制页面绘制球体、方块还是平面
3.demo代码
<template>
<div>
<div id="container"></div>
<div class="controls-box">
<section>
<el-row>
<el-checkbox v-model="properties.visible">visible</el-checkbox>
</el-row>
<el-row>
<el-checkbox v-model="properties.transparent">transparent</el-checkbox>
</el-row>
<el-row>
<el-checkbox v-model="properties.wireframe">wireframe</el-checkbox>
</el-row>
<el-row>
<el-checkbox v-model="properties.arrows">arrows</el-checkbox>
</el-row>
<el-row>
<div v-for="(item,key) in properties" :key="key">
<div v-if="item&&item.name!=undefined">
<el-col :span="8">
<span class="vertice-span">{{item.name}}</span>
</el-col>
<el-col :span="13">
<el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip"></el-slider>
</el-col>
<el-col :span="3">
<span class="vertice-span">{{item.value}}</span>
</el-col>
</div>
</div>
</el-row>
<el-row>
<el-col :span="8" class="label-col"><label>side</label></el-col>
<el-col :span="16">
<el-select v-model="properties.side" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class="label-col"><label>shadow</label></el-col>
<el-col :span="16">
<el-select v-model="properties.shadow" placeholder="请选择">
<el-option v-for="item in shadowOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class="label-col"><label>mesh</label></el-col>
<el-col :span="16">
<el-select v-model="properties.selectMesh" placeholder="请选择">
<el-option v-for="item in selectMeshOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
</section>
</div>
</div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
data () {
return {
options: [
{
value: 'front',
label: 'front'
},
{
value: 'back',
label: 'back'
},
{
value: 'double',
label: 'double'
}
],
selectMeshOptions: [
{
value: 'cube',
label: 'cube'
},
{
value: 'sphere',
label: 'sphere'
},
{
value: 'plane',
label: 'plane'
}
],
shadowOptions: [
{
value: 'flat',
label: 'flat'
},
{
value: 'smooth',
label: 'smooth'
}
],
properties: {
opacity: {
name: 'opacity',
value: 0.3,
min: 0,
max: 1,
step: 0.1
},
wireframeLinewidth: {
name: 'linewidth',
value: 5,
min: 0,
max: 20,
step: 1
},
selectMesh: 'cube',
side: 'front',
transparent: false,
wireframe: false,
visible: true,
arrows: false,
shadow: 'flat'
},
cube: null,
sphere: null,
plane: null,
activeMesh: null,
meshMaterial: null,
camera: null,
scene: null,
renderer: null,
controls: null,
step: 0
}
},
mounted () {
this.init()
},
methods: {
formatTooltip (val) {
return val
},
// 初始化
init () {
this.createScene() // 创建场景
this.createMesh() // 创建网格模型
this.createLight() // 创建光源
this.createCamera() // 创建相机
this.createRender() // 创建渲染器
this.createControls() // 创建控件对象
this.render() // 渲染
},
// 创建场景
createScene () {
this.scene = new THREE.Scene()
},
// 创建网格模型
createMesh () {
const geometry = new THREE.PlaneGeometry(100, 100, 4, 4) // 创建一个平面对象PlaneGeometry
const planeMaterial = new THREE.MeshLambertMaterial({
color: 0x777777
}) // 材质对象Material
const plane = new THREE.Mesh(geometry, planeMaterial)
plane.receiveShadow = true
// 设置平面位置
plane.rotation.x = -0.5 * Math.PI
plane.position.set(0, -20, 0)
// 平面对象添加到场景中
this.scene.add(plane)
const sphereGeometry = new THREE.SphereGeometry(14, 20, 20)
const cubeGeometry = new THREE.BoxGeometry(15, 15, 15)
const planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4)
this.meshMaterial = new THREE.MeshNormalMaterial()
this.sphere = new THREE.Mesh(sphereGeometry, this.meshMaterial)
this.cube = new THREE.Mesh(cubeGeometry, this.meshMaterial)
this.plane = new THREE.Mesh(planeGeometry, this.meshMaterial)
this.sphere.position.set(-12, 3, 2)
this.cube.position = this.sphere.position
this.plane.position = this.sphere.position
this.activeMesh = this.sphere
},
// 创建光源
createLight () {
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光
this.scene.add(ambientLight) // 将环境光添加到场景
const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
spotLight.position.set(-40, 60, -10)
spotLight.castShadow = true
this.scene.add(spotLight)
},
// 创建相机
createCamera () {
const element = document.getElementById('container')
const width = element.clientWidth // 窗口宽度
const height = element.clientHeight // 窗口高度
const k = width / height // 窗口宽高比
// PerspectiveCamera( fov, aspect, near, far )
this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
this.camera.position.set(-60, 60, 100) // 设置相机位置
this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向
this.scene.add(this.camera)
},
// 创建渲染器
createRender () {
const element = document.getElementById('container')
this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
this.renderer.shadowMap.enabled = true // 显示阴影
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
element.appendChild(this.renderer.domElement)
},
updateMesh (selectMesh) {
this.scene.remove(this.activeMesh)
switch (selectMesh) {
case 'cube':
this.activeMesh = this.cube
break
case 'sphere':
this.activeMesh = this.sphere
break
case 'plane':
this.activeMesh = this.plane
break
}
this.scene.add(this.activeMesh)
},
updateSide (side) {
switch (side) {
case 'front':
this.meshMaterial.side = THREE.FrontSide
break
case 'back':
this.meshMaterial.side = THREE.BackSide
break
case 'double':
this.meshMaterial.side = THREE.DoubleSide
break
}
this.meshMaterial.needsUpdate = true
},
updateShadow (shadow) {
switch (shadow) {
case 'flat':
this.meshMaterial.flatShading = true
break
case 'smooth':
this.meshMaterial.flatShading = false
break
}
this.meshMaterial.needsUpdate = true
},
updatearrows () {
this.activeMesh.children = []
if (this.properties.arrows) {
for (let f = 0, fl = this.sphere.geometry.faces.length; f < fl; f++) {
const face = this.sphere.geometry.faces[f]
const centroid = new THREE.Vector3(0, 0, 0)
centroid.add(this.sphere.geometry.vertices[face.a])
centroid.add(this.sphere.geometry.vertices[face.b])
centroid.add(this.sphere.geometry.vertices[face.c])
centroid.divideScalar(3)
const arrow = new THREE.ArrowHelper(
face.normal,
centroid,
2,
0x3333ff,
0.5,
0.5
)
this.activeMesh.add(arrow)
}
}
},
updateRotation () {
this.cube.rotation.y = this.step += 0.01
this.plane.rotation.y = this.step
this.sphere.rotation.y = this.step
},
// 更新属性
updateFun () {
this.meshMaterial.opacity = this.properties.opacity.value
this.meshMaterial.wireframeLinewidth = this.properties.wireframeLinewidth.value
this.meshMaterial.transparent = this.properties.transparent
this.meshMaterial.wireframe = this.properties.wireframe
this.meshMaterial.visible = this.properties.visible
this.updateMesh(this.properties.selectMesh)
this.updateSide(this.properties.side)
this.updateShadow(this.properties.shadow)
this.updatearrows()
this.updateRotation()
},
render () {
this.updateFun()
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render)
},
// 创建控件对象
createControls () {
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.target.copy(this.plane.position)
}
}
}
</script>
<style>
#container {
position: absolute;
width: 100%;
height: 100%;
}
.controls-box {
position: absolute;
right: 5px;
top: 5px;
width: 300px;
padding: 10px;
background-color: #fff;
border: 1px solid #c3c3c3;
}
.label-col {
padding: 8px 5px;
}
.vertice-span {
line-height: 38px;
padding: 0 2px 0 10px;
}
</style>