After updating from three.js r62Dev to r64 or r64Dev I am receiving the following error.
var radarMaterial = new THREE.SpriteMaterial( { map: radarTexture2, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft } );
Uncaught TypeError: Cannot read property 'topLeft' of undefined.
Has any one else experienced this?
SpriteMaterial.alignment and SpriteMaterial.useScreenCoordinates have been removed from Threejs. See the release history: https://github.com/mrdoob/three.js/releases.
Sprites are now rendered in the scene just like any other object.
If you want to create a heads-up display (HUD), the work-around is to overlay a second scene of sprites, rendered with an orthographic camera.
See http://threejs.org/examples/webgl_sprites.html for an example of how to do that.
three.js r.64
Related
I'm trying to add a lightmap to some mesh after loading them from a GLTF file.
All my objects have 2UV channel.
I'm waiting 'object3dset' and here is my code :
const mesh = this.el.getObject3D('mesh');
var textureLoader = new THREE.TextureLoader();
textureLoader.load("lightmap.png", function(lmap){
mesh.traverse((node) => {
if (!node.isMesh) return;
node.material.lightMap = lmap;
lmap.flipY = node.material.map.flipY; //needed to flip the texture
node.material.needsUpdate = true;
});
});
If I replace the material with a new one and set the lightmap, it's working.
But I want to find a way without recreating all materials.
The lightmap was loaded, but not easy to see.
By default metalness from Khronos Blender Exporter converted in threejs after loading GLTF result to a level 1.0. With this configuration, the lightmap is hard to see and is not corresponding to what we see in Blender.
I hope my mistake can help someone else losing too much time.
I am loading a very complex 3D model from a PLY file (over 60Mb). In my project I need to use the orbit-control to move around the object. Obviously due to the large file the operation is painfully slow in some couputers. In order to speed up things a bit I am trying to convert my geometry into a Buffer geometry with the following lines of code:
this.loader.load('assets/data/GuyFawkesMask.ply', function (geometry) {
var bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry );
console.log(bufferGeometry);
// Create object
let object =
new THREE.Mesh(bufferGeometry,
new THREE.MeshPhongMaterial(
{
color: 0xFFFFFF,
//vertexColors: THREE.VertexColors,
shading: THREE.FlatShading,
shininess: 0
})
);
_this.add(object);
});
But I am getting the following error:
TypeError: Cannot read property '0' of undefined
at DirectGeometry.fromGeometry (three.module.js:12219)
at BufferGeometry.fromGeometry (three.module.js:14307)
at threed-viewer.component.ts:379
at index.js:52
at XMLHttpRequest. (three.module.js:29263)
at ZoneDelegate.webpackJsonp.818.ZoneDelegate.invokeTask (zone.js:367)
at Object.onInvokeTask (ng_zone.js:264)
at ZoneDelegate.webpackJsonp.818.ZoneDelegate.invokeTask (zone.js:366)
at Zone.webpackJsonp.818.Zone.runTask (zone.js:166)
at XMLHttpRequest.ZoneTask.invoke (zone.js:420)
Any idea?
Thank you,
Dino
Just posting prisoner849 comment (as an answer) for future reference:
If I get it right, looking into the source code of PLYLoader.js, the
geometry, which the callback function returns, is already of
THREE.BufferGeometry()
I am trying to apply a decal to the outside of a mesh object using DecalGeometry. However, the decal appears on the inside of the mesh. I've tried rotation and position settings within the DecalGeometry, but can't seem to affect which side of the mesh the decal appears on. FWIW, the mesh is a custom OBJ model. My code is a bit extensive to post here, but you can view the issue here. I have red BoundingBoxHelpers to help visualize the placement.
The materials object has a parameter which allows you to designate the side(s) of the mesh on which it will display (thanks #j-t for posting this question Prevent decal from showing on inside of mesh. My working code looks like this...
var decalMaterial = new THREE.MeshPhongMaterial( {
map: decalNormal,
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: - 4,
side: THREE.DoubleSide
});
This is a snippet of my code -
materialArray=[];
materialArray.push(new THREE.MeshBasicMaterial({map:frontCounterTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:frontCounterTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:frontCounterTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:blackTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:blackTexture}));
materialArray.push(new THREE.MeshBasicMaterial({map:blackTexture}));
frontCounterMaterial=new THREE.MultiMaterial(materialArray);
frontCounter.material=frontCounterMaterial;
The scene gets rendered properly using the editor (threejs/editor), however export doesn't work.
When I do the following -
frontCounter.toJSON()
I get the following -
Uncaught TypeError: Cannot read property 'textures' of undefined(…)
I traced it back to -
THREE.Texture.toJSON:
if ( meta.textures[ this.uuid ] !== undefined ) {
return meta.textures[ this.uuid ];
}
I do not understand how to fix this, that is export a Mesh with MultiMaterial applied to it. Any help?
The PR on github suggests that it currently works with MeshPhongMaterial https://github.com/mrdoob/three.js/pull/6509, I suggest trying that instead of MeshBasicMaterial.
I am very new to three.js. In my project you can move through a series of planes with cross section images of an object. The problem is that the material doesn't load right away and moving up and down too quickly causes some of the planes to display black. I need to change this behavior. Is there a way to either
change some property so the plane is transparent - but the image should still be opaque when loaded
or don't display/render the plane at all until the texture is loaded?
I'm not at all sure I am on the right track, and I am hoping someone more experienced can suggest a specific fix.
Thanks!
Not sure if you already cleared this up but I made a handy little function to take care of this by modifying the opacity setting, the basic of which are:
function loadTexture( path ){
var mat = new THREE.MeshBasicMaterial({
map: new THREE.ImageUtils.loadTexture( path, null, function() {
mat.opacity = 1;
} ),
opacity: 0
});
return mat;
}