这里假设已经了解threejs中基本的三要素等基础知识
如题，前戏不多，直接提枪上阵
第一步： 创建一个vue-cli项目
按照vue-cli官网方式创建 , 这里话不多说，不需要过多设置，能运行起来就欧克（当然是vue2.x）。
第二步： 安装threejs插件
完全可以按照threejs官网的教程安装
注意：如果打开为英文状态，可以在左上角那个地方点击en，切换成中文
image.png
第三步： 初始项目展示页面
安装完成之后，运行项目， 当然没什么屌变化，还是初始界面。
所以现在以组件的形式继续实现标题内容。
这里只在vue-cli中运行threejs，所以不安装其他插件，干扰视线
image.png
上图是目录结构，下面的代码内容主要是在ThreeJs组件中实现。所以，目前主要是先把测试ThreeJs是否能正常引入并展示。（PS： 按照HelloWorld组件的方式，基本上不会出错）
App.vue中的代码：
image.png
ThreeJs中的代码:
image.png
到目前为止，基本上页面上会展示 hello-threejs
image.png
第四步：开始在ThreeJS组件中，实现threejs的舞台
- 初始化舞台，
ThreeJs组件
<template>
<div>
<canvas class="c" ref="ThreeJS"></canvas>
</div>
</template>
<script>
import * as THREE from 'three'
export default{
data(){
return{
scene: null,
camera: null,
cameraPole: null,
renderer: null,
canvas: null,
canvasW: 0,
canvasH: 0,
cameraParam: {
fov: 30,
aspect: 2,
near: .1,
far: 200
},
}
},
created() {
this.canvasW = window.innerWidth;
this.canvasH = window.innerHeight;
// 初始化设置宽高比
this.cameraParam.aspect = this.canvasW / this.canvasH
},
mounted(){
this.start()
},
methods: {
start(){
// 初始化三要素
this.initMain()
// 启用渲染
this.render()
},
initMain(){
// 初始化三要素
this.initScene()
this.initCamera()
this.initRenderer()
// 添加环境光
this.addLight()
},
initScene(){
// 创建场景
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color('white');
},
initCamera(){
// 创建透视摄像头
const cP = this.cameraParam;
this.camera = new THREE.PerspectiveCamera(cP.fov, cP.aspect, cP.near, cP.far);
this.camera.position.z = 30;
this.scene.add(this.camera)
},
initRenderer(){
// 渲染器
this.canvas = this.$refs.ThreeJS;
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas,
antialias: true,//是否开启反锯齿，设置为true开启反锯齿。
alpha: true,//是否可以设置背景色透明。
logarithmicDepthBuffer: true//模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题，为解决这个问题，我们可以采用该种方法
})
},
addLight(){
// 环境光
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.AmbientLight(color, intensity);
this.scene.add(light)
},
render(){
// 启动动画
this.renderer.render(this.scene, this.camera);
// 动态监听窗口尺寸变化
if (this.resizeRendererToDisplaySize(this.renderer)) {
const canvas = this.renderer.domElement;
this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
this.camera.updateProjectionMatrix();
}
requestAnimationFrame(this.render.bind(this))
},
resizeRendererToDisplaySize(renderer){
const canvas = renderer.domElement;
this.canvasW = window.innerWidth;
this.canvasH = window.innerHeight;
const needResize = canvas.width !== this.canvasW || canvas.height !== this.canvasH;
if(needResize){
this.renderer.setSize(this.canvasW, this.canvasH, false);
}
return needResize;
},
}
}
</script>
<style>
html, body{
height: 100%;
margin: 0;
background: #0033CC;
}
.c{
width: 100%;
height: 100%;
display: block;
}
</style>
到这里，基本上你会看到一个白色的地的空白页面，因为还没有往画布里面添加内容
- 添加形状以及文字
在data中添加
data(){
return{
...,
planArr: [
{ x: -3, y: 3, name: '第一块区域' },
{ x: 3, y: 3, name: '第二块区域'},
{ x: -3, y: -3, name: '第三块区域' },
{ x: 3, y: -3, name: '第四块区域' }
]
}
}
在methods方法中添加
methods: {
...,
initMain(){
// 这个是已经有的方法，
// 只是需要在这里调用一下创建几何体的方法
...,
// 添加形状
this.createCube()
},
geometry(width, height, depth){
return new THREE.BoxGeometry(width, height, depth)
},
createCube(){
for(let i = 0; i < this.planArr.length; i++){
// 添加几何体
const material = new THREE.MeshPhongMaterial({
color: 0x8aff58
})
const cube = new THREE.Mesh(this.geometry(5, 5, .001), material);
this.scene.add(cube);
// 添加名称
cube.name = this.planArr[i].name
// 设置几何模型形变
cube.position.set(this.planArr[i].x, this.planArr[i].y, 0)
}
},
}
到这里，你会看到下面的效果图：
image.png
- 添加鼠标划过方块以及点击方块时的事件
同样首先在data中添加数据
data(){
return{
...,
events: {
raycaster: new THREE.Raycaster(),
pickedObject: null,
pickedObjectSavedColor: 0,
pickPosition: { x: 0, y: 0 }
},
}
}
在methods中添加方法
methods: {
...,
// 点击当前坐标
clickPickPosition(){
this.pickEvents(this.events.pickPosition, this.scene, this.camera, obj=>{
obj.userData.checked = !obj.userData.checked;
// alert(`您选中了--${obj.name}`)
if(!obj.userData.checked){
obj.material.color.setHex(0x8aff58)
alert(`您已经取消选中--${obj.name}`)
}else{
obj.material.color.setHex(0xFFFF00)
alert(`您选中了--${obj.name}`)
}
})
},
// 获取当前焦点坐标
setPickPosition(event){
const pos = this.getCanvasRelativePosition(event);
this.events.pickPosition.x = (pos.x / this.canvas.width) * 2 - 1;
this.events.pickPosition.y = (pos.y / this.canvas.height) * -2 + 1;
this.pickEvents(this.events.pickPosition, this.scene, this.camera)
},
// 获取当前事件焦点坐标所在位置
getCanvasRelativePosition(event){
const rect = this.canvas.getBoundingClientRect();
return {
x: (event.clientX - rect.left) * this.canvas.width / rect.width,
y: (event.clientY - rect.top) * this.canvas.height / rect.height
}
},
// 添加鼠标划过以及点击事件
clickEvents(){
window.addEventListener('click', this.clickPickPosition);
window.addEventListener('mousemove', this.setPickPosition);
},
// 创建点击事件(默认是离摄像头最近的相交)
pickEvents(normalizedPosition, scene, camera, callback){
// 如果存在拾取的对象，则恢复颜色
if(this.events.pickedObject){
this.events.pickedObject.material.emissive.setHex(this.events.pickedObjectSavedColor);
this.events.pickedObject = undefined;
}
// 沿着摄像头的方向投射射线
this.events.raycaster.setFromCamera(normalizedPosition, camera)
// 获取与射线光线相交的对象列表
const intersectedObjects = this.events.raycaster.intersectObjects(this.scene.children);
if(intersectedObjects.length){
// 获取与射线光纤相交的第一个对象。也是最近的一个
this.events.pickedObject = intersectedObjects[0].object;
// 保存当前对象的颜色
this.events.pickedObjectSavedColor = this.events.pickedObject.material.emissive.getHex();
// 将其发射颜色设置为闪烁的红色/黄色
this.events.pickedObject.material.emissive.setHex(0xFFFF00)
if(callback){
callback(this.events.pickedObject)
}
}
},
}
在methods的initMain方法中调用一下鼠标点击事件
methods: {
initMain(){
...,
this.clickEvents();
}
}
至此，基本上已经完全实现效果： 鼠标滑过几何体变成黄色，点击几何体变成黄色
完整版代码中添加了文字
ThreeJS.vue完整版代码：
<template>
<div>
<canvas class="c" ref="ThreeJS"></canvas>
</div>
</template>
<script>
import * as THREE from 'three'
export default{
data(){
return{
scene: null,
camera: null,
cameraPole: null,
renderer: null,
canvas: null,
canvasW: 0,
canvasH: 0,
cameraParam: {
fov: 30,
aspect: 2,
near: .1,
far: 200
},
planArr: [
{ x: -3, y: 3, name: '第一块区域' },
{ x: 3, y: 3, name: '第二块区域'},
{ x: -3, y: -3, name: '第三块区域' },
{ x: 3, y: -3, name: '第四块区域' }
],
events: {
raycaster: new THREE.Raycaster(),
pickedObject: null,
pickedObjectSavedColor: 0,
pickPosition: { x: 0, y: 0 }
}
}
},
created() {
this.canvasW = window.innerWidth;
this.canvasH = window.innerHeight;
// 初始化设置宽高比
this.cameraParam.aspect = this.canvasW / this.canvasH
},
mounted(){
this.start()
},
methods: {
start(){
// 初始化三要素
this.initMain()
// 启用渲染
this.render()
},
initMain(){
// 初始化三要素
this.initScene()
this.initCamera()
this.initRenderer()
// 添加环境光
this.addLight()
// 添加形状
this.createCube()
// 调用点击事件
this.clickEvents()
},
initScene(){
// 创建场景
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color('white');
},
initCamera(){
// 创建透视摄像头
const cP = this.cameraParam;
this.camera = new THREE.PerspectiveCamera(cP.fov, cP.aspect, cP.near, cP.far);
this.camera.position.z = 30;
this.scene.add(this.camera)
},
initRenderer(){
// 渲染器
this.canvas = this.$refs.ThreeJS;
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas,
antialias: true,//是否开启反锯齿，设置为true开启反锯齿。
alpha: true,//是否可以设置背景色透明。
logarithmicDepthBuffer: true//模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题，为解决这个问题，我们可以采用该种方法
})
},
addLight(){
// 环境光
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.AmbientLight(color, intensity);
this.scene.add(light)
},
render(){
// 启动动画
this.renderer.render(this.scene, this.camera);
// 动态监听窗口尺寸变化
if (this.resizeRendererToDisplaySize(this.renderer)) {
const canvas = this.renderer.domElement;
this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
this.camera.updateProjectionMatrix();
}
requestAnimationFrame(this.render.bind(this))
},
resizeRendererToDisplaySize(renderer){
const canvas = renderer.domElement;
this.canvasW = window.innerWidth;
this.canvasH = window.innerHeight;
const needResize = canvas.width !== this.canvasW || canvas.height !== this.canvasH;
if(needResize){
this.renderer.setSize(this.canvasW, this.canvasH, false);
}
return needResize;
},
// ====================================基础设置完成=======================
// ====================================创建立方体========================
geometry(width, height, depth){
return new THREE.BoxGeometry(width, height, depth)
},
createCube(){
for(let i = 0; i < this.planArr.length; i++){
// 添加几何体
const material = new THREE.MeshPhongMaterial({
color: 0x8aff58
})
const cube = new THREE.Mesh(this.geometry(5, 5, .001), material);
this.scene.add(cube);
// 添加名称
cube.name = this.planArr[i].name
// 设置几何模型形变
cube.position.set(this.planArr[i].x, this.planArr[i].y, 0)
// 添加文字
let texture = new THREE.Texture(this.getTextCanvas(this.planArr[i].name));
texture.needsUpdate = true;
let spriteMaterial = new THREE.PointsMaterial({
map: texture,
size: 12,
transparent: true,
opacity: 1,
});
//创建坐标点，并将材质给坐标
let geometry = new THREE.BufferGeometry();
let vertices = [0, 0, 0];
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
let sprite = new THREE.Points(geometry, spriteMaterial);
sprite.position.set(0, 0, .002);
cube.add(sprite);
}
},
// 创建文字canvas
getTextCanvas(text){
var width=100, height=100;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, width, height);
ctx.font = '6px';
ctx.fillStyle = '#2891FF';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, width/2,height/2);
return canvas;
},
// 点击当前坐标
clickPickPosition(){
this.pickEvents(this.events.pickPosition, this.scene, this.camera, obj=>{
obj.userData.checked = !obj.userData.checked;
// alert(`您选中了--${obj.name}`)
if(!obj.userData.checked){
obj.material.color.setHex(0x8aff58)
alert(`您已经取消选中--${obj.name}`)
}else{
obj.material.color.setHex(0xFFFF00)
alert(`您选中了--${obj.name}`)
}
})
},
// 获取当前焦点坐标
setPickPosition(event){
const pos = this.getCanvasRelativePosition(event);
this.events.pickPosition.x = (pos.x / this.canvas.width) * 2 - 1;
this.events.pickPosition.y = (pos.y / this.canvas.height) * -2 + 1;
this.pickEvents(this.events.pickPosition, this.scene, this.camera)
},
// 获取当前事件焦点坐标所在位置
getCanvasRelativePosition(event){
const rect = this.canvas.getBoundingClientRect();
return {
x: (event.clientX - rect.left) * this.canvas.width / rect.width,
y: (event.clientY - rect.top) * this.canvas.height / rect.height
}
},
// 添加鼠标划过以及点击事件
clickEvents(){
window.addEventListener('click', this.clickPickPosition);
window.addEventListener('mousemove', this.setPickPosition);
},
// 创建点击事件(默认是离摄像头最近的相交)
pickEvents(normalizedPosition, scene, camera, callback){
// 如果存在拾取的对象，则恢复颜色
if(this.events.pickedObject){
this.events.pickedObject.material.emissive.setHex(this.events.pickedObjectSavedColor);
this.events.pickedObject = undefined;
}
// 沿着摄像头的方向投射射线
this.events.raycaster.setFromCamera(normalizedPosition, camera)
// 获取与射线光线相交的对象列表
const intersectedObjects = this.events.raycaster.intersectObjects(this.scene.children);
if(intersectedObjects.length){
// 获取与射线光纤相交的第一个对象。也是最近的一个
this.events.pickedObject = intersectedObjects[0].object;
// 保存当前对象的颜色
this.events.pickedObjectSavedColor = this.events.pickedObject.material.emissive.getHex();
// 将其发射颜色设置为闪烁的红色/黄色
this.events.pickedObject.material.emissive.setHex(0xFFFF00)
if(callback){
callback(this.events.pickedObject)
}
}
},
}
}
</script>
<style>
html, body{
height: 100%;
margin: 0;
background: #0033CC;
}
.c{
width: 100%;
height: 100%;
display: block;
}
</style>
最终展示效果：
鼠标划过
第一次点击选中几何体
第二次点击取消选中几何体
