I'm trying to load an object using fbx loader and apply quaternion to rotate in an orbit. Rotation is working but object looks far away on the screen.
Here is the code that i'm trying.
fbxLoader.load('models/fbx/yarn_with_mtl.fbx', function (yarn) {
yarn.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.receiveShadow = true;
child.castShadow = true;
}
});
yarn.name = "yarn";
yarn.position.set(0, 0, 688);// this increases to right size
yarnModal = yarn;
scene.add(yarn);
});
quaternion.setFromAxisAngle(axis, 0.005);
if(yarnModal)yarnModal.position.applyQuaternion(quaternion); //This is reseting the object size back to small
Related
I have used Threejs to load FBX 3D model in scene. Due to different scale of the 3D model, it looks different in viewer.
See the photo:
Proper FBX with scale 1 : Download FBX MODEL 1
Problematic FBX with scale 0.1 : Download FBX MODEL 2
Both models should look in same scale, dimension, position and rotation of 3D model?
How to handle Camera?
How to handle lights? (Currently, there are 2 lights in the viewer.)
Here is the demo link for code review:
let fbxLoader = new FBXLoader();
fbxLoader.load(
objectUrl, //1
object => {
scene.add(object);
object.traverse(it => {
if (it.isMesh) {
it.receiveShadow = true;
it.castShadow = true;
scope.os = object.scale;
}
})
let boxHelper = new THREE.Box3Helper(new THREE.Box3());
boxHelper.visible = true;
boxHelper.box.setFromObject(object);
plane.position.y = boxHelper.box.min.y;
},
xhr => {
// console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
error => {
console.log("An error happened" + error);
}
);
My JsFiddle Link : https://jsfiddle.net/43eqnp2f/
e.g. a box should be Blending Mode,
but when it run perfectly in aframe debug inspector,
but it does not work in the 8thwall WebAR Camera,
since the "camera" plane also Addiative become White within once second.
Can this be solve?
it eventually turn out all Blank White,
i was using "modify-material" code from 8thwall example
<a-scene
xrweb="disableWorldTracking: true"
xrextras-almost-there
xrextras-loading
xrextras-runtime-error>
AFRAME.registerComponent('modify-materials', {
init: function() {
...
if (node.name.indexOf('p_TBSPart') !== -1) {
node.material.transparent = true;
//node.material.depthWrite: false;
node.material.blending = THREE.AdditiveBlending;
console.log("blend:" + node.material.blending+";<br/>");
} else {
node.material.transparent = false;
node.material.blending = THREE.NormalBlending;
console.log("b_:" + node.material.blending+";<br/>");
}
..
</a-scene>
Thank you
--
TBSFred
My default map is in EPSG: 5179 coordinate system, and I'm using tileurlfunction with redefinition.
The view projection is also set to 5179.
Projection of Geoserver WMS layers to EPSG: 4326 or EPSG: 3857
On request it will overlay on my base map.
But if I modify the projection to EPSG: 5179 and override the tilegrid value, tileurlfunction, it doesn't overlay normally.
If you look at ol v6.0.0.md,
New internal tile coordinates,
It seems to be a problem caused by the modification of the tileUrlFunction on the part.
If tilegrid does not use Top-Left and applies Bottom-Left, it would be appreciated if you could let me know how to do WMS layer service.
My baselayer&tileurlfunction
tilegrid
origin: bottom-left,
resolutions,
extent
tileurlfunction
return (
(tileCoord) => {
if (!tileCoord) {
return undefined;
} else {
return template..replace(zRegEx, tileCoord[0].toString())
.replace(xRegEx, tileCoord[1].toString())
.replace(yRegEx, (-tileCoord[2] - 1).toString());
}
}
);
Geoserver wmslayer
const tileGrid = new TileGrid({
origin: [extent[0], extent[1]],
resolutions,
extent
})
const wmsSource = new TileWMS({
url: 'http://domain/geoserver/wms',
params: { LAYERS: 'test:ecl_sw_p', TILED: true },
projection: 'EPSG:5179'
tileGrid
})
I solved it.
proj4js EPSG:5181
+axis=enu
=>
+axis=neu
Change the upper left corner in the above way.
// ol/source/TileWMS.js
if (this.v13_ && axisOrientation.substr(0, 2) == 'ne') {
let tmp;
tmp = tileExtent[0];
bbox[0] = tileExtent[1];
bbox[1] = tmp;
tmp = tileExtent[2];
bbox[2] = tileExtent[3];
bbox[3] = tmp;
}
I have a model, which is displayed in Three.js correctly. Top at the top, bottom at the bottom. However, model has a preset rotation of -1.57 on X axis. It means If I add any new object to the scene, axis of object will be not the same as the model axis. How can clear out or reset this preset rotation so the axis of model and axis of world will match and top will be still at the top? I hope I explained myself clear. Thank you.
How about to rotate yours model once by 1.57, "burn" this orientation back to the vertices of the model then saving it to new file.
// reset mesh rotation
mesh.rotation.y = 1.57;
// make current oreintation, the base of the model
applyMeshTransformation(mesh);
// export the model to new blob file (can saved from this to new file)
exportObject(mesh)
function applyMeshTransformation(mesh) {
// apply local matrix on geometry
mesh.updateMatrixWorld();
mesh.geometry.applyMatrix(mesh.matrixWorld);
// reset local matrix
mesh.position.set(0,0,0);
mesh.rotation.set(0,0,0);
mesh.scale.set(1,1,1);
mesh.updateMatrixWorld();
};
function exportObject(mesh) {
var objExporter = new THREE.ObjectExporter();
var output = JSON.stringify( objExporter.parse( mesh ), null, '\t' );
output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
var blob = new Blob( [ output ], { type: 'text/plain' } );
var objectURL = window.URL.createObjectURL( blob );
window.open( objectURL, '_blank' );
};
Attempting to do simple frame subtraction with WebGL/Three.js
Current Demo: http://zebradog.github.io/camera/motion.html
Shader here: https://github.com/zebradog/camera/blob/master/js/shaders/motion.js
Output appears to be flickering/rendering every other frame. I assume it's an issue with the swapping of framebuffers in animate() but cannot seem to find the problem:
https://github.com/zebradog/camera/blob/master/motion.html#L139
if ( video.readyState === video.HAVE_ENOUGH_DATA ){
prevTexture.image.data = videoTexture.image.data;
videoContext.drawImage(video, 0, 0,SCREEN_WIDTH,SCREEN_HEIGHT);
videoTexture.image.data = new Uint8Array(videoContext.getImageData(0,0,SCREEN_WIDTH, SCREEN_HEIGHT).data);
if(prevTexture.image.data.length) {
prevTexture.needsUpdate = true;
}
videoTexture.needsUpdate = true;
}