This commit is contained in:
Leon van Kammen 2023-07-06 16:54:12 +02:00
parent 013bcebdf9
commit 9d4717b7b9
5 changed files with 460 additions and 311 deletions

View file

@ -1352,7 +1352,6 @@ xrf.frag.src = function(v, opts){
const localSRC = () => {
// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
setTimeout( () => {
// scale URI XR Fragments inside src-value
for( var i in frag ){
@ -1398,10 +1397,7 @@ xrf.frag.src = function(v, opts){
else externalSRC() // external file
}
/*
* replace the src-mesh with the contents of the src
*/
// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
xrf.frag.src.scale = function(scene, opts, url){
let { mesh, model, camera, renderer, THREE} = opts
let restrictToBoundingBox = mesh.geometry
@ -1438,6 +1434,10 @@ xrf.frag.src.scale = function(scene, opts, url){
if( !opts.recursive && mesh.material ) mesh.material.visible = false // lets hide the preview object because deleting disables animations+nested objs
}
/*
* replace the src-mesh with the contents of the src
*/
xrf.frag.src.type = {}
/*
@ -1474,6 +1474,49 @@ xrf.frag.src.type['model/gltf+json'] = function( url, opts ){
loader.load(url, onLoad )
})
}
/*
* mimetype: image/png
* mimetype: image/jpg
* mimetype: image/gif
*/
xrf.frag.src.type['image/png'] = function(url,opts){
let {mesh} = opts
let restrictToBoundingBox = mesh.geometry
const texture = new THREE.TextureLoader().load( url );
texture.colorSpace = THREE.SRGBColorSpace;
//const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
map: texture,
transparent: url.match(/(png|gif)/) ? true : false,
side: THREE.DoubleSide,
color: 0xFFFFFF,
opacity:1
});
// stretch image by forcing uv-coordinages
if( mesh.geometry ){
if( mesh.geometry.attributes.uv ){ // buffergeometries
let uv = mesh.geometry.attributes.uv;
// i u v
uv.setXY(0, 0, 0 )
uv.setXY(1, 1, 0 )
uv.setXY(2, 0, 1 )
uv.setXY(3, 1, 1 )
}else {
console.warn("xrfragment: uv's of ${url} might be off for non-buffer-geometries *TODO*")
//if( geometry.faceVertexUvs ){
// *TODO* force uv's of dynamically created geometries (in threejs)
//}
}
}
mesh.material = material
}
xrf.frag.src.type['image/gif'] = xrf.frag.src.type['image/png']
xrf.frag.src.type['image/jpg'] = xrf.frag.src.type['image/png']
window.AFRAME.registerComponent('xrf', {
schema: {
},

View file

@ -1352,7 +1352,6 @@ xrf.frag.src = function(v, opts){
const localSRC = () => {
// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
setTimeout( () => {
// scale URI XR Fragments inside src-value
for( var i in frag ){
@ -1398,10 +1397,7 @@ xrf.frag.src = function(v, opts){
else externalSRC() // external file
}
/*
* replace the src-mesh with the contents of the src
*/
// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
xrf.frag.src.scale = function(scene, opts, url){
let { mesh, model, camera, renderer, THREE} = opts
let restrictToBoundingBox = mesh.geometry
@ -1438,6 +1434,10 @@ xrf.frag.src.scale = function(scene, opts, url){
if( !opts.recursive && mesh.material ) mesh.material.visible = false // lets hide the preview object because deleting disables animations+nested objs
}
/*
* replace the src-mesh with the contents of the src
*/
xrf.frag.src.type = {}
/*
@ -1474,3 +1474,46 @@ xrf.frag.src.type['model/gltf+json'] = function( url, opts ){
loader.load(url, onLoad )
})
}
/*
* mimetype: image/png
* mimetype: image/jpg
* mimetype: image/gif
*/
xrf.frag.src.type['image/png'] = function(url,opts){
let {mesh} = opts
let restrictToBoundingBox = mesh.geometry
const texture = new THREE.TextureLoader().load( url );
texture.colorSpace = THREE.SRGBColorSpace;
//const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
map: texture,
transparent: url.match(/(png|gif)/) ? true : false,
side: THREE.DoubleSide,
color: 0xFFFFFF,
opacity:1
});
// stretch image by forcing uv-coordinages
if( mesh.geometry ){
if( mesh.geometry.attributes.uv ){ // buffergeometries
let uv = mesh.geometry.attributes.uv;
// i u v
uv.setXY(0, 0, 0 )
uv.setXY(1, 1, 0 )
uv.setXY(2, 0, 1 )
uv.setXY(3, 1, 1 )
}else {
console.warn("xrfragment: uv's of ${url} might be off for non-buffer-geometries *TODO*")
//if( geometry.faceVertexUvs ){
// *TODO* force uv's of dynamically created geometries (in threejs)
//}
}
}
mesh.material = material
}
xrf.frag.src.type['image/gif'] = xrf.frag.src.type['image/png']
xrf.frag.src.type['image/jpg'] = xrf.frag.src.type['image/png']

View file

@ -1352,7 +1352,6 @@ xrf.frag.src = function(v, opts){
const localSRC = () => {
// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
setTimeout( () => {
// scale URI XR Fragments inside src-value
for( var i in frag ){
@ -1398,10 +1397,7 @@ xrf.frag.src = function(v, opts){
else externalSRC() // external file
}
/*
* replace the src-mesh with the contents of the src
*/
// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
xrf.frag.src.scale = function(scene, opts, url){
let { mesh, model, camera, renderer, THREE} = opts
let restrictToBoundingBox = mesh.geometry
@ -1438,6 +1434,10 @@ xrf.frag.src.scale = function(scene, opts, url){
if( !opts.recursive && mesh.material ) mesh.material.visible = false // lets hide the preview object because deleting disables animations+nested objs
}
/*
* replace the src-mesh with the contents of the src
*/
xrf.frag.src.type = {}
/*
@ -1474,4 +1474,47 @@ xrf.frag.src.type['model/gltf+json'] = function( url, opts ){
loader.load(url, onLoad )
})
}
/*
* mimetype: image/png
* mimetype: image/jpg
* mimetype: image/gif
*/
xrf.frag.src.type['image/png'] = function(url,opts){
let {mesh} = opts
let restrictToBoundingBox = mesh.geometry
const texture = new THREE.TextureLoader().load( url );
texture.colorSpace = THREE.SRGBColorSpace;
//const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
map: texture,
transparent: url.match(/(png|gif)/) ? true : false,
side: THREE.DoubleSide,
color: 0xFFFFFF,
opacity:1
});
// stretch image by forcing uv-coordinages
if( mesh.geometry ){
if( mesh.geometry.attributes.uv ){ // buffergeometries
let uv = mesh.geometry.attributes.uv;
// i u v
uv.setXY(0, 0, 0 )
uv.setXY(1, 1, 0 )
uv.setXY(2, 0, 1 )
uv.setXY(3, 1, 1 )
}else {
console.warn("xrfragment: uv's of ${url} might be off for non-buffer-geometries *TODO*")
//if( geometry.faceVertexUvs ){
// *TODO* force uv's of dynamically created geometries (in threejs)
//}
}
}
mesh.material = material
}
xrf.frag.src.type['image/gif'] = xrf.frag.src.type['image/png']
xrf.frag.src.type['image/jpg'] = xrf.frag.src.type['image/png']
export default xrf;

File diff suppressed because one or more lines are too long

View file

@ -12,7 +12,6 @@ xrf.frag.src = function(v, opts){
const localSRC = () => {
// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
setTimeout( () => {
// scale URI XR Fragments inside src-value
for( var i in frag ){
@ -58,10 +57,7 @@ xrf.frag.src = function(v, opts){
else externalSRC() // external file
}
/*
* replace the src-mesh with the contents of the src
*/
// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
xrf.frag.src.scale = function(scene, opts, url){
let { mesh, model, camera, renderer, THREE} = opts
let restrictToBoundingBox = mesh.geometry
@ -98,6 +94,10 @@ xrf.frag.src.scale = function(scene, opts, url){
if( !opts.recursive && mesh.material ) mesh.material.visible = false // lets hide the preview object because deleting disables animations+nested objs
}
/*
* replace the src-mesh with the contents of the src
*/
xrf.frag.src.type = {}
/*
@ -142,11 +142,37 @@ xrf.frag.src.type['model/gltf+json'] = function( url, opts ){
*/
xrf.frag.src.type['image/png'] = function(url,opts){
const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
let {mesh} = opts
let restrictToBoundingBox = mesh.geometry
const texture = new THREE.TextureLoader().load( url );
texture.colorSpace = THREE.SRGBColorSpace;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { map: texture } );
//const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
map: texture,
transparent: url.match(/(png|gif)/) ? true : false,
side: THREE.DoubleSide,
color: 0xFFFFFF,
opacity:1
});
// stretch image by forcing uv-coordinages
if( mesh.geometry ){
if( mesh.geometry.attributes.uv ){ // buffergeometries
let uv = mesh.geometry.attributes.uv;
// i u v
uv.setXY(0, 0, 0 )
uv.setXY(1, 1, 0 )
uv.setXY(2, 0, 1 )
uv.setXY(3, 1, 1 )
}else {
console.warn("xrfragment: uv's of ${url} might be off for non-buffer-geometries *TODO*")
//if( geometry.faceVertexUvs ){
// *TODO* force uv's of dynamically created geometries (in threejs)
//}
}
}
mesh.material = material
}
xrf.frag.src.type['image/gif'] = xrf.frag.src.type['image/png']
xrf.frag.src.type['image/jpg'] = xrf.frag.src.type['image/png']