import * as THREE from "../../libs/three.js-r132/build/three.module.js";
import { loadGLTF, loadVideo, loadAudio } from "../../libs/loader.js";
import { createChromaMaterial } from "../../libs/chroma-video.js";
document.addEventListener("DOMContentLoaded", () => {
const start = async () => {
const mindarThree = new window.MINDAR.IMAGE.MindARThree({
container: document.body,
imageTargetSrc: "../../assets/targets/Xi.mind",
});
const { renderer, scene, camera } = mindarThree;
// import model set postion rotation
const gltf = await loadGLTF("../../assets/models/Opal/scene.glb");
const model = gltf.scene;
model.scale.set(0.1, 0.1, 0.1);
model.position.set(0, 0, 0);
model.rotation.set(0, 90, 89.25);
let mixer;
// create an AnimationMixer
mixer = new THREE.AnimationMixer(model);
mixer.clipAction(gltf.animations[0]).play();
const video = await loadVideo(
"../../assets/videos/Y'all mind if I praise this meme.mp4"
);
video.play();
video.pause();
const texture = new THREE.VideoTexture(video);
const geometry1 = new THREE.BoxGeometry(0.1, 0.1, 0.1);
const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry1, material1);
cube.scale.set(1, 1, 1);
cube.position.set(0, -0.4, 0);
cube.userData.clickable = true;
const listener = new THREE.AudioListener();
camera.add(listener);
const sound = new THREE.Audio(listener);
const audio = await loadAudio("../../assets/sounds/musicband-drum-set.mp3");
sound.setBuffer(audio);
document.body.addEventListener("click", (e) => {
// normalize to -1 to 1
const mouseX = (e.clientX / window.innerWidth) * 2 - 1;
const mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
const mouse = new THREE.Vector2(mouseX, mouseY);
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera, model);
const intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
let o = intersects[0].object;
while (o.parent && !o.userData.clickable) {
o = o.parent;
}
if (o.userData.clickable) {
if (o === cube) {
window.open("https://www.google.com");
sound.play();
}
}
}
});
const geometry = new THREE.PlaneGeometry(1, 1080 / 1920);
//const material = new THREE.MeshBasicMaterial({map: texture});
const material = createChromaMaterial(texture, 0x00ff00);
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = Math.PI / 2;
plane.position.y = 0.7;
plane.scale.multiplyScalar(4);
const anchor = mindarThree.addAnchor(0);
anchor.group.add(plane, cube, model);
anchor.onTargetFound = () => {
video.play();
};
anchor.onTargetLost = () => {
video.pause();
};
await mindarThree.start();
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
};
start();
});
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘uuid’)
at AnimationMixer.clipAction (three.module.js:45876:53)
at start (main.js:24:11)