Browse Source

优化

master
lxc 2 years ago
parent
commit
65430da79c
  1. BIN
      .DS_Store
  2. BIN
      assets/.DS_Store
  3. 20
      js/app.js
  4. BIN
      libs/.DS_Store
  5. BIN
      libs/three/.DS_Store
  6. BIN
      libs/three/jsm/.DS_Store
  7. 5
      lndexUASB.html
  8. 48
      lndexUASB2.html
  9. 616
      lndexUASBUpdate.html
  10. 145
      temp.html

BIN
.DS_Store

Binary file not shown.

BIN
assets/.DS_Store

Binary file not shown.

20
js/app.js

@ -14,6 +14,8 @@ var APP = {
var waters = []; var waters = [];
//CSS 标签列表 //CSS 标签列表
var BIG_LABEL_ARR = []; var BIG_LABEL_ARR = [];
//刷新函数列表
var FUN_ARR = [];
camera = new THREE.PerspectiveCamera( camera = new THREE.PerspectiveCamera(
45, 45,
@ -223,10 +225,15 @@ var APP = {
glRenderer.render(glScene, camera); glRenderer.render(glScene, camera);
cssRenderer.render(cssScene, camera); cssRenderer.render(cssScene, camera);
// waters.forEach(water => { waters.forEach(water => {
// // 播放特效 // 播放特效
// water.material.uniforms['time'].value += 1.0 / 60.0; water.material.uniforms['time'].value += 1.0 / 60.0;
// }); });
FUN_ARR.forEach( fun=> {
// 播放特效
fun();
});
} }
@ -417,6 +424,11 @@ var APP = {
}) })
} }
this.addRefeshFunction = function(fun){
FUN_ARR.push(fun);
}
} }
}; };

BIN
libs/.DS_Store

Binary file not shown.

BIN
libs/three/.DS_Store

Binary file not shown.

BIN
libs/three/jsm/.DS_Store

Binary file not shown.

5
lndexUASB.html

@ -32,7 +32,7 @@
.label { .label {
color: #ff000f; color: #ff000f;
font-family: sans-serif; font-family: sans-serif;
padding: 20px; padding: 40px;
background: rgba(149, 140, 140, 0.6); background: rgba(149, 140, 140, 0.6);
} }
@ -96,6 +96,7 @@
var player = new APP.Player(); var player = new APP.Player();
//水泵列表 //水泵列表
var PUMP_MODEL_ARR = [] var PUMP_MODEL_ARR = []
var bigLabelArr = []
//红色标签 //红色标签
@ -230,7 +231,7 @@
}) })
console.log('pumpModelArr=', pumpModelArr) console.log('pumpModelArr=', PUMP_MODEL_ARR)
} }
// 设置标签 // 设置标签

48
lndexUASB2.html

@ -32,15 +32,9 @@
.label { .label {
color: #ff000f; color: #ff000f;
font-family: sans-serif; font-family: sans-serif;
padding: 20px; padding: 40px;
background: rgba(149, 140, 140, 0.6); background: rgba(149, 140, 140, 0.6);
} }
.red-box-label {
color: #ff000f;
font-family: sans-serif;
padding: 20px;
background: rgba(255, 0, 0, 0.6);
}
.btn { .btn {
color: #ff000f; color: #ff000f;
@ -96,14 +90,15 @@
window.THREE = THREE; // Used by APP Scripts. window.THREE = THREE; // Used by APP Scripts.
var client = null; var mqttclient = null;
var player = new APP.Player(); var player = new APP.Player();
//水泵列表 //水泵列表
var pumpModelArr = [] var PUMP_MODEL_ARR = []
var bigLabelArr = [] var bigLabelArr = []
//红色标签 //红色标签
// const labArr = [{ name: "水泵M_1", text: "水泵1" }, { name: "水泵M_2", text: "水泵002" } // const labArr = [{ name: "水泵M_1", text: "水泵1" }, { name: "水泵M_2", text: "水泵002" }
// , { name: "水泵M_3", text: "水泵003" }, { name: "水泵M_4", text: "水泵4" }, { name: "水泵M_5", text: "水泵5" } // , { name: "水泵M_3", text: "水泵003" }, { name: "水泵M_4", text: "水泵4" }, { name: "水泵M_5", text: "水泵5" }
@ -142,6 +137,7 @@
addRemarkLabels(); addRemarkLabels();
mqttInit(); mqttInit();
updateLabel();
// for (var i = 0; i < 1; i++) { // for (var i = 0; i < 1; i++) {
// player.create3dPage( // player.create3dPage(
// 1020, 680, // 1020, 680,
@ -216,7 +212,7 @@
} }
else if (item.name.indexOf('水泵M_') > -1) { // 水泵 else if (item.name.indexOf('水泵M_') > -1) { // 水泵
x = x + 1; x = x + 1;
pumpModelArr.push(item); PUMP_MODEL_ARR.push(item);
//debugger //debugger
if (item.name === '水泵001') { if (item.name === '水泵001') {
item.material.color.set(0x00f); item.material.color.set(0x00f);
@ -235,7 +231,7 @@
}) })
console.log('pumpModelArr=', pumpModelArr) console.log('pumpModelArr=', PUMP_MODEL_ARR)
} }
// 设置标签 // 设置标签
@ -520,14 +516,14 @@
username: config.mqttUserName, username: config.mqttUserName,
password: config.mqttPassword, password: config.mqttPassword,
} }
client = mqtt.connect('ws://127.0.0.1:8083/mqtt', options); mqttclient = mqtt.connect('ws://127.0.0.1:8083/mqtt', options);
client.on('reconnect', function (error) { mqttclient.on('reconnect', function (error) {
console.log("reconnect"); console.log("reconnect");
}) })
client.on('error', function (error) { mqttclient.on('error', function (error) {
console.log('连接失败:', error) console.log('连接失败:', error)
}) })
client.on('message', function (topic, message, s) { mqttclient.on('message', function (topic, message, s) {
console.log(topic, message.toString()); console.log(topic, message.toString());
if (message.toString() == '1') { if (message.toString() == '1') {
// if (that.lastTime + 2 * 1000 < new Date().getTime()) { // if (that.lastTime + 2 * 1000 < new Date().getTime()) {
@ -536,14 +532,17 @@
// } // }
} }
}) })
client.subscribe("/scene/update/*"); mqttclient.subscribe("/scene/update/*", (err) => {
client.subscribe("scene"); if (!err) {
client.publish('/sys/update/scene', 'scene'); console.log(`订阅/scene/update/* 成功`);
client.subscribe("RTData", (err) => { }
});
mqttclient.subscribe("RTData", (err) => {
if (!err) { if (!err) {
console.log(`订阅 RTData 成功`); console.log(`订阅 RTData 成功`);
} }
}); });
mqttclient.publish('/sys/update/scene', 'scene');
} }
//打开对话框 //打开对话框
function openDialog(tmpobj) { function openDialog(tmpobj) {
@ -561,10 +560,15 @@
}); });
} }
function updateLabel(event) { function updateLabel() {
// return
alert(event) // debugger
setTimeout(updateLabel, 1000); //5秒后执行
let date = new Date();
let m = date.getSeconds();
player.updateLabel("", m);
} }
</script> </script>

616
lndexUASBUpdate.html

@ -0,0 +1,616 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="generator" content="Three.js Editor">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: sans-serif;
font-size: 11px;
background-color: #000;
margin: 0px;
}
canvas {
display: block;
}
.info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
color: brown;
font-size: 40px;
}
.label {
color: #ff000f;
font-family: sans-serif;
padding: 40px;
background: rgba(149, 140, 140, 0.6);
}
.btn {
color: #ff000f;
font-family: sans-serif;
padding: 20px;
background: rgba(149, 140, 140, 0.6);
}
.label1 {
color: #ffffff;
font-family: sans-serif;
padding: 2px;
background: rgba(0, 0, 0, .6);
}
.container {
width: 100%;
height: 100%;
}
</style>
<script type="importmap">
{
"imports": {
"three": "./libs/three/three.module.js",
"jsm/": "./libs/three/jsm/"
}
}
</script>
<script async src="./libs/layui/layui.js"></script>
<script async src="./libs/mqtt/mqtt.min.js"></script>
</head>
<body ontouchstart="">
<div class="info">2D数据表格显示 不旋转 厌氧系统 <button onclick="btnclick()">全开</button></div>
<script type="module">
import * as THREE from 'three';
import { APP } from './js/app.js';
import { OrbitControls } from 'jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'jsm/loaders/GLTFLoader.js';
import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.js';
import { Water } from 'jsm/objects/Water.js';
import modellabel from './js/units/modellabel.js'
import css2dlabel from './js/units/css3dlabel.js'
import config from './js/config.js'
window.THREE = THREE; // Used by APP Scripts.
var mqttclient = null;
var player = new APP.Player();
//水泵列表
var PUMP_MODEL_ARR = []
var bigLabelArr = []
//红色标签
// const labArr = [{ name: "水泵M_1", text: "水泵1" }, { name: "水泵M_2", text: "水泵002" }
// , { name: "水泵M_3", text: "水泵003" }, { name: "水泵M_4", text: "水泵4" }, { name: "水泵M_5", text: "水泵5" }
// , { name: "OilTank001", text: "PT桶1" }, { name: "OilTank002", text: "PT桶2" }, { name: "OilTank003", text: "PT桶3" },
// ]
const labArr = [{ name: "水泵M_1", text: "水泵M_1", position: { x: 2.86, y: -0.34, z: -3.13 }, rotation: { x: 0, y: Math.PI, z: 0 } },
{ name: "水泵M_2", text: "水泵M_2", position: { x: 1.22, y: -0.59, z: -3.34 }, rotation: { x: 0, y: Math.PI, z: 0 } },
{ name: "水泵M_3", text: "水泵M_3", position: { x: -0.60, y: -0.31, z: -3.26 }, rotation: { x: 0, y: Math.PI, z: 0 } },
{ name: "水泵M_4", text: "水泵M_4", position: { x: -1.66, y: -0.62, z: -3.26 }, rotation: { x: 0, y: Math.PI, z: 0 } },
{ name: "水泵M_5", text: "水泵M_51", position: { x: -2.55, y: -0.3, z: -3.36 }, rotation: { x: 0, y: Math.PI, z: 0 } },
{ name: "OilTank001", text: "罐1", position: { x: 0.61, y: 2.44, z: 3.78 }, rotation: { x: 0, y: Math.PI, z: 0 } },
{ name: "OilTank002", text: "罐2", position: { x: -0.57, y: 2.47, z: 3.78 }, rotation: { x: 0, y: Math.PI, z: 0 } },
{ name: "OilTank003", text: "罐3", position: { x: 0.07, y: 2.58, z: 5.39 }, rotation: { x: 0, y: Math.PI, z: 0 } }
]
//模型标签
const remarkLabArr = [{ name: "221", text: "USAB进水", x: 2.0501311208405713, y: -0.7778027560129786, z: -5.4, ry: 360 }
, { name: "211", text: "USAB进水", x: 0.1740166304621844, y: -0.7760432883855322, z: -5.4, ry: 360 },
{ name: "491", text: "至污泥浓缩池", x: -2.105188770141037, y: -0.7901334936138524, z: -5.4, ry: 360 }]
//大标签
const bigLabArr = [{ name: "建筑_11", text: "建筑_1", x: 0.10, y: 0.16, z: -1.48, rx: 0, ry: 360, rz: 0 }]
init();
function init() {
player.play();
player.setSize(window.innerWidth, window.innerHeight);
window.addEventListener('resize', function () {
player.setSize(window.innerWidth, window.innerHeight);
});
//设置背景颜色
player.setClearColor(0x34495E);
initModel()
addRemarkLabels();
mqttInit();
updateLabel();
addLEDScreen();
// for (var i = 0; i < 1; i++) {
// player.create3dPage(
// 1020, 680,
// new THREE.Vector3(-2 - i, 2 + i / 3, -4.2 + i),
// new THREE.Vector3(0, Math.PI, 0),
// 'https://zuoben.blog.csdn.net/');
// }
}
// document.body.appendChild(player.dom);
function initModel() {
var loader = new THREE.FileLoader();
loader.load('uasb3.json', function (text) {
let json = JSON.parse(text);
let objloader = new THREE.ObjectLoader();
let scene = objloader.parse(json.scene)
player.addModels(scene);//.children[3]);
setModel(scene, player);
// AddWaters(player);
// addRemarkLabels();
});
}
function initModel1() {
var loader = new GLTFLoader();
loader.load('assets/models/uasb2.glb', function (gltf) {
// gltf.scene.traverse(function (child) {
// switch (child.name) {
// case 'walls':
// initWalls(child)
// break
// case 'stairs':
// initStairs(child)
// break
// }
// //设置展画边框贴图
// if (child.name.includes('paint')) {
// initFrames(child)
// }
// //设置展画图片贴图
// if (child.name.includes('draw')) {
// initDraws(child)
// }
// })
let tmpmodel = gltf.scene//.children[1];
tmpmodel.rotation.set(0, 2, -0.2)
player.addModels(tmpmodel);
setModel(tmpmodel, player);
});
}
var x = 0;
// 设置标签
function setModel(scene, player) {
scene.castShadow = true; // 开启阴影
scene.receiveShadow = true; // 接受阴影
scene.children.forEach((item, index) => {
console.log("x=", x, "--------item ==", index, "name=", item.name, "type=", item.type);
if (item.name.indexOf('OilTank00') > -1) {
addLabel(item, 0, 0.4, 0)
}
else if (item.name.indexOf('水泵M_') > -1) { // 水泵
x = x + 1;
PUMP_MODEL_ARR.push(item);
//debugger
if (item.name === '水泵001') {
item.material.color.set(0x00f);
} else {
item.material.color.set(0x006600);
}
addStateLabel(item, x / 2, 2 + x / 2, x / 2)
}
if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级
setModel(item, player);
}
})
console.log('pumpModelArr=', PUMP_MODEL_ARR)
}
// 设置标签
function setModel1(scene, player) {
// scene.castShadow = true; // 开启阴影
// scene.receiveShadow = true; // 接受阴影
scene.children.forEach((item, index) => {
console.log("--------item ==", index, "name=", item.name, "type=", item.type);
if (item.name.indexOf('OilTank00') > -1) {
addLabel(item, 0, 0.4, 0)
}
else if (item.name == "水泵001") {
item.material.color.set(0xff0);
}
else if (item.name == "水泵_2") {
item.material.color.set(0xff0000);
}
else if (item.name.indexOf('水泵M_') > -1 && item.type == "Mesh") { // 水泵
pumpModelArr.push(item);
// }
if (item.name === '水泵M_1') {
item.material.color.set(0xff0000);
} else {
item.material.color.set(0x006600);
}
addStateLabel(item, 0, 3, 0)
}
if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级
setModel(item, player);
}
})
console.log('pumpModelArr=', pumpModelArr)
}
//添加这个就可以用鼠标拖动
var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2()
//点击模型
// window.addEventListener('click', onMouseClick);
window.addEventListener('dblclick', onDBMouseClick);
function onMouseClick(event) {
//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
//console.log("mouse:"+mouse.x+","+mouse.y)
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
raycaster.setFromCamera(mouse, window.camera);
// 获取raycaster直线和所有模型相交的数组集合
var intersects = raycaster.intersectObjects(scene.children, true);
console.log(intersects);
//debugger
//将所有的相交的模型的颜色设置为红色
for (var i = 0; i < intersects.length; i++) {
let obj = intersects[i];
if (obj.object) {
if (obj.object.name == "视频监控1") {
obj.object.material.color.set(0xff6666);
alert("视频");
} else {
obj.object.material.color.set(0xff0000);
}
}
}
}
function onDBMouseClick(event) {
//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
//console.log("mouse:"+mouse.x+","+mouse.y)
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
raycaster.setFromCamera(mouse, window.camera);
// 获取raycaster直线和所有模型相交的数组集合
// debugger
var intersects = raycaster.intersectObjects(scene.children, true);
console.log("onclick ", intersects);
//debugger
//将所有的相交的模型的颜色设置为红色
for (var i = 0; i < intersects.length; i++) {
let obj = intersects[i];
if (obj.object) {
let tmpobj = obj.object;
console.log(tmpobj)
//输出 增加标签 位置
console.log('{name:"' + tmpobj.name + '",text:"' + tmpobj.name + '",position:{x:' + obj.point.x.toFixed(2) + ',y:' + obj.point.y.toFixed(2) + ',z:' + obj.point.z.toFixed(2) + '},rotation:{x:0,y: Math.PI,z:0}}');
// console.log('{name:"' + tmpobj.name + '1",text:"' + tmpobj.name + '",x:' + obj.point.x.toFixed(2) + ',y:' + obj.point.y.toFixed(2) + ',z:' + obj.point.z.toFixed(2) + ',rx:0,ry:0,rz:0}');
if (tmpobj.name.indexOf('水泵') > -1) { // 水泵
openDialog(tmpobj)
//alert(tmpobj.name, "双击");
}
break;
}
}
}
//添加 模型标签
function addRemarkLabels() {
remarkLabArr.forEach((item, index) => {
let labelMesh = modellabel.createRemarkLabel(item.text, item.x, item.y, item.z);
labelMesh.scale.set(0.005, 0.005, 0.005);
labelMesh.rotation.y = Math.PI * (item.ry / 360);
labelMesh.rotation.x = Math.PI * (30 / 360);;
// labelMesh.rotation.x= rz;
window.scene.add(labelMesh);
})
bigLabArr.forEach((item, index) => {
let labelMesh = modellabel.createRemarkLabel(item.text, item.x, item.y, item.z);
labelMesh.scale.set(0.01, 0.01, 0.01);
labelMesh.rotation.y = Math.PI * (item.ry / 360);
// labelMesh.rotation.x = Math.PI * (30 / 360);;
// labelMesh.rotation.x= rz;
window.scene.add(labelMesh);
bigLabelArr.push(labelMesh);
})
}
//通过 模型名称获取标签名称
async function getlabel(name) {
let result;
labArr.forEach((item, index) => {
if (item.name === name) {
result = item;
return null;
}
})
return result
}
//普通标签
async function addLabel(parent, x = 0, y = 0, z = 0, className = 'label') {
if (!parent.name) {
return;
}
console.log("parent.name2=", parent.name)
let item = await getlabel(parent.name);
// debugger
if (item) {
player.create3dLabel(parent, item.text,
1020, 680,
item.position,
item.rotation,
);
// player.create3dLabel(parent, item.text,
// 1020, 680,
// new THREE.Vector3(x, y, z),
// new THREE.Vector3(0, Math.PI, 0),
// );
}
}
//状态标签
async function addStateLabel(parent, x = 0, y = 0, z = 0, className = 'label') {
if (!parent.name) {
return;
}
console.log("parent.name2=", parent.name)
let item = await getlabel(parent.name);
if (item) {
player.create3dLabel(parent, item.text,
1020, 680,
item.position,
item.rotation,
);
// player.create3dButton(parent, item.text,
// 1020, 680,
// new THREE.Vector3(x, y, z),
// new THREE.Vector3(0, Math.PI, 0),
// updateLabel()
// );
}
}
//添加动态水
function AddWaters(player) {
let water1 = {}
water1.position = { x: 0, y: 1, z: 0 }
water1.scale = { x: 4, y: 2.6 }
AddWater(water1, player)
let water2 = {}
water2.position = { x: 0, y: 1, z: 5 }
water2.scale = { x: 7.5, y: 8 }
AddWater(water2, player)
}
function AddWater(water, player) {
const waterGeometry = new THREE.PlaneGeometry(water.scale.x, water.scale.y);
let waterobj = new Water(
waterGeometry,
{
textureWidth: 255,
textureHeight: 255,
waterNormals: new THREE.TextureLoader().load('./assets/textures/waternormals.jpg', function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
}),
sunDirection: new THREE.Vector3(),
sunColor: 0xffffff,
waterColor: 0x3498DB,
distortionScale: 0.5,//波浪大小
fog: true// scene.fog !== undefined
}
);
waterobj.position.set(water.position.x, water.position.y, water.position.z)
waterobj.rotation.x = - Math.PI / 2;
scene.add(waterobj);
player.addWater(waterobj);
}
//测试用
let clickindex = false;
//全开全关 测试
window.btnclick = function () {
pumpModelArr.forEach((item, index) => {
if (clickindex) {
item.material.color.set(0x00ff00);
} else {
item.material.color.set(0x666666);
}
clickindex = !clickindex;
})
}
function mqttInit() {
var that = this;
// 连接选项
//
const options = {
connectTimeout: 4000, // 超时时间
// 认证信息
clientId: 'brower_' + parseInt(Math.random() / 31.1 * 10000000000),
username: config.mqttUserName,
password: config.mqttPassword,
}
mqttclient = mqtt.connect('ws://127.0.0.1:8083/mqtt', options);
mqttclient.on('reconnect', function (error) {
console.log("reconnect");
})
mqttclient.on('error', function (error) {
console.log('连接失败:', error)
})
mqttclient.on('message', function (topic, message, s) {
console.log(topic, message.toString());
if (message.toString() == '1') {
// if (that.lastTime + 2 * 1000 < new Date().getTime()) {
// that.lastTime = new Date().getTime();
// }
}
})
mqttclient.subscribe("/scene/update/*", (err) => {
if (!err) {
console.log(`订阅/scene/update/* 成功`);
}
});
mqttclient.subscribe("RTData", (err) => {
if (!err) {
console.log(`订阅 RTData 成功`);
}
});
mqttclient.publish('/sys/update/scene', 'scene');
}
//打开对话框
function openDialog(tmpobj) {
layer.open({
type: 1
, offset: 1 //具体配置参考:http://doc/modules/layer.html#offset
, id: 'layerDemo' + 1 //防止重复弹出
, content: '<div style="padding: 20px 100px;">' + tmpobj.name + '</div>'
, btn: '关闭'
, btnAlign: 'c' //按钮居中
, shade: 0 //不显示遮罩
, yes: function () {
layer.closeAll();
}
});
}
function updateLabel() {
setTimeout(updateLabel, 1000); //5秒后执行
let date = new Date();
let m = date.getSeconds();
player.updateLabel("", m);
}
var canvasTexture
// 创建LED电子屏幕
function addLEDScreen() {
var canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 64;
var c = canvas.getContext('2d');
// c.fillStyle = "#aaaaff";
c.fillStyle = "#000000";
c.fillRect(0, 0, 512, 64);
// 文字
c.beginPath();
c.translate(256, 32);
c.fillStyle = "#FF0000"; //文本填充颜色
c.font = "bold 28px 宋体"; //字体样式设置
c.textBaseline = "middle"; //文本与fillText定义的纵坐标
c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
c.fillText("欢迎领导访问指导!!!", 0, 0);
var cubeGeometry = new THREE.BoxGeometry(512, 64, 5);
canvasTexture = new THREE.CanvasTexture(canvas);
canvasTexture.wrapS = THREE.RepeatWrapping;
var material = new THREE.MeshPhongMaterial({
map: canvasTexture, // 设置纹理贴图
});
var cube = new THREE.Mesh(cubeGeometry, material);
cube.position.set(0.10, 0.56, -1.48);
cube.rotation.y += Math.PI; //-逆时针旋转,+顺时针
cube.scale.set(0.006,0.006,0.01);
scene.add(cube);
player.addRefeshFunction(updatetext);
}
function updatetext() {
if (canvasTexture) {
canvasTexture.offset.x += 0.003;
}
}
</script>
</body>
</html>

145
temp.html

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<title>Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕</title>
<meta charset="UTF-8">
<script type="text/javascript" src="lib/statistics.js"></script>
<script type="text/javascript" src="lib/steak.js"></script>
<script type="text/javascript" src="lib/three.js"></script>
<script type="text/javascript" src="lib/OrbitControls.js"></script>
<script type="text/javascript" src="lib/ColladaLoader.js"></script>
<script type="text/javascript" src="lib/dat.gui.js"></script>
<script type="text/javascript" charset="UTF-8" src="lib/Tween.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="dom"></div>
<script type="text/javascript">
var camera;
var renderer;
var fontMesh;
var canvasTexture;
function init() {
// 创建一个场景,它将包含我们所有的元素,如物体,相机和灯光。
var scene = new THREE.Scene();
scene.opacity = 0;
// 创建一个摄像机,它定义了我们正在看的地方
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000);
// 将摄像机对准场景的中心
camera.position.z = 500;
camera.lookAt(scene.position);
var orbit = new THREE.OrbitControls(camera);
// 创建一个渲染器并设置大小,WebGLRenderer将会使用电脑显卡来渲染场景
renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true,
});
renderer.setClearColor(new THREE.Color("#0e0934"));
renderer.setSize(window.innerWidth, window.innerHeight);
var ambientLight = new THREE.AmbientLight("#ffffff", 1);
scene.add(ambientLight);
// 将呈现器的输出添加到HTML元素
document.getElementById("dom").appendChild(renderer.domElement);
// 启动动画
renderScene();
add3DFont();
addLEDScreen();
function add3DFont() {
new THREE.FontLoader().load('font/FZYaoTi_Regular.json', function(font) {
//加入立体文字
var text = new THREE.TextGeometry("左本的博客,Three.js3D文字", {
// 设定文字字体
font: font,
//尺寸
size: 24,
//厚度
height: 5
});
text.computeBoundingBox();
// 设置偏移
text.translate(-220, 0, 0);
//3D文字材质
var m = new THREE.MeshStandardMaterial({
color: "#FF0000"
});
fontMesh = new THREE.Mesh(text, m)
fontMesh.position.y = 100;
scene.add(fontMesh);
});
}
// 创建LED电子屏幕
function addLEDScreen() {
var canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 64;
var c = canvas.getContext('2d');
c.fillStyle = "#aaaaff";
c.fillRect(0, 0, 512, 64);
// 文字
c.beginPath();
c.translate(256, 32);
c.fillStyle = "#FF0000"; //文本填充颜色
c.font = "bold 28px 宋体"; //字体样式设置
c.textBaseline = "middle"; //文本与fillText定义的纵坐标
c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
c.fillText("左本的博客,Three.js3D文字", 0, 0);
var cubeGeometry = new THREE.BoxGeometry(512, 64, 5);
canvasTexture = new THREE.CanvasTexture(canvas);
canvasTexture.wrapS = THREE.RepeatWrapping;
var material = new THREE.MeshPhongMaterial({
map: canvasTexture, // 设置纹理贴图
});
var cube = new THREE.Mesh(cubeGeometry, material);
cube.rotation.y += Math.PI; //-逆时针旋转,+顺时针
scene.add(cube);
}
var clock = new THREE.Clock(); //声明一个时钟对象
function renderScene() {
orbit.update();
if (fontMesh) {
fontMesh.rotation.y -= 0.004;
}
if (canvasTexture) {
canvasTexture.offset.x += 0.005;
}
// 使用requestAnimationFrame函数进行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// 渲染的场景
renderer.render(scene, camera);
}
window.onload = init;
// 随着窗体的变化修改场景
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 监听窗体调整大小事件
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>
Loading…
Cancel
Save