I use svg as texture in threee.js, I've already set antialias: true, but still not working perfect,
// RENDERER
renderer = new THREE.WebGLRenderer({
antialias: true, //是否开启反锯齿
precision: "highp", //着色精度选择
alpha: true, //是否可以设置背景色透明
premultipliedAlpha: true,
stencil: false,
preserveDrawingBuffer: true, //是否保存绘图缓冲
maxLights: 1 //maxLights:最大灯光数
});
renderer.setPixelRatio(window.devicePixelRatio);
this is svg:
this is texture on 3d model:
could anybody help me?
thanks!
When an image is loaded into a 3d environment it is not pixels but defined as texels. Texels are translated to the space available on a face as set by the UV coordinates. The original image is sampled according to the sample method you supply. Some result in specifically blocky looks. Think minecraft. Others are very smooth and especially blurry when zoomed in. Think older video games.
To determine the sample method of your original image you can set the sample technique in the magnification and minification properties of the texutre.
Try
mySVG = new THREE.TextureLoader().load('assets/images/icons/mySVG.svg');
mySVG.magFilter = THREE.NearestFilter;
mySVG.minFilter = THREE.LinearMipMapLinearFilter;
Various filters are available and documented at https://threejs.org/docs/api/textures/Texture.html
Related
Use logarithmic depth buffer is a very simple change, just enable logarithmicDepthBuffer when create THREE.WebGLRenderer like so:
var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true});
But is there any way to change the logarithmicDepthBuffer flag after WebGLRenderer created,or when rendering.
The initial setting of logarithmicDepthBuffer is internally cached in a class called WebGLPrograms. So you can't change this setting at runtime. You have to create a new instance of WebGLRenderer.
BTW: All parameters assigned to the constructor of WebGLRenderer are considered to be immutable.
three.js R112
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
});
I'm trying to make the renderer write on top of the previous frame. If I understand the context of autoClear correct, renderer.autoClear = false; should make this possible, however I can't seem to make it work.
Here is a codepen example:
http://codepen.io/anon/pen/ifLEz?editors=001
renderer.autoClear = false;
If I'm missing a point, feel free to fork it and paste the solution :)
Use
renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
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;
}
It seems that setting THREE.FlatShading for a material doesn't work for BufferGeometry. Is it implemented?
I'm creating BufferGeometry with CTMLoader (useBuffers = true) and applying either MeshLambertMaterial or MeshNormalMaterial with shading: THREE.FlatShading.
Three.js still renders everything as SmoothShading.
If I switch to ClassicGeometry (useBuffers = false), everything works as expected. Unfortunately, that would not work for us since our models are huge and that was exactly the reason to use BufferGeometry.
Is it just not implemented or is it very difficult/time-consuming/not-possible to implement?
Thank you in advance for any hints or suggestions. I'm using the latest r58 version.
P.S.
I found a recent Ryan Rix' post on the same topic http://rix.si/2013/04/15/threejs-ctm-and-you/ where he had to switch to ClassicGeometry to make it work.
In three.js r73 flat shading is working with THREE.MeshPhongMaterial for sure. You can use it like this:
geometry = new THREE.BufferGeometry();
//... make your geometry
material = new THREE.MeshPhongMaterial({
color: 0xff0000,
shading: THREE.FlatShading
});
mesh = new THREE.Mesh( geometry, material );
This doesn't work for THREE.MeshLambertMaterial yet. But they are working on it. Check the related issue here on GitHUB.
flatShading does work in MeshPhongMaterial or any other, the property for
flatShading is boolean
flatShading : Boolean
Define whether the material is rendered with flat shading. Default is false.
const PlaneMaterial = new THREE.MeshPhongMaterial({color:'blue',
side:THREE.DoubleSide,
flatShading:true})
Code Snipet