lazy load test
This commit is contained in:
parent
c77aec130f
commit
88990bf454
|
@ -237,11 +237,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
store.dispatch(initTimer());
|
store.dispatch(initTimer());
|
||||||
|
|
||||||
function animationLoop() {
|
window.animationLoop = function animationLoop() {
|
||||||
renderer.render(viewport);
|
renderer.render(viewport);
|
||||||
window.requestAnimationFrame(animationLoop);
|
window.requestAnimationFrame(window.animationLoop);
|
||||||
}
|
}
|
||||||
animationLoop();
|
window.animationLoop();
|
||||||
|
window.store = store;
|
||||||
|
|
||||||
store.dispatch(fetchMe());
|
store.dispatch(fetchMe());
|
||||||
ProtocolClient.connect();
|
ProtocolClient.connect();
|
||||||
|
|
|
@ -11,6 +11,7 @@ import LogInButton from './LogInButton';
|
||||||
import DownloadButton from './DownloadButton';
|
import DownloadButton from './DownloadButton';
|
||||||
import MinecraftTPButton from './MinecraftTPButton';
|
import MinecraftTPButton from './MinecraftTPButton';
|
||||||
import MinecraftButton from './MinecraftButton';
|
import MinecraftButton from './MinecraftButton';
|
||||||
|
import VoxelButton from './VoxelButton';
|
||||||
|
|
||||||
const Menu = ({
|
const Menu = ({
|
||||||
menuOpen, minecraftname, messages, canvasId,
|
menuOpen, minecraftname, messages, canvasId,
|
||||||
|
@ -21,6 +22,7 @@ const Menu = ({
|
||||||
{(menuOpen) ? <DownloadButton /> : null}
|
{(menuOpen) ? <DownloadButton /> : null}
|
||||||
{(menuOpen) ? <MinecraftButton /> : null}
|
{(menuOpen) ? <MinecraftButton /> : null}
|
||||||
{(menuOpen) ? <HelpButton /> : null}
|
{(menuOpen) ? <HelpButton /> : null}
|
||||||
|
{(menuOpen) ? <VoxelButton /> : null}
|
||||||
{(minecraftname && !messages.includes('not_mc_verified') && canvasId == 0) ? <MinecraftTPButton /> : null}
|
{(minecraftname && !messages.includes('not_mc_verified') && canvasId == 0) ? <MinecraftTPButton /> : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
24
src/components/VoxelButton.jsx
Normal file
24
src/components/VoxelButton.jsx
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @flow
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import type { State } from '../reducers';
|
||||||
|
|
||||||
|
async function switchVoxel() {
|
||||||
|
await import(/* webpackChunkName: "voxel" */ '../voxel');
|
||||||
|
console.log("Chunk voxel loaded");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const VoxelButton = ({
|
||||||
|
canvasId, canvasIdent, canvasSize, view,
|
||||||
|
}) => (
|
||||||
|
<div id="voxelbutton" className="actionbuttons" onClick={switchVoxel}>
|
||||||
|
♠
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default VoxelButton;
|
|
@ -153,6 +153,10 @@ kbd {
|
||||||
left: 98px;
|
left: 98px;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
}
|
}
|
||||||
|
:global(#voxelbutton) {
|
||||||
|
left: 180px;
|
||||||
|
top: 16px;
|
||||||
|
}
|
||||||
:global(#canvasbutton) {
|
:global(#canvasbutton) {
|
||||||
left: 57px;
|
left: 57px;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
|
|
|
@ -162,7 +162,8 @@ var VoxelPainterControls = function ( object, domElement ) {
|
||||||
velocity.x -= velocity.x * 50.0 * delta;
|
velocity.x -= velocity.x * 50.0 * delta;
|
||||||
velocity.y -= velocity.y * 50.0 * delta;
|
velocity.y -= velocity.y * 50.0 * delta;
|
||||||
velocity.z -= velocity.z * 50.0 * delta;
|
velocity.z -= velocity.z * 50.0 * delta;
|
||||||
if (velocity.length() < 1) {
|
const length = velocity.length();
|
||||||
|
if (length < 1 || length > 10) {
|
||||||
velocity.set(0, 0, 0);
|
velocity.set(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
21
src/voxel.js
21
src/voxel.js
|
@ -1,6 +1,7 @@
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
import { VoxelPainterControls } from './controls/VoxelPainterControls';
|
import { VoxelPainterControls } from './controls/VoxelPainterControls';
|
||||||
// import { OrbitControls } from './controls/OrbitControls';
|
// import { OrbitControls } from './controls/OrbitControls';
|
||||||
|
import store from './ui/store';
|
||||||
|
|
||||||
var camera, scene, renderer;
|
var camera, scene, renderer;
|
||||||
var plane;
|
var plane;
|
||||||
|
@ -13,12 +14,9 @@ var controls;
|
||||||
|
|
||||||
var objects = [];
|
var objects = [];
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
init();
|
|
||||||
render();
|
|
||||||
});
|
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
|
// quit 2d rendering
|
||||||
|
const canvas = document.getElementById('gameWindow').remove();
|
||||||
|
|
||||||
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
||||||
camera.position.set( 100, 160, 260 );
|
camera.position.set( 100, 160, 260 );
|
||||||
|
@ -121,10 +119,12 @@ function init() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function render() {
|
init();
|
||||||
|
|
||||||
|
window.animationLoop = () => {
|
||||||
controls.update();
|
controls.update();
|
||||||
renderer.render( scene, camera );
|
renderer.render( scene, camera );
|
||||||
requestAnimationFrame(render);
|
requestAnimationFrame(window.animationLoop);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onWindowResize() {
|
function onWindowResize() {
|
||||||
|
@ -178,8 +178,13 @@ function onDocumentMouseUp( event ) {
|
||||||
switch ( event.button ) {
|
switch ( event.button ) {
|
||||||
case 0:
|
case 0:
|
||||||
// left mouse button
|
// left mouse button
|
||||||
|
const state = store.getState();
|
||||||
|
const clri = state.gui.selectedColor;
|
||||||
|
const clr = state.canvas.palette.colors[clri];
|
||||||
|
const material = new THREE.MeshLambertMaterial( { color: clr } );
|
||||||
|
|
||||||
console.log("set voxel");
|
console.log("set voxel");
|
||||||
var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
|
var voxel = new THREE.Mesh( cubeGeo, material );
|
||||||
voxel.position.copy( intersect.point ).add( intersect.face.normal );
|
voxel.position.copy( intersect.point ).add( intersect.face.normal );
|
||||||
voxel.position.divideScalar( 10 ).floor().multiplyScalar( 10 ).addScalar( 5 );
|
voxel.position.divideScalar( 10 ).floor().multiplyScalar( 10 ).addScalar( 5 );
|
||||||
scene.add( voxel );
|
scene.add( voxel );
|
||||||
|
|
199
src/voxelSA.js
Normal file
199
src/voxelSA.js
Normal file
|
@ -0,0 +1,199 @@
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import { VoxelPainterControls } from './controls/VoxelPainterControls';
|
||||||
|
// import { OrbitControls } from './controls/OrbitControls';
|
||||||
|
|
||||||
|
var camera, scene, renderer;
|
||||||
|
var plane;
|
||||||
|
var mouse, raycaster;
|
||||||
|
|
||||||
|
var rollOverMesh, rollOverMaterial;
|
||||||
|
var cubeGeo, cubeMaterial;
|
||||||
|
|
||||||
|
var controls;
|
||||||
|
|
||||||
|
var objects = [];
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
init();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
|
||||||
|
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
||||||
|
camera.position.set( 100, 160, 260 );
|
||||||
|
camera.lookAt( 0, 0, 0 );
|
||||||
|
|
||||||
|
scene = new THREE.Scene();
|
||||||
|
scene.background = new THREE.Color( 0xf0f0f0 );
|
||||||
|
|
||||||
|
// roll-over helpers
|
||||||
|
|
||||||
|
var rollOverGeo = new THREE.BoxBufferGeometry( 10, 10, 10 );
|
||||||
|
rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
|
||||||
|
rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
|
||||||
|
scene.add( rollOverMesh );
|
||||||
|
|
||||||
|
// cubes
|
||||||
|
cubeGeo = new THREE.BoxBufferGeometry( 10, 10, 10 );
|
||||||
|
cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } );
|
||||||
|
|
||||||
|
// grid
|
||||||
|
var gridHelper = new THREE.GridHelper( 1000, 100, 0x555555, 0x555555 );
|
||||||
|
scene.add( gridHelper );
|
||||||
|
|
||||||
|
//
|
||||||
|
raycaster = new THREE.Raycaster();
|
||||||
|
mouse = new THREE.Vector2();
|
||||||
|
|
||||||
|
|
||||||
|
// Floor with random cold color triangles
|
||||||
|
var floorGeometry = new THREE.PlaneBufferGeometry( 1000, 1000, 100, 100 );
|
||||||
|
floorGeometry.rotateX( - Math.PI / 2 );
|
||||||
|
// vertex displacement
|
||||||
|
var vertex = new THREE.Vector3();
|
||||||
|
var color = new THREE.Color();
|
||||||
|
var position = floorGeometry.attributes.position;
|
||||||
|
for ( var i = 0, l = position.count; i < l; i ++ ) {
|
||||||
|
vertex.fromBufferAttribute( position, i );
|
||||||
|
vertex.x += Math.random() * 20 - 10;
|
||||||
|
vertex.y += Math.random() * 2;
|
||||||
|
vertex.z += Math.random() * 20 - 10;
|
||||||
|
position.setXYZ( i, vertex.x, vertex.y, vertex.z );
|
||||||
|
}
|
||||||
|
floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices
|
||||||
|
position = floorGeometry.attributes.position;
|
||||||
|
var colors = [];
|
||||||
|
for ( var i = 0, l = position.count; i < l; i ++ ) {
|
||||||
|
color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
|
||||||
|
colors.push( color.r, color.g, color.b );
|
||||||
|
}
|
||||||
|
floorGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
|
||||||
|
var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
|
||||||
|
plane = new THREE.Mesh( floorGeometry, floorMaterial );
|
||||||
|
scene.add( plane );
|
||||||
|
objects.push( plane );
|
||||||
|
|
||||||
|
/*
|
||||||
|
// Plane Floor
|
||||||
|
var geometry = new THREE.PlaneBufferGeometry( 5000, 5000 );
|
||||||
|
geometry.rotateX( - Math.PI / 2 );
|
||||||
|
plane = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({ color: 0x009900 }) );
|
||||||
|
scene.add( plane );
|
||||||
|
objects.push( plane );
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// lights
|
||||||
|
|
||||||
|
var ambientLight = new THREE.AmbientLight( 0x606060 );
|
||||||
|
scene.add( ambientLight );
|
||||||
|
|
||||||
|
var directionalLight = new THREE.DirectionalLight( 0xffffff );
|
||||||
|
directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
|
||||||
|
scene.add( directionalLight );
|
||||||
|
|
||||||
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||||
|
renderer.setPixelRatio( window.devicePixelRatio );
|
||||||
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||||
|
document.body.appendChild( renderer.domElement );
|
||||||
|
|
||||||
|
controls = new VoxelPainterControls(camera, renderer.domElement);
|
||||||
|
controls.enableDamping = true;
|
||||||
|
controls.dampingFactor = 0.75;
|
||||||
|
controls.maxPolarAngle = Math.PI / 2;
|
||||||
|
controls.minDistance = 100.00;
|
||||||
|
controls.maxDistance = 1000.00;
|
||||||
|
/*controls.rotateSpeed = 1.5;
|
||||||
|
controls.zoomSpeed = 10.0;
|
||||||
|
controls.panSpeed = 0.3;
|
||||||
|
controls.keys = [65, 83, 68]; // ASD
|
||||||
|
controls.dynamicDampingFactor = 0.2;
|
||||||
|
*/
|
||||||
|
|
||||||
|
renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
||||||
|
renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
|
||||||
|
renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
|
||||||
|
//document.addEventListener( 'keydown', onDocumentKeyDown, false );
|
||||||
|
//document.addEventListener( 'keyup', onDocumentKeyUp, false );
|
||||||
|
//
|
||||||
|
window.addEventListener( 'resize', onWindowResize, false );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
controls.update();
|
||||||
|
renderer.render( scene, camera );
|
||||||
|
requestAnimationFrame(render);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWindowResize() {
|
||||||
|
|
||||||
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDocumentMouseMove( event ) {
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
|
||||||
|
|
||||||
|
raycaster.setFromCamera( mouse, camera );
|
||||||
|
|
||||||
|
var intersects = raycaster.intersectObjects( objects );
|
||||||
|
|
||||||
|
if ( intersects.length > 0 ) {
|
||||||
|
|
||||||
|
var intersect = intersects[ 0 ];
|
||||||
|
|
||||||
|
rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
|
||||||
|
rollOverMesh.position.divideScalar( 10 ).floor().multiplyScalar( 10 ).addScalar( 5 );
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var pressTime = 0;
|
||||||
|
function onDocumentMouseDown( event ) {
|
||||||
|
pressTime = Date.now();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDocumentMouseUp( event ) {
|
||||||
|
if (Date.now() - pressTime > 600) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
|
||||||
|
|
||||||
|
raycaster.setFromCamera( mouse, camera );
|
||||||
|
|
||||||
|
var intersects = raycaster.intersectObjects( objects );
|
||||||
|
|
||||||
|
if ( intersects.length > 0 ) {
|
||||||
|
var intersect = intersects[ 0 ];
|
||||||
|
|
||||||
|
switch ( event.button ) {
|
||||||
|
case 0:
|
||||||
|
// left mouse button
|
||||||
|
console.log("set voxel");
|
||||||
|
var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
|
||||||
|
voxel.position.copy( intersect.point ).add( intersect.face.normal );
|
||||||
|
voxel.position.divideScalar( 10 ).floor().multiplyScalar( 10 ).addScalar( 5 );
|
||||||
|
scene.add( voxel );
|
||||||
|
|
||||||
|
objects.push( voxel );
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
// right mouse button
|
||||||
|
console.log("remove voxel");
|
||||||
|
if ( intersect.object !== plane ) {
|
||||||
|
scene.remove( intersect.object );
|
||||||
|
objects.splice( objects.indexOf( intersect.object ), 1 );
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -234,7 +234,6 @@ const clientConfig = {
|
||||||
entry: {
|
entry: {
|
||||||
client: ['./src/client.js'],
|
client: ['./src/client.js'],
|
||||||
globe: ['./src/globe.js'],
|
globe: ['./src/globe.js'],
|
||||||
voxel: ['./src/voxel.js'],
|
|
||||||
},
|
},
|
||||||
|
|
||||||
output: {
|
output: {
|
||||||
|
@ -294,20 +293,6 @@ const clientConfig = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const voxelConfig = {
|
|
||||||
...clientConfig,
|
|
||||||
entry: {
|
|
||||||
voxel: ['./src/voxel.js'],
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
...config.output,
|
|
||||||
filename: '[name].js',
|
|
||||||
},
|
|
||||||
optimization: {
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const webConfig = {
|
const webConfig = {
|
||||||
...config,
|
...config,
|
||||||
|
|
||||||
|
@ -379,5 +364,4 @@ const webConfig = {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// export default [clientConfig, webConfig];
|
export default [clientConfig, webConfig];
|
||||||
export default [clientConfig, voxelConfig, webConfig];
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user