I am trying to add some text on a cylinder geometry ...I tried to map texture which is working but when I try to add text it doesn't work
I just want to map text (like texture) on the outer side of the cylinder geometry in such a way that if the shape changes, the text follows the shape and look like engraved on the surface
var geometry = new THREE.CylinderGeometry(2.5, 2.5, 5, 10000, 1, true, 100);
var materialOuter = new THREE.MeshLambertMaterial({
color: 0x581845
});
var materialOuter = new THREE.MeshBasicMaterial({
// map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/758px-Canestra_di_frutta_(Caravaggio).jpg")
map: new THREE.FontLoader().load('/fonts/gentilis_regular.typeface.json', function (font) {
var textGeo = new THREE.TextGeometry("My Text", {
font: font,
size: 200,
height: 50,
curveSegments: 12,
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
});
var textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(textGeo, textMaterial);
// mesh.position.set(x, y, z);
// scene.add(mesh);
})
});
var materialInner = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("../images/1.jpg"),
side: THREE.BackSide
});
var materialInner = new THREE.MeshLambertMaterial({ color: 0xd2691e, side: THREE.BackSide });
var meshOuter = new THREE.Mesh(geometry, materialOuter);
var meshInner = new THREE.Mesh(geometry, materialInner);
meshOuter.add(meshInner);
var bottomCylinder = new THREE.Mesh(new THREE.CylinderGeometry(2.5, 2.5, 0.01, 10000, 1, false, 100), new THREE.MeshLambertMaterial({ color: 0xFFC300, wireframe: false, shading: THREE.FlatShading }));
bottomCylinder.position.y = -2.5;
scene.add(bottomCylinder);
scene.add(meshOuter);
var light = new THREE.AmbientLight(0xffffff);
light.position.z = 200;
scene.add(light);
Related
I'm new to three.js and I'm using Tubegeometry of three.js in externalRenders of ArcGIS recently. I encountered a problem that the tube will have Strange jitter and distortion when I move the perspective, the situation will be exacerbated as the radius and length of the tube decrease. The gif below should be a good explanation of what happened：
I have been stuck with this for a few days,Can someone help me solve this？
Here's the complete javascript code:
let path=[
[116.533079,39.352741],
[116.533080,39.352753],
];
var map = new Map({
basemap: "satellite",
ground:'world-elevation'
});
var view = new SceneView({
container: "mapContainer",
map: map,
viewingMode: "local",
camera: {
position: [116.533079, 39.352741, 13154.641086300715],
fov: 55,
heading: 318.70623732061983,
tilt: 42.34234113203692
}
});
//create the reference line
view.graphics.add(new Graphic({
geometry:{
type:'polyline',
paths:path,
},
symbol:{
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 2
}
}))
const myRenderer = {
view:view,
renderer:null,
camera:null,
scene:null,
height:100,
offset:0,
map:null,
setup:function (context){
this.renderer= new THREE.WebGLRenderer({
context:context.gl,
premultipliedAlpha:false,
});
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setViewport(0,0,view.width,view.height);
this.renderer.autoClearDepth = false;
this.renderer.autoClearStencil = false;
this.renderer.autoClearColor = false;
const originalSetRenderTarget = this.renderer.setRenderTarget.bind(
this.renderer
);
this.renderer.setRenderTarget = function (target) {
originalSetRenderTarget(target);
if (target == null) {
context.bindRenderTarget();
}
};
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera();
const axesHelper = new THREE.AxesHelper(10000000);
this.scene.add(axesHelper);
// create the Tubegeometry
let v3List=[];
path.forEach((item)=>{
var renderPos = [0, 0, 0];
externalRenderers.toRenderCoordinates(view, [item[0], item[1], 100], 0, SpatialReference.WGS84, renderPos, 0, 1);
v3List.push(new THREE.Vector3(renderPos[0], renderPos[1], renderPos[2]));
})
console.log(v3List)
let curve = new THREE.CatmullRomCurve3(v3List, false);
let tubeGeometry = new THREE.TubeBufferGeometry(curve, 1, 10, 20, false);
var textureLoader = new THREE.TextureLoader();
this.map = textureLoader.load('img/point2.png')
this.map.wrapS = THREE.RepeatWrapping;
this.map.wrapT = THREE.RepeatWrapping;
this.map.repeat.set(2,20);
let material = new THREE.MeshBasicMaterial({
color: 0x85A9A9,
side:THREE.BackSide,
//map:this.map,
transparent: false,
depthWrite: false,
opacity: 0,
aoMapIntensity:0,
});
let tube1 = new THREE.Mesh(tubeGeometry, material);
this.scene.add(tube1);
let tubeGeometry2 = new THREE.TubeBufferGeometry(curve, 1, 10, 20, false);
let tubeMaterial2 = new THREE.MeshPhongMaterial({
color: 0x85A9A9,
side:THREE.FrontSide,
//map:this.map,
transparent: false,
depthWrite: false,
opacity: 0,
aoMapIntensity:0,
});
let tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);
console.log(tube2);
this.scene.add(tube2);
var ambient = new THREE.AmbientLight(0xffffff, 1);
ambient.position.set(0, 100, 0);
this.scene.add(ambient);
context.resetWebGLState();
},
render: function (context) {
const cam = context.camera;
this.camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);
this.camera.up.set(cam.up[0], cam.up[1], cam.up[2]);
this.camera.lookAt(
new THREE.Vector3(cam.center[0], cam.center[1], cam.center[2])
);
this.camera.projectionMatrix.fromArray(cam.projectionMatrix);
this.map.offset.x += 0.001;
this.map.needsUpdate = true;
this.renderer.state.reset();
this.renderer.render(this.scene, this.camera);
externalRenderers.requestRender(view);
// cleanup
context.resetWebGLState();
}
}
externalRenderers.add(view, myRenderer);
})
This looks very much like the Precision Issues detailed in https://developers.arcgis.com/javascript/latest/api-reference/esri-views-3d-externalRenderers.html
I'm just trying out Three.js. As I want to use CanvasRenderer as a fallback for devices where WebGL is not supported, I've noticed two issues:
Distored line / Bad geometry?
Additional pixel
Here's my current code
var width = 960;
var height = 500;
var aspect = width / height;
var D = 1;
var CanvasRenderer = true;
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);
if(CanvasRenderer) {
var renderer = new THREE.CanvasRenderer({
alpha: true,
antialias: true
});
} else {
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
}
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(0.1, 1, 0.5);
var cube = new THREE.Mesh(geometry, [
new THREE.MeshPhongMaterial({
color: 0x222222, // right
overdraw: true
}),
new THREE.MeshPhongMaterial({
color: 0xffffff,
overdraw: true
}),
new THREE.MeshPhongMaterial({
color: 0xEDE6F5, // Top
overdraw: true
}),
new THREE.MeshPhongMaterial({
color: 0xffffff,
overdraw: true
}),
new THREE.MeshPhongMaterial({
color: 0xFFFFFF, // Left
overdraw: true
}),
new THREE.MeshPhongMaterial({
color: 0xffffff,
overdraw: true
})
]);
scene.add(cube);
scene.add(new THREE.AmbientLight(0xFFFFFF));
camera.position.set(20, 20, 20);
camera.lookAt(scene.position);
renderer.render(scene, camera);
body {
margin: 0px;
overflow: hidden;
background: #EEE;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/Projector.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>
WebGL difference
You can see the difference with WebGL renderer:
JSFiddle
http://jsfiddle.net/4tbs4tpL/2/
When using CanvasRenderer, the Material.overdraw property takes values between 0 and 1. A reasonable value is 0.5.
The artifacts you refer to will likely diminish with lower values of overdraw.
three.js r.86
I'm trying to create the effect similar to hula hoop covered in tape using three.js.
The 3d model should end up looking something like below.
I can create the hoop in 3d space using TorusGeometry with the ability to pan around, but I have not managed to work out how to get a 2nd TorusGeometry to break into sections.
What is the best way of creating this effect?
// hoop
hoop = new THREE.TorusGeometry(20, .5, 100, 50);
var hoopMaterial = new THREE.MeshPhongMaterial({
ambient: 0xffffff,
color: 0x028fde,
specular: 0x555555,
shininess: 0
});
hoopMesh = new THREE.Mesh(hoop, hoopMaterial);
hoopMesh.position.z = 0;
scene.add(hoopMesh);
hoopTape1 = new THREE.TorusGeometry(20.1, .6, 0, 50);
var hoopTapeMaterial = new THREE.MeshPhongMaterial({
ambient: 0xffffff,
color: 0xDE5102,
specular: 0x555555,
shininess: 0
});
hoopTape1Mesh = new THREE.Mesh(hoopTape1, hoopTapeMaterial);
hoopMesh.position.z = 0;
scene.add(hoopTape1Mesh);
jsfiddle with current working code.
You will have to apply a texture to your torus that is seamless to achieve that effect. The texture should be similar to this one:
Then use this code pattern:
var geometry = new THREE.TorusBufferGeometry( 6, 0.4, 16, 64 );
var loader = new THREE.TextureLoader();
var texture = loader.load( 'stripe.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 16, 0.5 ); // or whatever you like
render();
} );
var material = new THREE.MeshPhongMaterial( {
color: 0x998877,
specular: 0x050505,
shininess: 50,
map: texture
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
three.js r.77
I use Blender in combination with the exporters from Three.js
and spit it out in JSON. I like to apply a texture on a object but it seems not to work. What am I doing wrong?
var feinleinenMap = THREE.ImageUtils.loadTexture('textures/feinleinen.jpg');
feinleinenMap.anisotropy = 16;
feinleinenMap.wrapS = feinleinenMap.wrapT = THREE.RepeatWrapping;
feinleinenMap.repeat.set(5, 5);
var feinleinen = {
"schwarz": new THREE.MeshPhongMaterial({
color: 0x222222,
map: feinleinenMap,
combine: THREE.MixOperation
}),
"weiss": new THREE.MeshPhongMaterial({
color: 0xffffff,
map: feinleinenMap,
combine: THREE.MixOperation
}),
"chamois": new THREE.MeshPhongMaterial({
color: 0xEDE6D4,
map: feinleinenMap,
combine: THREE.MixOperation
}),
}
var group = new THREE.Group();
loader.load('/models/dagobert/basis.js', function (geometry) {
var mesh = new THREE.Mesh(geometry, feinleinen["schwarz"]);
loadJson(mesh);
});
function loadJson(mesh) {
group.add(mesh);
}
scene.add(group);
You need to run your scene through a server, else the texture wont load.
http://www.wampserver.com/en/ PC
https://www.mamp.info/en/ mac
Or use Brackets live preview and it should work for you.
I've recently started to play with three.js, and I am using terrain.js demo as a start for a design project I am working on.
I will like to add a hybrid shader "wireframe/lambert"
the default comes with wire shader only.
This is the code from the demo, using basic material:
var matrix = new THREE.MeshBasicMaterial({
color:0x10ce58,
wireframe:true
});
var geometry = new THREE.PlaneGeometry(width, height, modelWidth, modelHeight);
mesh = new THREE.Mesh(geometry, matrix);
mesh.doubleSided = false;
and I tried something like this but I only get the "lambert" rendering and not the lambert and wire combined, any ideas?
var darkMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff , shading: THREE.FlatShading, overdraw: true} );
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x10ce58, wireframe: true, transparent: true } );
var multiMaterial = [ darkMaterial, wireframeMaterial ];
var geometry = new THREE.PlaneGeometry(width, height, modelWidth, modelHeight);
mesh = new THREE.Mesh(geometry, multiMaterial);
mesh.doubleSided = false;
Thanks for your time in advanced,
Regards
-Manuel
This is the code I am using in my non working example for materials (http://jsfiddle.net/xnqUb/3/)
var geometry = new THREE.PlaneGeometry(width, height, model.length - 1, model.length - 1, materials);
materials = [
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } ),
new THREE.MeshLambertMaterial({ color: 0x10ce58, wireframe: true,})
];
var mesh = new THREE.Mesh(geometry);
object = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);