jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A little bit of threejs prototyping

Browse Source
This commit is contained in:
Stefan Zermatten
2023-09-05 23:31:40 +02:00
parent 1847525e62
commit 64e4d80b5b
5 changed files with 101 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/imports/client/ui/tabletop/TabletopMap.vue
View File

@@ -10,14 +10,19 @@
<script lang="js">
import * as THREE from 'three';
import { Tracker } from 'meteor/tracker'
import { MapControls } from '/imports/api/tabletop/three/OrbitControls.js';
import TabletopObjects from '/imports/api/tabletop/TabletopObjects.js';
import TabletopMaps from '/imports/api/tabletop/TabletopMaps.js';
import { OrbitControls } from '/imports/api/tabletop/three/OrbitControls.js';
import { DragControls } from 'three/examples/jsm/controls/DragControls.js';
import { MapControls } from 'three/examples/jsm/controls/MapControls.js';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
const maps = [
{
name: 'first map',
position: { x: 0, y: 0 },
width: 5,
height: 5,
width: 25,
height: 25,
texture: '/images/battlemap.webp',
}
];
@@ -27,25 +32,65 @@ export default {
const scene = new THREE.Scene();
const perspectiveCam = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
perspectiveCam.position.z = 5;
const orthoCam = new THREE.OrthographicCamera( -2, 2, 2, -2, 1, 1000 );
orthoCam.position.z = 5
const orthoCam = new THREE.OrthographicCamera( -2, 2, 2, -2, 0, 1000 );
orthoCam.position.z = 500
const activeCamera = orthoCam;
const renderer = new THREE.WebGLRenderer({canvas: this.$refs.map});
const renderer = new THREE.WebGLRenderer({ canvas: this.$refs.map });
renderer.shadowMap.enabled = true;
activeCamera.up.set( 0, 0, 1 ); // Use z as upwards
const controls = new MapControls( activeCamera, renderer.domElement );
maps.forEach(map => {
const texture = new THREE.TextureLoader().load( map.texture );
const material = new THREE.MeshBasicMaterial({ map: texture });
const material = new THREE.MeshStandardMaterial({ map: texture });
material.map.needsUpdate = true;
const plane = new THREE.Mesh(new THREE.PlaneGeometry(map.width, map.height), material);
plane.overdraw = true;
plane.receiveShadow = true;
scene.add(plane);
});
// Example model
const loader = new STLLoader()
loader.load(
'/models/example-mini.stl',
function (geometry) {
const material = new THREE.MeshStandardMaterial({
color: 0xb2ffc8,
});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
scene.add(mesh)
const light = new THREE.PointLight()
light.position.set(0, 0, 50)
light.castShadow = true;
scene.add(light)
const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(20, 50, 100)
directionalLight.castShadow = true;
scene.add( directionalLight );
const dragControls = new DragControls([mesh], activeCamera, renderer.domElement);
dragControls.addEventListener( 'dragstart', function ( event ) {
controls.enabled = false;
});
dragControls.addEventListener( 'dragend', function ( event ) {
controls.enabled = true;
});
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
(error) => {
console.log(error)
}
)
//controls.enabled = false;
//});
/*
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );