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.
389 lines
8.9 KiB
389 lines
8.9 KiB
2 years ago
|
|
||
|
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;
|
||
|
|
||
|
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);
|
||
|
// document.body.appendChild(glRenderer.domElement);
|
||
|
|
||
|
// cssRenderer.domElement.appendChild(glRenderer.domElement);
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
// document.body.appendChild(cssRenderer.domElement);
|
||
|
// cssRenderer.domElement.appendChild(glRenderer.domElement);
|
||
|
|
||
|
glScene = new THREE.Scene();
|
||
|
cssScene = new THREE.Scene();
|
||
|
|
||
|
var ambientLight = new THREE.AmbientLight(0x555555);
|
||
|
glScene.add(ambientLight);
|
||
|
|
||
|
var directionalLight = new THREE.DirectionalLight(0xffffff);
|
||
|
directionalLight.position.set(-.5, .5, -1.5).normalize();
|
||
|
glScene.add(directionalLight);
|
||
|
|
||
|
// 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.addEventListener('resize', function () {
|
||
|
|
||
|
// this.setSize(window.innerWidth, window.innerHeight);
|
||
|
|
||
|
// });
|
||
|
window.camera = camera;
|
||
|
window.scene = glScene;
|
||
|
|
||
|
var waters = [];
|
||
|
|
||
|
|
||
|
|
||
|
function createGlRenderer() {
|
||
|
var glRenderer = new THREE.WebGLRenderer({
|
||
|
antialias: true,
|
||
|
alpha: true
|
||
|
});
|
||
|
|
||
|
glRenderer.setClearColor(0xECF8FF);
|
||
|
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() {
|
||
|
const light = new THREE.AmbientLight("#ffffff");
|
||
|
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)
|
||
|
}
|
||
|
|
||
|
function initialize() {
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
this.load = function (json) {
|
||
|
}
|
||
|
|
||
|
//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) {
|
||
|
|
||
|
scene = value;
|
||
|
window.scene = scene
|
||
|
|
||
|
};
|
||
|
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;
|
||
|
// });
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
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);
|
||
|
}
|
||
|
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
};
|
||
|
|
||
|
export { APP };
|