环境光
添加环境光
// 添加环境光
const ambientLight = new AmbientLight(controlRef.value.ambientColor)
scene.add(ambientLight)
这样就会出来一个调色盘
我们用watch来侦听
我们删除其它光的影响
点光源
这里是定义它的属性,距离和长度
我们添加一个发光的点(类似于我们生活中的灯泡)
// 添加一个灯泡(发光的物体)
const lookAtGeom = new SphereGeometry(1)
const lookAtMesh = new Mesh(lookAtGeom, new MeshLambertMaterial({
color: 0xff0000
}))
scene.add(lookAtMesh)
让小球动起来
添加点光源
// 添加点光源
const pointLight = new PointLight(controlRef.value.pointColor)
pointLight.distance = 100
pointLight.position.copy(lookAtMesh.position)
scene.add(pointLight)
点光源跟随小球的位置
用watch来侦听
watch(() => controlRef.value.pointColor, () => {
pointLight.color = new Color(controlRef.value.pointColor)
})
// 光源投射的直径
watch(() => controlRef.value.distance, () => {
pointLight.distance = controlRef.value.distance
})
// 强度(灯泡多少瓦数)
watch(() => controlRef.value.intensity, () => {
pointLight.intensity = controlRef.value.intensity
})
聚光灯
这里添加一个debug辅助线方便我们观察
添加辅助线
聚焦对象
下拉框用一个数组接受
watch侦听
watch(() => controlRef.value.target, (t) => {
if (t === 'cube') {
spotLight.target = cube
} else if (t === 'sphere') {
spotLight.target = sphere
} else {
spotLight.target = plane
}
})
平行光
添加平行光
// 添加平行光
const directionalColor = '#ff5808'
const directionalLight = new DirectionalLight(directionalColor)
directionalLight.position.set(-40, 60, -10)
directionalLight.castShadow = true
directionalLight.intensity = 0.5
scene.add(directionalLight)
注意这里也需要更改
代码
<template>
<div ref="statsRef"></div>
<div className="contain" ref="containerRef">
</div>
</template>
<script setup lang='ts'>
import {
AxesHelper,
BoxGeometry,
CameraHelper,
Color,
DirectionalLight,
Fog,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
PerspectiveCamera,
PlaneGeometry,
PointLight,
Scene,
SphereGeometry,
SpotLight,
WebGLRenderer
} from 'three';
import { ref, reactive, onMounted, watch } from 'vue'
import Stats from 'stats.js'
import * as dat from 'dat.gui'
const containerRef = ref<HTMLDivElement>()
const statsRef = ref<HTMLDivElement>()
const stats = new Stats()
stats.dom.style.top = "50px"
stats.showPanel(0)
// 创建场景
const scene = new Scene()
// 创建照相机
const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置摄像机位置
camera.position.set(-30, 40, 30)
// 设置摄像机朝向(看哪)
camera.lookAt(scene.position)
// webgl渲染器
const renderer = new WebGLRenderer()
renderer.setClearColor(new Color(0xeeeeee))
renderer.setSize(window.innerWidth, window.innerHeight)
// 可以渲染阴影
renderer.shadowMap.enabled = true
// 光源
const spotLight = new SpotLight(0xffffff)
spotLight.castShadow = true
spotLight.position.set(-40, 60, -10)
scene.add(spotLight)
// 添加平面几何体
const planeGeometry = new PlaneGeometry(60, 20)
// 添加材质
const meshBasicMaterial = new MeshLambertMaterial({ color: 0xcccccc })
const plane = new Mesh(planeGeometry, meshBasicMaterial)
// 接受阴影
plane.receiveShadow = true
// 调整位置
plane.rotation.x = -0.5 * Math.PI //放平
plane.position.x = 15
plane.position.y = 0
plane.position.z = 0
scene.add(plane)
// 添加几何体
const cubeGeometry = new BoxGeometry(4, 4, 4)
const cubeMaterial = new MeshLambertMaterial({ color: 0xff0000, wireframe: false })
const cube = new Mesh(cubeGeometry, cubeMaterial)
cube.castShadow = true
cube.position.set(2, 2, 2)
scene.add(cube)
// 球体
const sphereGeometry = new SphereGeometry(4)
const sphereMaterial = new MeshLambertMaterial({ color: 0x7777ff, wireframe: false })
const sphere = new Mesh(sphereGeometry, sphereMaterial)
sphere.castShadow = true
sphere.position.x = 20
sphere.position.y = 4
sphere.position.z = 2
scene.add(sphere)
// 添加平行光
const directionalColor = '#ff5808'
const directionalLight = new DirectionalLight(directionalColor)
directionalLight.position.set(-40, 60, -10)
directionalLight.castShadow = true
directionalLight.intensity = 0.5
scene.add(directionalLight)
// 添加坐标系
const axes = new AxesHelper(20)
scene.add(axes)
const controlRef = ref({
rotationSpeed: 0.02,//旋转速度
bouncingSpeed: 0.03,//弹跳速度
numberOfObjects: 0,//统计
addCube: function () {
const cubeGeometry = new BoxGeometry(4, 4, 4)
// const cubeMaterial = new MeshLambertMaterial({ color: Math.random() * 255, wireframe: false })
const cube = new Mesh(cubeGeometry, cubeMaterial)
cube.name = "cube-" + scene.children.length
cube.castShadow = true
cube.position.x = -30 + Math.round((Math.random() * 60))
cube.position.y = Math.round((Math.random() * 5))
cube.position.z = -20 + Math.round((Math.random() * 40))
scene.add(cube)
// console.log(scene.children);
this.numberOfObjects = scene.children.length
},
// 删除
remove: function () {
// 拿到所有子物体
const allChildren = scene.children
// 拿到最后一个
const lastObject = allChildren[allChildren.length - 1]
if (lastObject instanceof Mesh && lastObject.name.startsWith('cube')) {
scene.remove(lastObject)
}
this.numberOfObjects = scene.children.length
},
// 雾化
addFog: function () {
const fog = new Fog(0xffffff, 0.015, 100)
fog.name = 'fog'
scene.fog = fog
this.numberOfObjects = scene.children.length
},
// 移除雾化
removeFog: function () {
scene.fog = null
},
// 改变材质
toggleMaterial: function () {
if (!scene.overrideMaterial) {
scene.overrideMaterial = new MeshLambertMaterial({
color: 0xffffff
})
} else {
scene.overrideMaterial = null
}
},
pointColor: "#ccffcc",
distance: 100,
intensity: 1,
debug: false,
// 聚焦的对象
target: 'plane'
})
// 添加一个灯泡(发光的物体)
const lookAtGeom = new SphereGeometry(1)
const lookAtMesh = new Mesh(lookAtGeom, new MeshLambertMaterial({
color: 0xff0000
}))
scene.add(lookAtMesh)
// 添加点光源
const pointLight = new PointLight(controlRef.value.pointColor)
pointLight.distance = 100
pointLight.position.copy(lookAtMesh.position)
scene.add(pointLight)
// 添加辅助线
const cameraHelper = new CameraHelper(directionalLight.shadow.camera)
watch(() => controlRef.value.debug, (n) => {
if (n) {
scene.add(cameraHelper)
} else {
scene.remove(cameraHelper)
}
})
watch(() => controlRef.value.pointColor, () => {
pointLight.color = new Color(controlRef.value.pointColor)
})
// 光源投射的直径
watch(() => controlRef.value.distance, () => {
pointLight.distance = controlRef.value.distance
})
// 强度(灯泡多少瓦数)
watch(() => controlRef.value.intensity, () => {
pointLight.intensity = controlRef.value.intensity
})
watch(() => controlRef.value.target, (t) => {
if (t === 'cube') {
directionalLight.target = cube
} else if (t === 'sphere') {
directionalLight.target = sphere
} else {
directionalLight.target = plane
}
})
// const gui = new dat.GUI()
// gui.add(controlRef.value,"rotationSpeed",0,0.5)
// gui.add(controlRef.value,"bouncingSpeed",0,0.5)
// 判斷
if (document.querySelectorAll(".dg.ac>.dg.main.a").length === 0) {
const gui = new dat.GUI()
gui.add(controlRef.value, "numberOfObjects").listen()
gui.add(controlRef.value, "addCube")
gui.add(controlRef.value, "remove")
gui.add(controlRef.value, "debug")
gui.add(controlRef.value, "target", ['plane', 'cube', 'sphere'])
gui.add(controlRef.value, "addFog")
gui.add(controlRef.value, "removeFog")
gui.add(controlRef.value, "toggleMaterial")
gui.add(controlRef.value, "rotationSpeed", 0, 0.5)
gui.add(controlRef.value, "bouncingSpeed", 0, 0.5)
gui.add(controlRef.value, "distance", 0, 100)
gui.add(controlRef.value, "intensity", 0, 3)
gui.addColor(controlRef.value, "pointColor")
}
let step = 0
function renderScene() {
stats.update()
// 让小球动起来
step += 0.1
lookAtMesh.position.set(
20 + 10 * Math.cos(step),
5 + 10 * Math.abs(Math.sin(step)),
10 * Math.cos(step)
)
// 点光源跟随小球的位置
spotLight.position.copy(lookAtMesh.position)
requestAnimationFrame(renderScene)
renderer.render(scene, camera)
}
renderScene()
onMounted(() => {
statsRef.value?.append(stats.dom)
containerRef.value?.appendChild(renderer.domElement)
renderer.render(scene, camera)
})
// 监听窗口变化
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight
// 更新相机投影矩阵
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
}, false)
</script>
<style scoped>
</style>