You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
436 lines
10 KiB
436 lines
10 KiB
|
|
import { OrbitControls } from 'jsm/controls/OrbitControls.js';
|
|
|
|
|
|
import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'jsm/renderers/CSS3DRenderer.js';
|
|
import css3dlabel from './units/css3dlabel.js'
|
|
|
|
var APP = {
|
|
|
|
Player: function () {
|
|
|
|
|
|
var controls, camera, glScene, cssScene, glRenderer, cssRenderer;
|
|
var waters = [];
|
|
//CSS 标签列表
|
|
var BIG_LABEL_ARR = [];
|
|
//刷新函数列表
|
|
var FUN_ARR = [];
|
|
|
|
camera = new THREE.PerspectiveCamera(
|
|
45,
|
|
window.innerWidth / window.innerHeight,
|
|
1,
|
|
10000);
|
|
|
|
camera.position.set(-0, 60, -60);
|
|
|
|
glRenderer = createGlRenderer();
|
|
cssRenderer = createCssRenderer();
|
|
|
|
controls = new OrbitControls(camera, glRenderer.domElement);
|
|
// controls = new OrbitControls(camera, glRenderer.domElement);
|
|
document.body.appendChild(cssRenderer.domElement);
|
|
document.body.appendChild(glRenderer.domElement);
|
|
// glRenderer.domElement.appendChild(cssRenderer.domElement);
|
|
|
|
glScene = new THREE.Scene();
|
|
cssScene = new THREE.Scene();
|
|
|
|
|
|
// for (var i = 0; i < 20; i++) {
|
|
// create3dPage(
|
|
// 1020, 680,
|
|
// new THREE.Vector3(-2 - i, 1 + i / 3, -4.2 + i),
|
|
// new THREE.Vector3(0, Math.PI, 0),
|
|
// 'https://zuoben.blog.csdn.net/');
|
|
// }
|
|
|
|
// initModel();
|
|
createLights();
|
|
|
|
window.camera = camera;
|
|
window.scene = glScene;
|
|
|
|
|
|
|
|
|
|
|
|
function createGlRenderer() {
|
|
var glRenderer = new THREE.WebGLRenderer({
|
|
antialias: true,
|
|
alpha: true
|
|
});
|
|
|
|
glRenderer.setClearColor(0x34495E);
|
|
glRenderer.setPixelRatio(window.devicePixelRatio);
|
|
glRenderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
glRenderer.domElement.style.position = 'absolute';
|
|
glRenderer.domElement.style.zIndex = 1;
|
|
glRenderer.domElement.style.top = 0;
|
|
|
|
return glRenderer;
|
|
}
|
|
|
|
function createCssRenderer() {
|
|
var cssRenderer = new CSS3DRenderer();
|
|
cssRenderer.setSize(window.innerWidth, window.innerHeight);
|
|
cssRenderer.domElement.style.position = 'absolute';
|
|
glRenderer.domElement.style.zIndex = 0;
|
|
cssRenderer.domElement.style.top = 0;
|
|
return cssRenderer;
|
|
}
|
|
|
|
function initDraws(child) { }
|
|
|
|
function initFrames(child) {
|
|
child.material = new THREE.MeshBasicMaterial({
|
|
color: 0x7f5816,
|
|
})
|
|
}
|
|
|
|
function initStairs(child) {
|
|
child.material = new THREE.MeshStandardMaterial({
|
|
color: 0xd1cdb7,
|
|
})
|
|
child.material.roughness = 0.5
|
|
child.material.metalness = 0.6
|
|
}
|
|
|
|
function initWalls(child) {
|
|
child.material = new THREE.MeshStandardMaterial({
|
|
color: 0xffffff,
|
|
})
|
|
child.material.roughness = 0.5
|
|
child.material.metalness = 0.6
|
|
}
|
|
|
|
function create3dPage(w, h, position, rotation, url) {
|
|
var plane = createPlane(
|
|
w, h,
|
|
position,
|
|
rotation);
|
|
glScene.add(plane);
|
|
|
|
var cssObject = createCssObject(
|
|
w, h,
|
|
position,
|
|
rotation,
|
|
url);
|
|
cssScene.add(cssObject);
|
|
}
|
|
|
|
function createLights() {
|
|
var directionalLight = new THREE.DirectionalLight(0xffffff);
|
|
directionalLight.position.set(0, 100, -50).normalize();
|
|
glScene.add(directionalLight);
|
|
|
|
const light = new THREE.AmbientLight("#ffffff");
|
|
glScene.add(light);
|
|
|
|
const light1 = new THREE.PointLight(0xffffff, 1, 20)
|
|
light1.position.set(-0, 100, 100)
|
|
glScene.add(light1)
|
|
|
|
const light2 = new THREE.PointLight(0xffffff, 1, 20)
|
|
light2.position.set(-100, 100, 100)
|
|
glScene.add(light2)
|
|
|
|
const light3 = new THREE.PointLight(0xffffff, 1, 20)
|
|
light3.position.set(-12, 3, 6)
|
|
glScene.add(light3)
|
|
|
|
const light4 = new THREE.PointLight(0xffffff, 1, 20)
|
|
light4.position.set(-12, 4, -4)
|
|
glScene.add(light4)
|
|
|
|
const light5 = new THREE.PointLight(0xffffff,1, 20)
|
|
light5.position.set(12, 4, -8)
|
|
glScene.add(light5)
|
|
|
|
const light6 = new THREE.PointLight(0xe0ffff, 0.1, 20)
|
|
light6.position.set(12, 4, 0)
|
|
glScene.add(light6)
|
|
|
|
const light7 = new THREE.PointLight(0xe0ffff, 0.1, 20)
|
|
light7.position.set(12, 4, 8)
|
|
glScene.add(light7)
|
|
}
|
|
|
|
this.setClearColor = function (color) {
|
|
glRenderer.setClearColor(color);
|
|
}
|
|
//position = { x: 0, y: 0, z: 0 }, rotation= { x: 0, y: 0, z: 0 }
|
|
this.addModels = function (value) {
|
|
|
|
glScene.add(value);
|
|
|
|
};
|
|
|
|
|
|
this.setCamera = function (value) {
|
|
|
|
camera = value;
|
|
camera.aspect = this.width / this.height;
|
|
camera.updateProjectionMatrix();
|
|
// this.camera = camera;
|
|
window.camera = camera;
|
|
|
|
};
|
|
|
|
this.setScene = function (value) {
|
|
|
|
glScene = value;
|
|
window.scene = glScene
|
|
|
|
};
|
|
this.addWater = function (water) {
|
|
waters.push(water);
|
|
}
|
|
this.setPixelRatio = function (pixelRatio) {
|
|
|
|
glRenderer.setPixelRatio(pixelRatio);
|
|
|
|
};
|
|
|
|
this.setSize = function (width, height) {
|
|
|
|
this.width = width;
|
|
this.height = height;
|
|
|
|
if (camera) {
|
|
|
|
camera.aspect = this.width / this.height;
|
|
camera.updateProjectionMatrix();
|
|
|
|
}
|
|
|
|
glRenderer.setSize(this.width, this.height);
|
|
cssRenderer.setSize(this.width, this.height);
|
|
|
|
};
|
|
|
|
|
|
|
|
var time, startTime, prevTime;
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
|
|
// controls.update();
|
|
|
|
glRenderer.render(glScene, camera);
|
|
|
|
cssRenderer.render(cssScene, camera);
|
|
waters.forEach(water => {
|
|
// 播放特效
|
|
water.material.uniforms['time'].value += 1.0 / 60.0;
|
|
});
|
|
FUN_ARR.forEach( fun=> {
|
|
// 播放特效
|
|
fun();
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
var objects = []
|
|
this.play = function () {
|
|
|
|
|
|
// if (renderer.xr.enabled) dom.append(vrButton);
|
|
|
|
// startTime = prevTime = performance.now();
|
|
|
|
// document.addEventListener('keydown', onKeyDown);
|
|
// document.addEventListener('keyup', onKeyUp);
|
|
// document.addEventListener('pointerdown', onPointerDown);
|
|
// document.addEventListener('pointerup', onPointerUp);
|
|
// document.addEventListener('pointermove', onPointerMove);
|
|
|
|
// dispatch(events.start, arguments);
|
|
|
|
glRenderer.setAnimationLoop(animate);
|
|
|
|
// const image = document.createElement('img');
|
|
// image.addEventListener('load', function () {
|
|
|
|
// for (let i = 0; i < 2; i++) {
|
|
|
|
// const object = new CSS3DSprite(image.cloneNode());
|
|
// object.position.x = Math.random() * 4 - 2,
|
|
// object.position.y = Math.random() * 4 - 2,
|
|
// object.position.z = Math.random() * 4 - 2;
|
|
// object.scale.set(0.01, 0.01, 0.01);
|
|
// glScene.add(object);
|
|
|
|
// objects.push(object);
|
|
|
|
// }
|
|
|
|
// //transition();
|
|
|
|
// });
|
|
// image.src = '/assets/textures/sprite.png';
|
|
|
|
// cssScene.add(createSpriteShape());
|
|
// cssScene.add(createBox13DLabel());
|
|
|
|
|
|
};
|
|
|
|
this.stop = function () {
|
|
|
|
if (renderer.xr.enabled) vrButton.remove();
|
|
|
|
// document.removeEventListener('keydown', onKeyDown);
|
|
// document.removeEventListener('keyup', onKeyUp);
|
|
// document.removeEventListener('pointerdown', onPointerDown);
|
|
// document.removeEventListener('pointerup', onPointerUp);
|
|
// document.removeEventListener('pointermove', onPointerMove);
|
|
|
|
dispatch(events.stop, arguments);
|
|
|
|
glRenderer.setAnimationLoop(null);
|
|
|
|
|
|
};
|
|
|
|
|
|
this.dispose = function () {
|
|
|
|
glRenderer.dispose();
|
|
cssRenderer.dispose();
|
|
|
|
camera = undefined;
|
|
glScene = undefined;
|
|
cssScene = undefined;
|
|
|
|
};
|
|
|
|
//
|
|
this.create3dPage = function (w, h, position, rotation, url) {
|
|
|
|
var plane = css3dlabel.createPlane(
|
|
w, h,
|
|
position,
|
|
rotation);
|
|
glScene.add(plane);
|
|
|
|
var cssObject = css3dlabel.createCssObject(
|
|
w, h,
|
|
position,
|
|
rotation,
|
|
url);
|
|
cssScene.add(cssObject);
|
|
}
|
|
const defaultScale = 80
|
|
this.create3dLabel = function (parent, text, w = 100, h = 20, position, rotation) {
|
|
|
|
|
|
// let sprite =createBox13DLabel()
|
|
// glScene.add(sprite)
|
|
// return ;
|
|
let txtlength = text.length
|
|
|
|
var width = defaultScale * txtlength;
|
|
var height = defaultScale + 15;
|
|
|
|
var plane = css3dlabel.createPlane(
|
|
width, height,
|
|
position,
|
|
rotation);
|
|
|
|
glScene.add(plane);
|
|
|
|
var cssObject = css3dlabel.createCssLabel(text,
|
|
width, height,
|
|
position,
|
|
rotation);
|
|
// if(parent){
|
|
// parent.add(cssObject);
|
|
BIG_LABEL_ARR.push(cssObject);
|
|
// }else{
|
|
cssScene.add(cssObject);
|
|
// }
|
|
//cssObject.element.textContent = 'your data'
|
|
}
|
|
// this.create3dButton = function (parent, text, w = 100, h = 20, position, rotation,click) {
|
|
|
|
// let txtlength = text.length
|
|
|
|
// var width = defaultScale * txtlength;
|
|
// var height = defaultScale + 15;
|
|
|
|
// var plane = css3dlabel.createPlane(
|
|
// width, height,
|
|
// position,
|
|
// rotation);
|
|
|
|
// glScene.add(plane);
|
|
|
|
// var cssObject = css3dlabel.createButton(text,
|
|
// position,
|
|
// rotation,click);
|
|
// // if(parent){
|
|
// // parent.add(cssObject);
|
|
|
|
// // }else{
|
|
// cssScene.add(cssObject);
|
|
// // }
|
|
// }
|
|
function createSpriteShape() {
|
|
/*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/
|
|
let canvas = document.createElement("canvas");
|
|
canvas.width = 120;
|
|
canvas.height = 120;
|
|
/*2、创建图形，这部分可以去看w3c canvas教程*/
|
|
let ctx = canvas.getContext("2d");
|
|
ctx.fillStyle = "#ff0000";
|
|
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
/*3、将canvas作为纹理，创建Sprite*/
|
|
let texture = new THREE.Texture(canvas);
|
|
texture.needsUpdate = true; //注意这句不能少
|
|
let material = new THREE.SpriteMaterial({
|
|
color: 0xff00ff,//设置精灵矩形区域颜色
|
|
rotation: Math.PI / 4,//旋转精灵对象45度，弧度值
|
|
map: texture,//设置精灵纹理贴图
|
|
});
|
|
let mesh = new THREE.Sprite(material);
|
|
mesh.position.x = 2;
|
|
mesh.position.y = 2;
|
|
/*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
|
|
//mesh.scale.set(100,100,1);
|
|
return mesh;
|
|
}
|
|
function createBox13DLabel() {
|
|
const div = document.createElement("div");
|
|
div.className = "red-box-label";
|
|
div.textContent = "红色正方体";
|
|
// CSS3DSprite;CSS3DObject
|
|
const earthLabel = new CSS3DSprite(div);
|
|
earthLabel.position.set(1, 0.2, 0.5);
|
|
earthLabel.scale.set(0.01, 0.01, 0.01);
|
|
return earthLabel;
|
|
}
|
|
this.updateLabel = function (name, text) {
|
|
BIG_LABEL_ARR.forEach(tmplable => {
|
|
tmplable.element.textContent = text;
|
|
})
|
|
}
|
|
|
|
this.addRefeshFunction = function(fun){
|
|
FUN_ARR.push(fun);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
export { APP };
|
|
|