Hi,
I can get everything else to work but for some reason the “poster” image never shows up. The mesh just shows as black while waiting for user input. This is on Microsoft Edge (Chrome?). I need the poster to show a “touch here” message. I removed anything that might interfere like an action manager and checked that the image file is accessible. Cheers.
document.addEventListener('DOMContentLoaded', (event) => {
var canvas = document.getElementById("renderCanvas"); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
/******* Add the create scene function ******/
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color4(0,0,0,0);
//Adding a light
//var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
// Parameters: alpha, beta, radius, target position, scene
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
// Positions the camera overwriting alpha, beta, radius
camera.setPosition(new BABYLON.Vector3(0, 0, 3.7));
scene.activeCamera.panningSensibility = 0;
// Otherwise textures imported from gltf are flipped.
scene.useRightHandedSystem = true;
// This attaches the camera to the canvas, commenting this out prevents any input.
// Second value afterr "canvas" must be "true" to allow page scroll.
camera.attachControl(canvas, true);
// Prevent Zoom - https://www.html5gamedevs.com/topic/4421-keep-mouse-wheel-scrolling-html-page-instead-of-zooming-arcrotatecamera/
camera.lowerRadiusLimit = camera.radius;
camera.upperRadiusLimit = camera.radius;
// Prevent up/down rotation (beta) - https://doc.babylonjs.com/api/classes/babylon.arcrotatecamera#lowerbetalimit
camera.lowerBetaLimit = camera.beta;
camera.upperBetaLimit = camera.beta;
// The first parameter can be used to specify which mesh to import. Here we import all meshes.
var loader = BABYLON.SceneLoader.ImportMesh(["Face.001","Face.002","Face.003","Face.004"], "http://192.168.1.92/wp/", "cube_map.glb", scene, function (meshes, particleSystems, skeletons) {
scene.createDefaultLight(true, true, true);
var nature = scene.getMeshByName("Face.001");
var unspoken = scene.getMeshByName("Face.002");
var waking = scene.getMeshByName("Face.003");
var space = scene.getMeshByName("Face.004");
// All variables must be included in contructor or options don't set - https://forum.babylonjs.com/t/video-texture-settings-doesnt-work-autoplay-loop/18511
var spaceMat = new BABYLON.StandardMaterial("m", scene);
var spaceVidTex = new BABYLON.VideoTexture("vidtex","./spacex.mp4", scene, false, false, BABYLON.VideoTexture.BILINEAR_SAMPLINGMODE, {
poster: "./spacex-poster.jpg",
muted: false,
autoUpdateTexture: true,
preload: true,
autoPlay: true,
loop: true,
});
spaceMat.diffuseTexture = spaceVidTex;
spaceMat.roughness = 1;
spaceMat.emissiveColor = new BABYLON.Color3.White();
space.material = spaceMat;
spaceMat.backFaceCulling = false;
scene.onPointerObservable.add(function(evt){
if(evt.pickInfo.pickedMesh === space){
//console.log("picked");
if(spaceVidTex.video.paused)
spaceVidTex.video.play();
else
spaceVidTex.video.pause();
//console.log(ANote0VideoVidTex.video.paused?"paused":"playing");
}
}, BABYLON.PointerEventTypes.POINTERPICK);
//create a Center of Transformation
var CoT = new BABYLON.TransformNode("root");
nature.parent = CoT;
unspoken.parent = CoT;
waking.parent = CoT;
space.parent = CoT;
scene.registerBeforeRender(function () {
CoT.rotationQuaternion = null;
CoT.rotation.y += 0.0027;
});
// Add actionManagers on the models
nature.actionManager = new BABYLON.ActionManager(scene);
unspoken.actionManager = new BABYLON.ActionManager(scene);
waking.actionManager = new BABYLON.ActionManager(scene);
space.actionManager = new BABYLON.ActionManager(scene);
// add links
nature.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
function(event){
var pickedMesh = event.meshUnderPointer;
window.open("https://youtu.be/nmJDkzDMllc");
})
);
unspoken.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
function(event){
var pickedMesh = event.meshUnderPointer;
window.open("https://www.amazon.co.uk/dp/B009BVWRLO");
})
);
waking.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
function(event){
var pickedMesh = event.meshUnderPointer;
window.open("https://www.amazon.co.uk/dp/B002IYE5XO");
})
);
//space.actionManager.registerAction(
// new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
// function(event){
// var pickedMesh = event.meshUnderPointer;
//
// window.open("https://youtu.be/A0FZIwabctw?t=94");
// })
//);
});
return scene;
}
/******* End of the create scene function ******/
var scene = createScene(); //Call the createScene function
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
})
