- 场景 scene 基本操作
scene 是所有物体 object 的父级元素 ，可对 object 进行增删查
// 添加物体
scene.add(obj) // obj 默认放在坐标原点，可通过 obj.position.set() 来设置位置
// 移除物体
scene.remove(obj)
// 根据 id 或 name 查询 obj
scene.getObjectByName(name);
scene.getObjectById(id);
// 遍历子元素
scene.traverse(obj=>console.log(obj))
// 设置背景
initBackground() {
var cubeTextureLoader = new THREE.CubeTextureLoader()
cubeTextureLoader.setPath('textures/cube/skybox/')
var cubeTexture = cubeTextureLoader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])
this.scene.background = cubeTexture
}
- 物体 Mesh 基本操作
// 加载拥有 mtl 材质的 obj 物体
loadObj(config) {
const { path } = config
var objLoader = new OBJLoader() //obj加载器
var mtlLoader = new MTLLoader() //材质文件加载器
mtlLoader.setTexturePath(path.substring(0, path.lastIndexOf('/') + 1))
return new Promise(res => {
mtlLoader.load(`${path}.mtl`, materials => {
objLoader.setMaterials(materials)
objLoader.load(
`${path}.obj`,
obj => {
this.scene.add(obj)
res(obj)
},
xhr => {
if (xhr.lengthComputable) {
var percentComplete = (xhr.loaded / xhr.total) * 100
this.container.querySelector('#loading').innerHTML = `Loading ${percentComplete.toFixed(1)}`
}
}
)
})
})
}
// 设置位置
obj.position.set(x,y,z)
obj.position.x = x
// 设置缩放
obj.scale.set(x,y,z)
obj.scale.x = x
// 设置旋转，初始加载垂直于z轴
obj.rotation.set(弧度，弧度，弧度)
// 设置物体每个部位都可以投影和接收投影
setCastShadowAndReceiveShadow(obj) {
obj.traverse(function(child) {
if (child.isMesh) {
child.castShadow = true
child.receiveShadow = true
}
})
}
- 3d 坐标与 2d 坐标相互转换
// 3d => 2d
getLocalPosition(point) {
//获取到窗口的一半高度和一半宽度
const halfWidth = window.innerWidth / 2
const halfHeight = window.innerHeight / 2
const vector1 = point.project(this.camera.threeCamera)
return [vector1.x * halfWidth + halfWidth, -vector1.y * halfHeight + halfHeight]
}
// 3d => 2d
getFirstIntersectObj(event) {
if (!event) {
return
}
//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
this.raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
this.raycaster.setFromCamera(mouse, this.camera.threeCamera)
// 获取raycaster直线和所有模型相交的数组集合
return this.raycaster.intersectObjects(this.scene.children, true)[0].point
}
- 添加阴影
// 1、告诉渲染器我需要阴影
renderer.shadowMap.enabled = true;
// 2、告诉灯光，我需要阴影：
light.castShadow = true;
// 3、告诉模型哪些需要投射阴影
cube.castShadow = true;
// 4、告诉最底下的平面长方形你要接受阴影
plane.receiveShadow = true;
- 场景切换
通过设置 obj 的 visible 属性来达到场景切换的效果 - 使用动画
positionAnimate(obj, targetPosition, i) {
new TWEEN.Tween(obj.position)
.to(
{
x: targetPosition[0],
y: targetPosition[1],
z: targetPosition[2]
},
2000
)
.easing(TWEEN.Easing.Quadratic.Out)
.delay(200 * i + 1500)
.start()
}
scaleAnimate(obj, targetScale, i) {
new TWEEN.Tween(obj.scale)
.to(
{
x: targetScale[0],
y: targetScale[1],
z: targetScale[2]
},
2000
)
.easing(TWEEN.Easing.Quadratic.Out)
.delay(200 * i)
.start()
}
- 控制相机移动
- 添加物体选中效果
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'
//1、添加 EffectComposer，并添加 outlinePass 特效
useEffectComposer() {
var composer = new EffectComposer(this.renderer.threeRenderer)
this.composer = composer
var renderPass = new RenderPass(this.scene, this.camera.threeCamera)
composer.addPass(renderPass)
var outlinePass = new OutlinePass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
this.scene,
this.camera.threeCamera
)
outlinePass.visibleEdgeColor.set('#b8d2eb')
outlinePass.hiddenEdgeColor.set('#ebd4cd')
outlinePass.edgeStrength = 5
outlinePass.edgeGlow = 1
outlinePass.edgeThickness = 3
outlinePass.pulsePeriod = 0
this.outlinePass = outlinePass
composer.addPass(outlinePass)
}
// 2、将 raycaster 选中的物体附加到 outlinePass.selectedObjects 上
const obj = this.raycaster.intersectObjects(this.scene.children, true)[0]
this.outlinePass.selectedObjects = [obj.object]
https://blog.csdn.net/qq_30100043/article/category/7003591/1?
