3dapp/js/app.js

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(-10, 5, -10);

		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(0xe0ffff);
			directionalLight.position.set(-.5, .5, -1.5).normalize();
			glScene.add(directionalLight);

			const light = new THREE.AmbientLight("#afafaf");
			glScene.add(light);

			// const light1 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			// light1.position.set(-2, 3, 2)
			// glScene.add(light1)

			// const light2 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			// light2.position.set(0, 3, -6)
			// glScene.add(light2)

			// const light3 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			// light3.position.set(-12, 3, 6)
			// glScene.add(light3)

			// const light4 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			// light4.position.set(-12, 4, -4)
			// glScene.add(light4)

			// const light5 = new THREE.PointLight(0xe0ffff, 0.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 };