We Keep Coding

How to change imported CAD file colors in Three.js

I am new in ROS and THREE.js and have been trying to implement a web visualization for a robot movement using mqtt. I used this github project for that https://github.com/dersimn/robotWebView. So far the visualization works alright. However,i will like to change the color of the robot to make the movements even more visible. I tried changing the color of in the "THREE.MeshPhongMaterial" method in the "index.js" file but that did not help. Any idea on how to do this?
Update: This is the code i used
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xb5d3e7);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 3);
controls = new THREE.OrbitControls(camera);
controls.update();
var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(light);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const manager = new THREE.LoadingManager();
const loader = new URDFLoader(manager);
var material = new THREE.MeshPhongMaterial({color: 0xce8821, specular: 0xce8821, shininess: 200});
var geometryLoader = new THREE.STLLoader();
//var geometryLoader = new THREE.ColladaLoader();
var myrobot = null;
loader.load('urdf/iiwa14/urdf/iiwa14.urdf', {}, robot => {
myrobot = robot;
console.log('complete', robot);
scene.add(robot);
}, { loadMeshCb: (path, ext, done) => {
geometryLoader.load(path, geometry => {
console.log(path);
var mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true;
mesh.receiveShadow = true;
//scene.add(mesh);
done(mesh);
});
}});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// MQTT
var mqttUrl = 'ws://MyIPAdress:portNumber/mqtt';
var clientId = 'webui_'+Math.random().toString(36).substring(2,15);
console.log('MQTT conenct to', mqttUrl, clientId);
var client = new Paho.MQTT.Client(mqttUrl, clientId);
client.onMessageArrived = function(recv) {
let topic = recv.destinationName;
let message = JSON.parse(recv.payloadString);
console.log(topic, message);
myrobot.joints.iiwa_joint_1.setAngle(message[0]);
myrobot.joints.iiwa_joint_2.setAngle(message[1]);
myrobot.joints.iiwa_joint_3.setAngle(message[2]);
myrobot.joints.iiwa_joint_4.setAngle(message[3]);
myrobot.joints.iiwa_joint_5.setAngle(message[4]);
myrobot.joints.iiwa_joint_6.setAngle(message[5]);
myrobot.joints.iiwa_joint_7.setAngle(message[6]);
};
client.onConnectionLost = function() {
console.log('mqtt disconencted');
};
client.connect({onSuccess:function() {
console.log('mqtt conencted');
client.subscribe('kuka/status/1/currentJointPosition');
}});

Light behind solid geometry

I'm creating an HTML file integrating ThreeJs, basically I have created 4 Spheres, 1 of them projects the light, other 3 spheres turn in a wall. When the Spheres is behind the wall they should not reflect the light, what I supposed to do to solve this?
I've already try changing the materials of the Spheres which turns around the wall to Lambert and Phong, setting up castShadow to true, and recieveShadow to False
(function onLoad() {
var camera, scene, renderer, orbitControls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 30, -100);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(camera);
orbitControls = new THREE.OrbitControls(camera);
escena = scene;
esferaLuz = new THREE.SphereBufferGeometry(0.5, 16, 16);
luzUno = new THREE.SpotLight(0xFFFFFF, 1);
luzUno.angle = Math.PI / 12;
luzUno.penumbra = 0.05;
luzUno.decay = 2;
luzUno.position.set(-30, 40, -5);
mtLuzUno = new THREE.MeshBasicMaterial({color: 0xFFFFFF});
mallaLuzUno = new THREE.Mesh(esferaLuz, mtLuzUno);
luzUno.add(mallaLuzUno);
escena.add(luzUno);
luzUno.castShadow = true;
luzUno.shadow.mapSize.width = 1024;
luzUno.shadow.mapSize.height = 1024;
luzUno.shadow.camera.near = 10;
luzUno.shadow.camera.far = 200;
luzMap = new THREE.SpotLightHelper(luzUno);
escena.add(luzMap);
sombraMap = new THREE.CameraHelper(luzUno.shadow.camera);
escena.add(sombraMap);
var luzAmbiente = new THREE.AmbientLight( 0xffffff, 0.1 );
escena.add(luzAmbiente);
geometriaPlana = new THREE.CubeGeometry(100, 100, 2, 2);
mtPlano = new THREE.MeshLambertMaterial({color: 0x000000});
mtPlano.transparent = false;
mtPlano.depthWrite = true;
mallaPlano = new THREE.Mesh(geometriaPlana, mtPlano);
mallaPlano.rotation.x = -0.5*Math.PI;
mallaPlano.position.x = 15;
mallaPlano.position.y = 0;
mallaPlano.position.z = 0;
mallaPlano.receiveShadow = true;
escena.add(mallaPlano);
objEsfera = new THREE.SphereGeometry(5, 100, 100);
mtObjEsfera = new THREE.MeshPhongMaterial({color: 0xFFFFFF, specular:0xFFFFFF, shininess: 1024});
mallaObjEsfera3 = new THREE.Mesh(objEsfera, mtObjEsfera);
mallaObjEsfera3.position.set(20, 0, 0);
mallaObjEsfera3.castShadow = true;
mallaObjEsfera3.receiveShadow = false;
escena.add(mallaObjEsfera3);
objEsfera = new THREE.SphereGeometry(5, 100, 100);
mtObjEsfera = new THREE.MeshPhongMaterial({color: 0xF90E0E, specular:0xF90E0E, shininess: 512});
mallaObjEsfera2 = new THREE.Mesh(objEsfera, mtObjEsfera);
mallaObjEsfera2.position.set(5, 0, 0);
mallaObjEsfera2.castShadow = true;
mallaObjEsfera2.receiveShadow = false;
escena.add(mallaObjEsfera2);
objEsfera = new THREE.SphereGeometry(5, 100, 100);
mtObjEsfera = new THREE.MeshLambertMaterial({color: 0xF2E406});
mallaObjEsfera = new THREE.Mesh(objEsfera, mtObjEsfera);
mallaObjEsfera.position.set(-10, 0, 0);
mallaObjEsfera.castShadow = true;
mallaObjEsfera.receiveShadow = false;
escena.add(mallaObjEsfera);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio);
renderer.setClearColor(0xEEEEEE);
renderer.shadowMap.enabled = true;
renderer.shadowMap.renderReverseSided = false;
renderer.sortObjects = false
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
I expect that when the spheres is behind the wall, don't show any type of reflects of light but when is on the front reflect the light .

One way to achieve your intended result is to work with shadows. So you have to set Object3D.castShadow and Object3D.receiveShadow to true for your spheres and your ground like in the following live example:
https://jsfiddle.net/85q3sfeg/
Also keep in mind that three.js does not support selective lighting so far. This issue was already discussed at github right here: https://github.com/mrdoob/three.js/issues/5180
Assuming all objects of your scene have a lit material applied, you can't define what light sources should affect what objects.
three.js R103

create a 3D object by adding a default height javascript

I have this code which should create a 3D form. The idea is that I have whatever coordinates stored into a vector in the same plan to which I should add a default height in order to make it 3D. As you can see I am a beginner in programming and this is the first time I use ThreeJS so can you tell me what am I doing wrong? Honestly I have no clue and I would like to know if there is another way of adding the default height to my 2D vector coordinates in order to make it 3D without using ThreeJS. Thank you!
$(document).ready(function(){
function storeCoordinate(x, y, array) {
array.push(x);
array.push(y);
}
var coords = [];
var z=500;
storeCoordinate(3, 5, coords);
storeCoordinate(10, 100, coords);
storeCoordinate(30, 120, coords);
storeCoordinate(3, 5, coords);
for (var i = 0; i < coords.length; i+=2) {
var x = coords[i];
var y = coords[i+1];
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var shape = new THREE.Shape( coords );
ctx.moveTo(coords[i],coords[i+1]);
ctx.lineTo(coords[i+2],coords[i+3]);
ctx.stroke();
}
var render,mycanvas,scene,camera,renderer,light;
init();
animate();
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 1, 1000 );
var extrudedGeometry = new THREE.ExtrudeGeometry(shape, {amount: 5, bevelEnabled: false});
var extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({color: 0xff0000}));
scene.add(extrudedMesh);
document.body.onmousemove = function(e){
extrudedMesh.rotation.z = e.pageX / 100;
extrudedMesh.rotation.x = e.pageY / 100;
}
//lights
dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.intensity = .9;
dirLight.position.set(500, 140, 500);
dirLight.castShadow = true;
dirLight.shadowMapHeight = 2048
dirLight.shadowMapWidth = 2048
dirLight.shadowDarkness = .15
spotLight = new THREE.PointLight( 0xffffff );
spotLight.intensity = .5
spotLight.position.set( -500, 140, -500 );
camera.add( spotLight)
camera.add(dirLight);
lighthelper = new THREE.DirectionalLightHelper(dirLight, 20);
lighthelper.children[1].material.color.set(0,0,0)
lighthelper.visible = false;
scene.add(lighthelper);
ambientLight = new THREE.AmbientLight( 0x020202, 1 );
scene.add( ambientLight );
light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
renderer = new THREE.WebGLRenderer({canvas: mycanvas});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.enableZoom = true;
controls.enablePan = true;
controls.rotateSpeed = 3.0;
controls.zoomSpeed = 1.0;
controls.panSpeed = 2.0;
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.minDistance = 1.1;
controls.maxDistance = 1000;
controls.keys = [65, 83, 68]; // [ rotateKey, zoomKey, panKey ]
}
function animate() {
window.requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
var loader = new THREE.OBJLoader();
});

Just an option of how you can do it, using THREE.ExtrudeGeometry():
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 3);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var grid = new THREE.GridHelper(5, 10, "white", "gray");
grid.geometry.rotateX(Math.PI * 0.5);
scene.add(grid);
var points = [
new THREE.Vector2(0, 1),
new THREE.Vector2(1, 1),
new THREE.Vector2(1, 0)
]
var shape = new THREE.Shape(points);
var extrudeGeom = new THREE.ExtrudeGeometry(shape, {
amount: 0.5,
bevelEnabled: false
});
var mesh = new THREE.Mesh(extrudeGeom, new THREE.MeshBasicMaterial({
color: "aqua",
wireframe: true
}));
scene.add(mesh);
render();
function render() {
requestAnimationFrame(render)
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

error : cubeMaterial is not defined javascript

I have a problem with javascript .
it shows me the error that I wrote in the title to the line:
this.color = cubeMaterial.color.getHex();
I can not understand where I'm wrong. I am beginner.
I tried to declare the variable "var cubeMaterial;" outside function "createCube" but it gives the error " Can not read property ' color' of undefined " Thanks!
var scene,camera,renderer;
function createScene() {
// create a scene, that will hold all our elements such as objects,cameras and lights.
scene = new THREE.Scene();
//screate a camera, which defines where we're looking at
camera = new THREE.PerspectiveCamera(45, window.innerWidth/ window.innerHeight, 0.1, 1000);
camera.updateProjectionMatrix();
//position and point the camera to the center of the scene
camera.position.x=-30;
camera.position.y=40;
camera.position.z=30;
camera.lookAt(scene.position);
// create a render and set the size
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(new THREE.Color(0xEEEEcE));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
//add the output of the renderer to the html element
document.body.appendChild( renderer.domElement );
}
var ambientLight,spotLight;
function createLights(){
ambientLight = new THREE.AmbientLight(0x0c0c0c);
//add spotlight for the shadow
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40,60,-10);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
scene.add(ambientLight);
scene.add(spotLight);
}
var cube,sphere,plane;
function createPlane(){
// create a plane
var planeGeometry = new THREE.PlaneGeometry(60,40,11);
var planeMaterial = new THREE.MeshLambertMaterial({color:0Xcccccc });
plane= new THREE.Mesh(planeGeometry,planeMaterial);
//rotate and position the plane
plane.rotation.x= -0.5*Math.PI;
plane.position.x= 15;
plane.position.y= 0;
plane.position.z=0;
plane.receiveShadow = true;
//add the plane to the scene
scene.add(plane);
}
function createCube(){
//create a cube
var cubeGeometry = new THREE.CubeGeometry( 5, 5, 5 );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00, transparent:true} );
cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
//position the cube
cube.position.x = -4;
cube.position.y = 3;
cube.position.z =0;
cube.castShadow= true;
//add cube to the scene
cube.name = "cube"
scene.add(cube);
}
function createSphere(){
//create a sphere
var sphereGeometry= new THREE.SphereGeometry(4,20,20);
var sphereMaterial= new THREE.MeshLambertMaterial({color: 0x7777ff});
sphere= new THREE.Mesh(sphereGeometry,sphereMaterial);
//position the sphere
sphere.position.x=20;
sphere.position.y=0;
sphere.position.z=2;
sphere.castShadow = true;
//add the sphere ti the scene
scene.add(sphere);
}
var controls = new function() {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
this.opacity= 0.6;
this.color = cubeMaterial.color.getHex();
}
function addControlGui(controlObject){
var gui = new dat.GUI();
gui.add(controlObject, 'rotationSpeed',0,0.5);
gui.add(controlObject, 'bouncingSpeed',0,0.5);
gui.add(controlObject,"opacity", 0.1, 1 );
gui.add(controlObject,"color");
}
var step = 0;
function render(){
//rotate the cube aroun its axes
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
scene.getObjectByName("cube").material.opacity= controls.opacity;
scene.getObjectByName("cube").material.color = new THREE.Color(controls.color);
//bounce the sphere up and down
step+=controls.bouncingSpeed;
sphere.position.x= 20+(10*(Math.cos(step+=0.01)));
sphere.position.y = 2 +( 10*Math.abs(Math.sin(step+=0.03)));
requestAnimationFrame(render);
renderer.render(scene,camera);
//render using requestAnimationFrame
}
function init(){
createScene();
createLights();
createPlane();
createCube();
createSphere();
addControlGui(controls);
render();
}
window.addEventListener('load', init, false);

This is a scope problem! When you declare cubeMaterial inside the createSphere function, it will only exist inside that function.
Variables declared at the top of the code, outside of the functions, such as on the line var scene,camera,renderer; will exist in all the inner functions.
Does that make sense? So all you have to do is make sure you declare the cubeMaterial in the right scope. Try putting it at the top next to the scene declaration.

CubeCamera.js rendering black/nothing

I've tried practically everything and the code seems to be perfectly valid. I've tried changing the threejs version, changing from MeshPhongMaterial to MeshBasicMaterial and back, and tried copy pasting code from online. However I still get the same result. CubeCamemra.js works perfectly for me on this ->> http://blog.romanliutikov.com/post/58910953451/dynamic-reflections-in-three-js, but when I try to implement it locally, it renders black. Please tell me if I am missing anything important. Thanks in advance!
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
camera.position.z = 5;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var controls = new THREE.TrackballControls(camera);
var cubeCamera = new THREE.CubeCamera(0.1, 1000, 256); // parameters: near, far, resolution
cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter; // mipmap filter
scene.add(cubeCamera);
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 30, 30),
new THREE.MeshBasicMaterial({
envMap: cubeCamera.renderTarget,
color: 0x00ffff
})
);
//sphere.position.y = 3;
scene.add(sphere);
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),new THREE.MeshNormalMaterial());
scene.add(cube);
cube.position.y = 3;
function render() {
requestAnimationFrame(render);
sphere.visible = false;
cubeCamera.updateCubeMap(renderer, scene);
sphere.visible = true;
renderer.render(scene,camera);
controls.update();
}
render();
http://puu.sh/aqcib/6c2b15d6ca.png -- pic of whats happening