Place an image over the object in Threejs - javascript

I would like to place an image in a part of the object, i have tried to do:
var geometry = new THREE.BoxBufferGeometry(10, 10, 0);
var material = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('models/packagin/place.png')});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(10, 5, 0);
material.map.needsUpdate = true; //ADDED
OBJ.traverse(function (child) {
if (child.name !== '') {
OBJ.add(mesh)
}
});
The new object is placed over the primary object but is a flat rectangle
How can I put it so that it is part of the other object?

Related

why is three.js cast shadow not working on a 3D model

I have 3D models as such:
I want to add a cast shadow similar to this:
And I have the following piece of code responsible for the model:
var ambLight = new THREE.AmbientLight( 0x404040 );
this.scene.add(ambLight)
var loader = new THREE.GLTFLoader();
loader.load(path,function (gltf) {
gltf.scene.traverse( function( model ) {
if (model.isMesh){
model.castShadow = true;
}
});
this.scene.add(gltf.scene);
}
I added the castSHadow part as seen in this StackOverflow post.
I've tried model.castShadow = true and I've tried removing the if condition and just leave the castShadow but that doesn't work either. Am I missing a step? The full custom layer code is here if it helps.
You only have an instance of AmbientLight in your scene which is no shadow-casting light.
3D objects can only receive shadow if they set Object3D.receiveShadow to true and if the material is not unlit. Meaning MeshBasicMaterial would not work as the ground's material.
You have to globally enable shadows via: renderer.shadowMap.enabled = true;
I suggest you have a closer look to the shadow setup of this official example.
Based on your code, you're trying to add a shadow on top of Mapbox.
For that, apart from the suggestions from #Mugen87, you'll need to create a surface to receive the shadow, and place it exactly below the model you're loading, considering also the size of the object you're loading to avoid the shadow goes out of the plane surface... and then you'll get this.
Relevant code in this fiddle I have created. I slightly changed the light and I added a light helper for clarity.
var customLayer = {
id: '3d-model',
type: 'custom',
renderingMode: '3d',
onAdd: function(map, gl) {
this.camera = new THREE.Camera();
this.scene = new THREE.Scene();
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(0, 70, 100);
let d = 1000;
let r = 2;
let mapSize = 8192;
dirLight.castShadow = true;
dirLight.shadow.radius = r;
dirLight.shadow.mapSize.width = mapSize;
dirLight.shadow.mapSize.height = mapSize;
dirLight.shadow.camera.top = dirLight.shadow.camera.right = d;
dirLight.shadow.camera.bottom = dirLight.shadow.camera.left = -d;
dirLight.shadow.camera.near = 1;
dirLight.shadow.camera.far = 400000000;
//dirLight.shadow.camera.visible = true;
this.scene.add(dirLight);
this.scene.add(new THREE.DirectionalLightHelper(dirLight, 10));
// use the three.js GLTF loader to add the 3D model to the three.js scene
var loader = new THREE.GLTFLoader();
loader.load(
'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',
function(gltf) {
gltf.scene.traverse(function(model) {
if (model.isMesh) {
model.castShadow = true;
}
});
this.scene.add(gltf.scene);
// we add the shadow plane automatically
const s = new THREE.Box3().setFromObject(gltf.scene).getSize(new THREE.Vector3(0, 0, 0));
const sizes = [s.x, s.y, s.z];
const planeSize = Math.max(...sizes) * 10;
const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
const planeMat = new THREE.ShadowMaterial();
planeMat.opacity = 0.5;
let plane = new THREE.Mesh(planeGeo, planeMat);
plane.rotateX(-Math.PI / 2);
plane.receiveShadow = true;
this.scene.add(plane);
}.bind(this)
);
this.map = map;
// use the Mapbox GL JS map canvas for three.js
this.renderer = new THREE.WebGLRenderer({
canvas: map.getCanvas(),
context: gl,
antialias: true
});
this.renderer.autoClear = false;
this.renderer.shadowMap.enabled = true;
},
render: function(gl, matrix) {
var rotationX = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(1, 0, 0),
modelTransform.rotateX
);
var rotationY = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 1, 0),
modelTransform.rotateY
);
var rotationZ = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 0, 1),
modelTransform.rotateZ
);
var m = new THREE.Matrix4().fromArray(matrix);
var l = new THREE.Matrix4()
.makeTranslation(
modelTransform.translateX,
modelTransform.translateY,
modelTransform.translateZ
)
.scale(
new THREE.Vector3(
modelTransform.scale,
-modelTransform.scale,
modelTransform.scale
)
)
.multiply(rotationX)
.multiply(rotationY)
.multiply(rotationZ);
this.camera.projectionMatrix = m.multiply(l);
this.renderer.state.reset();
this.renderer.render(this.scene, this.camera);
this.map.triggerRepaint();
}
};

How can I get the geometry from a gltf object

I have used three.js to get a gltf by gltfloader, and I want to create a particle system. I need to get the geometry object, how can I get it
function initModel() {
var planeGeometry = new THREE.PlaneGeometry(100, 100);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa,
side: THREE.DoubleSide});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.y = -.1;
plane.receiveShadow = true;
scene.add(plane);
var loader = new THREE.GLTFLoader();
loader.load('./../model/scene.gltf', function (gltf) {
gltf.scene.scale.set(10,10,10);
//how to get the geometry?
});
}
You can traverse the model to find the mesh, or use getObjectByName(MeshName) when you know the name, and pick the geometry from the mesh.
Something like
var geometry = getObjectByName('Plane001').geometry;
if the name of the mesh is Plane001
I have a simple helper method to find all children of a type from an object
findType(object, type) {
object.children.forEach((child) => {
if (child.type === type) {
console.log(child);
}
this.findType(child, type);
});
}
from the loader I would then call findType(gltf.scene, 'Mesh') to print out all meshes in the model

Phong material on a .obj model not reacting to area light in three.js

I am trying to add a phong material to my .obj model along with a shader Area light, However i tried to use Meshface material using array to load both materials but the model completely disappears when i do so.
The scenario works when i use either of them but not both together, is there anyway to overcome this issue ?
Here is the DEMO:
CODE:
// area light
var lightColor = 0xffffff;
var lightIntensity = 1;
var geometry = new THREE.PlaneGeometry(100, 50);
var material = new THREE.MeshBasicMaterial({
color: lightColor,
transparent: true,
opacity: 0.7,
side: THREE.FrontSide
});
areaLight = new THREE.Mesh(geometry, material);
areaLight.position.set(0, 25, -25);
areaLight.rotation.set(0, 0, 0);
areaLight.scale.set(1, 1, 1);
scene.add(areaLight);
var Black = new THREE.MeshPhongMaterial({
color: 0x000000,
})
// wireframe hack
areaLight.add(new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
wireframe: true
})));
// areaLight verts
var vertices = areaLight.geometry.vertices;
var verts = [];
verts.push(vertices[0]);
verts.push(vertices[1]);
verts.push(vertices[3]);
verts.push(vertices[2]);
// uniforms
var uniforms = {
color: {
type: "c",
value: new THREE.Color(0xaaaadd)
},
lightColor: {
type: "c",
value: areaLight.material.color
},
lightIntensity: {
type: "f",
value: lightIntensity
},
lightverts: {
type: "v3v",
value: verts
},
lightMatrixWorld: {
type: "m4",
value: areaLight.matrixWorld
}
};
// attributes
var attributes = {};
// material
var material = new THREE.ShaderMaterial({
attributes: attributes,
uniforms: uniforms,
vertexShader: document.getElementById('vertex_shader').textContent,
fragmentShader: document.getElementById('fragment_shader').textContent,
shading: THREE.SmoothShading
});
var onError = function(xhr) {};
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
var mtl1Loader = new THREE.MTLLoader();
mtl1Loader.setBaseUrl('neavik/newmail/');
mtl1Loader.setPath('neavik/newmail/');
mtl1Loader.load('chandelier.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('neavik/newmail/');
objLoader.load('chandelier.obj', function(object4) {
object4.castShadow = true;
object4.receiveShadow = true;
object4.updateMatrix();
object4.position.set(40, 28, 40); //(0,-5,0.5);
object4.scale.x = 0.09;
object4.scale.y = 0.05;
object4.scale.z = 0.09
var mats = [];
mats.push(new THREE.MeshPhongMaterial({
color: 0x000000
}));
mats.push(material);
var faceMaterial = new THREE.MeshFaceMaterial(mats);
object4.traverse(function(child) {
if (child instanceof THREE.Mesh) {
if (child.material.name == "chandelier_Outside") {
child.material = Black; // When i use faceMaterial here the object disappears
child.castShadow = true;
child.receiveShadow = true;
}
}
});
scene.add(object4);
});
})
// plane geometry
var geometry = new THREE.PlaneGeometry(200, 200);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
// plane
mesh = new THREE.Mesh(geometry, material);
mesh.position.y = -0.1;
scene.add(mesh);
// torus knot
var geometry = new THREE.TorusKnotGeometry(10, 4, 256, 32, 1, 3, 1);
// mesh
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 28, 0);
scene.add(mesh);
}
The main issue section
var mats = [];
mats.push(new THREE.MeshPhongMaterial({
color: 0x000000
}));
mats.push(material);
var faceMaterial = new THREE.MeshFaceMaterial(mats);
object4.traverse(function(child) {
if (child instanceof THREE.Mesh) {
if (child.material.name == "chandelier_Outside") {
child.material = Black; // When i use faceMaterial here the object disappears
child.castShadow = true;
child.receiveShadow = true;
}
}
});
scene.add(object4);
});
})
Area light reference:http://jsfiddle.net/hh74z2ft/1/
Expected result is similar to this image that even the chandelier should be illuminated like torusknot along with phongness [no phongness in this image ]
[]2
Unfortunately, if I understood you correctly, this will not work.
A material (among other things) defines how a given fragment of a triangle will be shaded. There can always be only one material for any given triangle. The face-material is for handling the case where you want to render different faces with different materials, but it's still just one material per triangle.
There is a concept in three.js named multiMaterial (have a look at THREE.SceneUtils.createMultiMaterialObject()). But that will simply create multiple meshes with the same geometry and different materials, so every triangle will get rendered twice, once with every material.
Now the Problem is that the AreaLight implementation has it's very own concept of how the light is represented (via shader-uniforms), and that is completely different from how the phong-material works. So, even if you did somehow add a phong-material to the object to get the specular reflections, the phong-material wouldn't know how to deal with the area-light source (it wouldn't even know that there is any light in the scene).
In order to get the behaviour you like to see you would need to add a specular term (the calculation-formula for specular reflections of the surface) to the fragment-shader and maybe some uniforms to control it's behaviour. This is a really complicated thing to do, especially for area-lights (if it were easy, we'd already have it in three.js).
However, there is some work being done based on latest research in that field, you might want to have a look at this issue and the demo here. There is also a pull-request for this here.

merging geometry in three.js is not working

A path is changed dynamically. So,
previous render function was,
(LENGTH, getPosition(), RADIUS, MATERIAL, SCENE are already set)
var prevPosition = getPosition();
for(var i =0; i < LENGTH; i++) {
drawPath(getPosition());
}
function drawPath(currentPosition) {
var spline = new THREE.CatmullRomCurve3([prevPosition, currentPosition]);
var geometry = new THREE.TubeGeometry(spline, 1, RADIUS);
var mesh = new THREE.Mesh(geometry, MATERIAL);
SCENE.add(mesh);
}
previous render method works very well.
I changed this for performance.
modified render function is,
var mergedGeometry = new THREE.Geometry();
function drawPath(currentPosition) {
var spline = new THREE.CatmullRomCurve3([prevPosition, currentPosition]);
var geometry = new THREE.TubeGeometry(spline, 1, RADIUS);
mergedGeometry.merge(geometry);
var mesh = new THREE.Mesh(mergedGeometry, MATERIAL);
SCENE.add(mesh);
}
mesh is not displayed.
I don't know why.
Do you know why does not this work?
Please help me.
I believe you've confused geometry for a mesh. Geometry is a component of a mesh. You want to add to your geometry, cast it into a new mesh object, and add that new mesh to the scene.
Try:
var mergedGeometry = new THREE.Geometry();
var prevPosition = getPosition();
for(var i =0; i < LENGTH; i++) {
drawPath(getPosition());
}
var mesh = new THREE.Mesh(mergedGeometry, MATERIAL);
SCENE.add(mesh);
function drawPath(currentPosition) {
var spline = new THREE.CatmullRomCurve3([prevPosition, currentPosition]);
var geometry = new THREE.TubeGeometry(spline, 1, RADIUS);
mergedGeometry.merge(geometry);
}
If you get stuck, there is a functioning mesh merge fiddle here: http://jsfiddle.net/mt2zbb9k/

Is it possible to map multiple different textures to ONE face of a geometry in three.js?

Is it possible to map multiple different textures to one face of a geometry in three.js?
I don't want to create multiple faces and assign materialIndexes since the number of faces I need for the geometry changes during runtime.
Here is my last unsuccessful attempt (three.js r.71):
//get some materials
var materials = [];
materials.push(loadTextures(1));
materials.push(loadTextures(2));
materials.push(loadTextures(3));
materials.push(loadTextures(4));
var faceMaterial = new THREE.MeshFaceMaterial(materials);
//create objects
var wireframeObj = new THREE.Mesh(geometry.clone(), new THREE.MeshBasicMaterial({
wireframe: true,
color: 'red'
}));
var mainObj = new THREE.Mesh(geometry, faceMaterial);
scene.add(wireframeObj);
scene.add(mainObj);
camera.position.z = 100;
renderer.render(scene, camera);
function loadTextures(i) {
var texture = new THREE.Texture();
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2, 2);
var image = new Image();
image.onload = function () {
texture.image = this;
texture.needsUpdate = true;
};
image.src = 'images/crate' + i + '.gif';
return new THREE.MeshBasicMaterial({ map: texture });
}
This produces the following:
while I want to see also crate2 to the right, crate3 above crate1 etc.

Categories

Resources