yanis/rate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

It works because aframe MVP

Browse Source
This commit is contained in:
Kumkwats 2023-02-08 01:51:52 +01:00
parent 9a3855bf1a
commit 9bd86f7f4b
2 changed files with 20 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
www/src/components/ARTest.svelte
View File

@ -1,192 +1,22 @@
<script lang="ts">
import { beforeUpdate, afterUpdate, onMount, onDestroy } from 'svelte';
//import * as THREE from 'three';
import * as THREE from '@ar-js-org/ar.js/node_modules/three/build/three';
import * as THREEx from '@ar-js-org/ar.js/three.js/build/ar-threex';
//import * as ARFr from "@ar-js-org/ar.js/aframe/build/aframe-ar-nft";
let container: HTMLElement;
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
var renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
precision: 'mediump',
});
var clock: THREE.Clock = new THREE.Clock();
// init scene and camera
var scene: THREE.Scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
// Create a camera
var camera: THREE.Camera = new THREE.Camera();
scene.add(camera);
var light: THREE.AmbientLight = new THREE.AmbientLight(0xffffff);
scene.add(light);
var markerRoot: THREE.Group = new THREE.Group();
scene.add(markerRoot);
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
sourceType: 'webcam',
sourceWidth: 1920,
sourceHeight: 1080,
});
arToolkitSource.init(function onReady() {
// use a resize to fullscreen mobile devices
setTimeout(function () {
onResize();
}, 1000);
});
// handle resize
window.addEventListener('resize', function () {
onResize();
});
// listener for end loading of NFT marker
window.addEventListener('arjs-nft-loaded', function (ev) {
console.log(ev);
});
function onResize() {
arToolkitSource.onResizeElement();
arToolkitSource.copyElementSizeTo(renderer.domElement);
if (arToolkitContext.arController !== null) {
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas);
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext(
{
detectionMode: 'mono',
canvasWidth: 1920,
canvasHeight: 1080,
},
{
sourceWidth: 1920,
sourceHeight: 1080,
},
);
// initialize it
arToolkitContext.init(function onCompleted() {
// copy projection matrix to camera
camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
});
console.log(arToolkitContext);
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
// MARKER
var arMarkerControls = new THREEx.ArMarkerControls(
arToolkitContext,
markerRoot,
{
type: 'pattern',
patternUrl: '/patterns/patt.hiro',
},
);
scene.visible = false;
var root = new THREE.Object3D();
scene.add(root);
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
var threeGLTFLoader = new THREE.GLTFLoader();
var model;
threeGLTFLoader.load('/models/dingus_the_cat', function (gltf) {
model = gltf.scene.children[0];
model.name = 'dingus';
var animation = gltf.animations[0];
var mixer = new THREE.AnimationMixer(model);
var mixers = [mixer];
//
var action = mixer.clipAction(animation);
action.play();
root.matrixAutoUpdate = false;
root.add(model);
model.position.z = -100;
//model.position.z = 100;
/*
window.addEventListener('arjs-nft-init-data', function (nft) {
console.log(nft);
var msg = nft.detail;
model.position.y = ((msg.height / msg.dpi) * 2.54 * 10) / 2.0; //y axis?
model.position.x = ((msg.width / msg.dpi) * 2.54 * 10) / 2.0; //x axis?
});*/
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
var animate = function () {
requestAnimationFrame(animate);
if (mixers.length > 0) {
for (var i = 0; i < mixers.length; i++) {
mixers[i].update(clock.getDelta());
}
}
if (!arToolkitSource.ready) {
return;
}
arToolkitContext.update(arToolkitSource.domElement);
// update scene.visible if the marker is seen
scene.visible = camera.visible;
renderer.render(scene, camera);
};
requestAnimationFrame(animate);
});
onMount(() => {
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(new THREE.Color('lightgrey'), 0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
container.appendChild(renderer.domElement);
});
<script context="module">
import 'aframe';
import '@ar-js-org/ar.js/aframe/build/aframe-ar';
</script>
<div class="Container" bind:this={container} />
<canvas
id="CanvasAR"
style="background-color: black; width: 100%; height: 100%"
/>
<script>
let Angle = 45;
setInterval(() => {
Angle++;
}, 100);
</script>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.10 0.10 0.10"
gltf-model="/models/dingus_the_cat.glb"
/>
</a-marker>
<a-entity camera />
</a-scene>

2
www/src/pages/ViewAR.svelte
View File

@ -1,6 +1,4 @@
<script lang="ts">
import View3D from '../components/3DHandler.svelte';
import Camera from '../components/CameraHandler.svelte';
import NavBar from '../components/NavBar.svelte';
import ARTest from '../components/ARTest.svelte';