這里假設(shè)已經(jīng)了解threejs中基本的三要素等基礎(chǔ)知識(shí)
如題，前戲不多钾虐，直接提槍上陣
第一步： 創(chuàng)建一個(gè)vue-cli項(xiàng)目
按照vue-cli官網(wǎng)方式創(chuàng)建 , 這里話不多說噪窘，不需要過多設(shè)置，能運(yùn)行起來就歐克（當(dāng)然是vue2.x）效扫。
第二步： 安裝threejs插件
完全可以按照threejs官網(wǎng)的教程安裝
注意：如果打開為英文狀態(tài)倔监，可以在左上角那個(gè)地方點(diǎn)擊en，切換成中文
image.png
第三步： 初始項(xiàng)目展示頁面
安裝完成之后菌仁，運(yùn)行項(xiàng)目浩习， 當(dāng)然沒什么屌變化，還是初始界面掘托。
所以現(xiàn)在以組件的形式繼續(xù)實(shí)現(xiàn)標(biāo)題內(nèi)容瘦锹。
這里只在vue-cli中運(yùn)行threejs，所以不安裝其他插件闪盔，干擾視線
image.png
上圖是目錄結(jié)構(gòu)弯院，下面的代碼內(nèi)容主要是在ThreeJs組件中實(shí)現(xiàn)。所以泪掀，目前主要是先把測試ThreeJs是否能正常引入并展示听绳。（PS： 按照HelloWorld組件的方式，基本上不會(huì)出錯(cuò)）
App.vue中的代碼：
image.png
ThreeJs中的代碼:
image.png
到目前為止异赫，基本上頁面上會(huì)展示 hello-threejs
image.png
第四步：開始在ThreeJS組件中椅挣，實(shí)現(xiàn)threejs的舞臺(tái)
- 初始化舞臺(tái)头岔，
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;
// 初始化設(shè)置寬高比
this.cameraParam.aspect = this.canvasW / this.canvasH
},
mounted(){
this.start()
},
methods: {
start(){
// 初始化三要素
this.initMain()
// 啟用渲染
this.render()
},
initMain(){
// 初始化三要素
this.initScene()
this.initCamera()
this.initRenderer()
// 添加環(huán)境光
this.addLight()
},
initScene(){
// 創(chuàng)建場景
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color('white');
},
initCamera(){
// 創(chuàng)建透視攝像頭
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,//是否開啟反鋸齒，設(shè)置為true開啟反鋸齒鼠证。
alpha: true,//是否可以設(shè)置背景色透明峡竣。
logarithmicDepthBuffer: true//模型的重疊部位便不停的閃爍起來。這便是Z-Fighting問題量九，為解決這個(gè)問題适掰，我們可以采用該種方法
})
},
addLight(){
// 環(huán)境光
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.AmbientLight(color, intensity);
this.scene.add(light)
},
render(){
// 啟動(dòng)動(dòng)畫
this.renderer.render(this.scene, this.camera);
// 動(dòng)態(tài)監(jiān)聽窗口尺寸變化
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>
到這里，基本上你會(huì)看到一個(gè)白色的地的空白頁面荠列，因?yàn)檫€沒有往畫布里面添加內(nèi)容
- 添加形狀以及文字
在data中添加
data(){
return{
...,
planArr: [
{ x: -3, y: 3, name: '第一塊區(qū)域' },
{ x: 3, y: 3, name: '第二塊區(qū)域'},
{ x: -3, y: -3, name: '第三塊區(qū)域' },
{ x: 3, y: -3, name: '第四塊區(qū)域' }
]
}
}
在methods方法中添加
methods: {
...,
initMain(){
// 這個(gè)是已經(jīng)有的方法类浪，
// 只是需要在這里調(diào)用一下創(chuàng)建幾何體的方法
...,
// 添加形狀
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
// 設(shè)置幾何模型形變
cube.position.set(this.planArr[i].x, this.planArr[i].y, 0)
}
},
}
到這里，你會(huì)看到下面的效果圖：
image.png
- 添加鼠標(biāo)劃過方塊以及點(diǎn)擊方塊時(shí)的事件
同樣首先在data中添加數(shù)據(jù)
data(){
return{
...,
events: {
raycaster: new THREE.Raycaster(),
pickedObject: null,
pickedObjectSavedColor: 0,
pickPosition: { x: 0, y: 0 }
},
}
}
在methods中添加方法
methods: {
...,
// 點(diǎn)擊當(dāng)前坐標(biāo)
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(`您已經(jīng)取消選中--${obj.name}`)
}else{
obj.material.color.setHex(0xFFFF00)
alert(`您選中了--${obj.name}`)
}
})
},
// 獲取當(dāng)前焦點(diǎn)坐標(biāo)
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)
},
// 獲取當(dāng)前事件焦點(diǎn)坐標(biāo)所在位置
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
}
},
// 添加鼠標(biāo)劃過以及點(diǎn)擊事件
clickEvents(){
window.addEventListener('click', this.clickPickPosition);
window.addEventListener('mousemove', this.setPickPosition);
},
// 創(chuàng)建點(diǎn)擊事件(默認(rèn)是離攝像頭最近的相交)
pickEvents(normalizedPosition, scene, camera, callback){
// 如果存在拾取的對(duì)象肌似，則恢復(fù)顏色
if(this.events.pickedObject){
this.events.pickedObject.material.emissive.setHex(this.events.pickedObjectSavedColor);
this.events.pickedObject = undefined;
}
// 沿著攝像頭的方向投射射線
this.events.raycaster.setFromCamera(normalizedPosition, camera)
// 獲取與射線光線相交的對(duì)象列表
const intersectedObjects = this.events.raycaster.intersectObjects(this.scene.children);
if(intersectedObjects.length){
// 獲取與射線光纖相交的第一個(gè)對(duì)象费就。也是最近的一個(gè)
this.events.pickedObject = intersectedObjects[0].object;
// 保存當(dāng)前對(duì)象的顏色
this.events.pickedObjectSavedColor = this.events.pickedObject.material.emissive.getHex();
// 將其發(fā)射顏色設(shè)置為閃爍的紅色/黃色
this.events.pickedObject.material.emissive.setHex(0xFFFF00)
if(callback){
callback(this.events.pickedObject)
}
}
},
}
在methods的initMain方法中調(diào)用一下鼠標(biāo)點(diǎn)擊事件
methods: {
initMain(){
...,
this.clickEvents();
}
}
至此，基本上已經(jīng)完全實(shí)現(xiàn)效果： 鼠標(biāo)滑過幾何體變成黃色川队，點(diǎn)擊幾何體變成黃色
完整版代碼中添加了文字
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: '第一塊區(qū)域' },
{ x: 3, y: 3, name: '第二塊區(qū)域'},
{ x: -3, y: -3, name: '第三塊區(qū)域' },
{ x: 3, y: -3, name: '第四塊區(qū)域' }
],
events: {
raycaster: new THREE.Raycaster(),
pickedObject: null,
pickedObjectSavedColor: 0,
pickPosition: { x: 0, y: 0 }
}
}
},
created() {
this.canvasW = window.innerWidth;
this.canvasH = window.innerHeight;
// 初始化設(shè)置寬高比
this.cameraParam.aspect = this.canvasW / this.canvasH
},
mounted(){
this.start()
},
methods: {
start(){
// 初始化三要素
this.initMain()
// 啟用渲染
this.render()
},
initMain(){
// 初始化三要素
this.initScene()
this.initCamera()
this.initRenderer()
// 添加環(huán)境光
this.addLight()
// 添加形狀
this.createCube()
// 調(diào)用點(diǎn)擊事件
this.clickEvents()
},
initScene(){
// 創(chuàng)建場景
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color('white');
},
initCamera(){
// 創(chuàng)建透視攝像頭
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,//是否開啟反鋸齒力细，設(shè)置為true開啟反鋸齒。
alpha: true,//是否可以設(shè)置背景色透明呼寸。
logarithmicDepthBuffer: true//模型的重疊部位便不停的閃爍起來艳汽。這便是Z-Fighting問題，為解決這個(gè)問題对雪，我們可以采用該種方法
})
},
addLight(){
// 環(huán)境光
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.AmbientLight(color, intensity);
this.scene.add(light)
},
render(){
// 啟動(dòng)動(dòng)畫
this.renderer.render(this.scene, this.camera);
// 動(dòng)態(tài)監(jiān)聽窗口尺寸變化
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;
},
// ====================================基礎(chǔ)設(shè)置完成=======================
// ====================================創(chuàng)建立方體========================
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
// 設(shè)置幾何模型形變
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,
});
//創(chuàng)建坐標(biāo)點(diǎn)河狐，并將材質(zhì)給坐標(biāo)
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);
}
},
// 創(chuàng)建文字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;
},
// 點(diǎn)擊當(dāng)前坐標(biāo)
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(`您已經(jīng)取消選中--${obj.name}`)
}else{
obj.material.color.setHex(0xFFFF00)
alert(`您選中了--${obj.name}`)
}
})
},
// 獲取當(dāng)前焦點(diǎn)坐標(biāo)
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)
},
// 獲取當(dāng)前事件焦點(diǎn)坐標(biāo)所在位置
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
}
},
// 添加鼠標(biāo)劃過以及點(diǎn)擊事件
clickEvents(){
window.addEventListener('click', this.clickPickPosition);
window.addEventListener('mousemove', this.setPickPosition);
},
// 創(chuàng)建點(diǎn)擊事件(默認(rèn)是離攝像頭最近的相交)
pickEvents(normalizedPosition, scene, camera, callback){
// 如果存在拾取的對(duì)象，則恢復(fù)顏色
if(this.events.pickedObject){
this.events.pickedObject.material.emissive.setHex(this.events.pickedObjectSavedColor);
this.events.pickedObject = undefined;
}
// 沿著攝像頭的方向投射射線
this.events.raycaster.setFromCamera(normalizedPosition, camera)
// 獲取與射線光線相交的對(duì)象列表
const intersectedObjects = this.events.raycaster.intersectObjects(this.scene.children);
if(intersectedObjects.length){
// 獲取與射線光纖相交的第一個(gè)對(duì)象瑟捣。也是最近的一個(gè)
this.events.pickedObject = intersectedObjects[0].object;
// 保存當(dāng)前對(duì)象的顏色
this.events.pickedObjectSavedColor = this.events.pickedObject.material.emissive.getHex();
// 將其發(fā)射顏色設(shè)置為閃爍的紅色/黃色
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>
最終展示效果：
鼠標(biāo)劃過
第一次點(diǎn)擊選中幾何體
第二次點(diǎn)擊取消選中幾何體
