We Keep Coding

Animating rotation of object based on new pivot in Three.js

I want to do this in Three.JS:
I did the spiral and downward movement, but I don't do the knocking motion.
var planeGeometry = new THREE.PlaneGeometry(10,10);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x828282, wireframe: false, side: THREE.DoubleSide});
var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = 1.0 * THREE.Math.degToRad(90);
scene.add(planeMesh);
var cylinderGeometry = new THREE.CylinderGeometry(0.2, 0.2, 14);
var cylinderMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, wireframe: false});
var cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinderMesh.position.set(0,7,0);
scene.add(cylinderMesh);
groupDown = new THREE.Group();
groupSpiral = new THREE.Group();
groupKnock = new THREE.Group();
var woodPeckerGeometry = new THREE.BoxGeometry(1,3,2);
var woodPeckerMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: false});
var woodPeckerMesh = new THREE.Mesh(woodPeckerGeometry , woodPeckerMaterial );
groupDown.add(woodPeckerMesh );
groupDown.position.set(0, 10, 2);
groupSpiral.add(groupDown)
groupKnock.add(groupSpiral)
scene.add(groupKnock);
and the render function:
var render = function () {
groupDown.position.y -= 0.03;
if(groupDown.position.y < 1.6) {
groupDown.position.y = 13;
}
groupSpiral.rotation.y += 0.03;
};
So the question is that how can I do knocking motion?

You could increase the groupDown rotation on the z axis like you did with its position and the "woodpecker" would start to knock on the cylinder. The problem with this is that the pivot for the rotation is at the center of the box.
To fix this, you can add the "woodpecker" to a group (i.e. pivotGroup), set its position up relative to its height on this new group and treat pivotGroup as the new object for animation. This way, the box would rotate from its base.
See the complete example below.
var camera, scene, renderer, groupSpiral, groupDown, groupKnock;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 10, 10000);
camera.position.z = 30;
camera.position.y = 24;
camera.rotation.x = -0.55;
scene.add(camera);
var planeGeometry = new THREE.PlaneGeometry(10, 10);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x828282, wireframe: false, side: THREE.DoubleSide});
var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = 1.0 * THREE.Math.degToRad(90);
planeMesh.rotation.z = 1.0 * THREE.Math.degToRad(45);
scene.add(planeMesh);
var cylinderGeometry = new THREE.CylinderGeometry(0.3, 0.3, 14);
var cylinderMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, wireframe: false});
var cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinderMesh.position.y = 7;
scene.add(cylinderMesh);
var coneGeometry = new THREE.ConeGeometry(0.3, 1, 32);
var coneMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false});
var coneMesh = new THREE.Mesh(coneGeometry, coneMaterial);
coneMesh.position.set(1, 1.8, 0);
coneMesh.rotation.z = Math.PI / -2;
groupDown = new THREE.Group();
groupSpiral = new THREE.Group();
groupKnock = new THREE.Group();
var woodPeckerGeometry = new THREE.BoxGeometry(1, 3, 1.5);
var woodPeckerMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: false});
var woodPeckerMesh = new THREE.Mesh(woodPeckerGeometry, woodPeckerMaterial);
woodPeckerMesh.position.set(0, 1, 0);
woodPeckerMesh.rotation.set(0, 0, Math.PI);
groupKnock.add(coneMesh);
groupKnock.add(woodPeckerMesh);
groupDown.add(groupKnock);
groupDown.position.set(0, 12, 1.5);
groupDown.rotation.y = Math.PI / 2;
groupSpiral.add(groupDown)
scene.add(groupSpiral);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
$(renderer.domElement).appendTo("body");
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
groupDown.position.y -= 0.03;
if(groupDown.position.y < 1.6) {
groupDown.position.y = 12;
}
groupSpiral.rotation.y += 0.03;
groupKnock.rotation.z += 0.035;
if(groupKnock.rotation.z > Math.PI/6) {
groupKnock.rotation.z = 0;
}
renderer.render(scene, camera);
}
$(document).ready(function() {
init();
animate();
});
* {
padding: 0;
margin: 0;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to make rocket / moon orbit around earth three.js

I've been working on a three.js project that involves a rocket ship orbiting around the planet earth which also rotates around another planet. I seem to get the earth to rotate on it's axis, but I'm not sure how to get it to rotate around another object. I've tried a few methods but I couldn't seem to get it to work for my project.
Is there a way to make this possible?
----------------------------------EDIT-----------------------------
Added a JFiddle, although it gives an eror on there saying the scene Utils isn't available, I dont know how to link it.
https://jsfiddle.net/dm9637cL/
The code for my project is as follows
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<link rel="shortcut icon" href="../favicon.ico">
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<script src="../libs/OrbitControls.js" type="text/javascript"></script>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
$(function() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
window.addEventListener('resize', function()
{
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
} );
controls = new THREE.OrbitControls(camera, renderer.domElement);
// create the object group that contains all the sub-shapes
var rocketGroup = new THREE.Object3D();
scene.add(rocketGroup);
//display grid
//scene.add(new THREE.GridHelper(100,10));
var rocketMaterial = new THREE.MeshLambertMaterial({color: 0xEEEEEE});
var hingeMaterial = new THREE.MeshLambertMaterial({color: 0xFD1414});
/////////////////////////////////////////////////////////////////////////////////////////
var rocketAntennaOne = new THREE.CylinderGeometry( 0, 1, 1, 5);
var rocketAntennaOneMesh = new THREE.Mesh(rocketAntennaOne, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaTwo = new THREE.CylinderGeometry( 1, 1.5, 0.5, 5 );
var rocketAntennaTwoMesh = new THREE.Mesh(rocketAntennaTwo, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaThree = new THREE.CylinderGeometry( 1.5, 2, 0.5, 5 );
var rocketAntennaThreeMesh = new THREE.Mesh( rocketAntennaThree,hingeMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyOne = new THREE.CylinderGeometry( 2, 4, 3, 5 );
var rocketBodyOneMesh = new THREE.Mesh(rocketBodyOne,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTwo = new THREE.CylinderGeometry( 4, 5.5, 3, 5 );
var rocketBodyTwoMesh = new THREE.Mesh(rocketBodyTwo,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyThree = new THREE.CylinderGeometry( 5.5, 7, 3, 5 );
var rocketBodyThreeMesh = new THREE.Mesh(rocketBodyThree,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFour = new THREE.CylinderGeometry( 7, 7.5, 3, 5 );
var rocketBodyFourMesh = new THREE.Mesh(rocketBodyFour,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFive = new THREE.CylinderGeometry( 7.5, 8, 3.5, 5 );
var rocketBodyFiveMesh = new THREE.Mesh(rocketBodyFive,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySix = new THREE.CylinderGeometry( 8, 8, 5, 5 );
var rocketBodySixMesh = new THREE.Mesh(rocketBodySix,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySeven = new THREE.CylinderGeometry( 8, 7.5, 3.5, 5 );
var rocketBodySevenMesh = new THREE.Mesh(rocketBodySeven,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyEight = new THREE.CylinderGeometry( 7.5, 7, 3.5, 5 );
var rocketBodyEightMesh = new THREE.Mesh(rocketBodyEight,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyNine = new THREE.CylinderGeometry( 7, 6.5, 3, 5 );
var rocketBodyNineMesh = new THREE.Mesh(rocketBodyNine,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTen = new THREE.CylinderGeometry( 6.5, 6, 3, 5 );
var rocketBodyTenMesh = new THREE.Mesh(rocketBodyTen,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyUpper = new THREE.CylinderGeometry( 3.5, 4, 3.5, 5 );
var rocketBodyUpperMesh = new THREE.Mesh(rocketBodyUpper,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyLower = new THREE.CylinderGeometry( 2.75, 3, 2.5, 5 );
var rocketBodyLowerMesh = new THREE.Mesh(rocketBodyLower,rocketMaterial, new THREE.MeshPhongMaterial());
//var rocketWindow = new THREE.RingGeometry(5,6,30);
//var rocketWindowMesh = new THREE.Mesh(rocketWindow,hingeMaterial, new THREE.MeshPhongMaterial());
///////////////////////////////////////////////////////////////////////////////////////
var x = 0;
var y = 0;
var RocketFinOne = new THREE.Shape();
RocketFinOne.moveTo( x + 0, y + 0 );
RocketFinOne.lineTo( x + 0, y + 16);
RocketFinOne.lineTo( x + 7, y + 20);
RocketFinOne.lineTo( x + 7, y + 15);
RocketFinOne.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinOne,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinOneMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinTwo = new THREE.Shape();
RocketFinTwo.moveTo( x + 0, y + 0 );
RocketFinTwo.lineTo( x + 0, y + 16);
RocketFinTwo.lineTo( x + 7, y + 20);
RocketFinTwo.lineTo( x + 7, y + 15);
RocketFinTwo.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinTwo,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinTwoMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinThree = new THREE.Shape();
RocketFinThree.moveTo( x + 0, y + 0 );
RocketFinThree.lineTo( x + 0, y + 16);
RocketFinThree.lineTo( x + 7, y + 20);
RocketFinThree.lineTo( x + 7, y + 15);
RocketFinThree.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinThree,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinThreeMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinFour = new THREE.Shape();
RocketFinFour.moveTo( x + 0, y + 0 );
RocketFinFour.lineTo( x + 0, y + 16);
RocketFinFour.lineTo( x + 7, y + 20);
RocketFinFour.lineTo( x + 7, y + 15);
RocketFinFour.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinFour,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinFourMesh = new THREE.Mesh( geometry, material ) ;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var planetEarth = createPlanetEarthMesh(new THREE.SphereGeometry(100, 400, 400));
var planetMoon = createMoonMesh (new THREE.SphereGeometry (40,100,100));
// add the sphere to the scene
scene.add(planetEarth);
scene.add(planetMoon);
//scene.add(EarthMesh);
//////////////////////////////////////
scene.add(rocketAntennaOneMesh);
scene.add(rocketAntennaTwoMesh);
scene.add(rocketAntennaThreeMesh);
/////////////////////////////////////
scene.add(rocketBodyOneMesh);
scene.add(rocketBodyTwoMesh);
scene.add(rocketBodyThreeMesh);
scene.add(rocketBodyFourMesh);
scene.add(rocketBodyFiveMesh);
scene.add(rocketBodySixMesh);
scene.add(rocketBodySevenMesh);
scene.add(rocketBodyEightMesh);
scene.add(rocketBodyNineMesh);
scene.add(rocketBodyTenMesh);
///////////////////////////////////////
scene.add(rocketBodyUpperMesh);
scene.add(rocketBodyUpperMesh);
///////////////////////////////////////
//scene.add(rocketWindowMesh);
//////////////////////////////////////
scene.add( rocketFinOneMesh );
scene.add( rocketFinTwoMesh );
scene.add( rocketFinThreeMesh );
scene.add( rocketFinFourMesh );
planetEarth.position.y=-100;
planetMoon.position.x=-100;
//Specify the position of the rocket cone
rocketAntennaOneMesh.position.y = 52.05;
rocketAntennaTwoMesh.position.y = 51.3;
rocketAntennaThreeMesh.position.y = 50.8;
rocketBodyOneMesh.position.y = 49.1;
rocketBodyTwoMesh.position.y = 46.1;
rocketBodyThreeMesh.position.y = 43.1;
rocketBodyFourMesh.position.y = 40.1;
rocketBodyFiveMesh.position.y = 36.9;
rocketBodySixMesh.position.y = 32.7;
rocketBodySevenMesh.position.y = 28.5;
rocketBodyEightMesh.position.y = 25.2;
rocketBodyNineMesh.position.y = 22;
rocketBodyTenMesh.position.y = 19;
/////////////////////////////////////////////////////////
rocketBodyUpperMesh.position.y = 16;
rocketBodyLowerMesh.position.y = 14;
////////////////////////////////////////////////////////
//rocketWindowMesh.position.y = 100;
//rocketwindowMesh.position.x = -20;
////////////////////////////////////////////////////
rocketFinOneMesh.position.x=-7;
rocketFinOneMesh.position.y=3;
rocketFinOneMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.position.x=6 ;
rocketFinTwoMesh.position.y=3;
rocketFinTwoMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.rotation.y = 1 * Math.PI;
rocketFinThreeMesh.position.x=0;
rocketFinThreeMesh.position.y=3;
rocketFinThreeMesh.position.z = 7;
rocketFinThreeMesh.rotation.z = 0.1 * Math.PI;
rocketFinThreeMesh.rotation.y = 0.5 * Math.PI;
rocketFinFourMesh.position.x=0;
rocketFinFourMesh.position.y=3;
rocketFinFourMesh.position.z = -6;
rocketFinFourMesh.rotation.z = 0.1 * Math.PI;
rocketFinFourMesh.rotation.y = 1.5 * Math.PI;
//Add the rocketCone to the lowpolyRocket group
rocketGroup.add(rocketAntennaOneMesh);
rocketGroup.add(rocketAntennaTwoMesh);
rocketGroup.add(rocketAntennaTwoMesh);
/////////////////////////////////////////
rocketGroup.add(rocketBodyOneMesh);
rocketGroup.add(rocketBodyTwoMesh);
rocketGroup.add(rocketBodyThreeMesh);
rocketGroup.add(rocketBodyFourMesh);
rocketGroup.add(rocketBodyFiveMesh);
rocketGroup.add(rocketBodySixMesh);
rocketGroup.add(rocketBodySevenMesh);
rocketGroup.add(rocketBodyEightMesh);
rocketGroup.add(rocketBodyNineMesh);
rocketGroup.add(rocketBodyTenMesh);
//////////////////////////////////////////
rocketGroup.add(rocketBodyUpperMesh);
rocketGroup.add(rocketBodyLowerMesh);
/////////////////////////////////////////
rocketGroup.add(rocketFinOneMesh);
rocketGroup.add(rocketFinTwoMesh);
rocketGroup.add(rocketFinThreeMesh);
rocketGroup.add(rocketFinFourMesh);
// position and point the camera to the center of the scene
camera.position.x = -400;
camera.position.y = 0;
camera.position.z = 400;
camera.lookAt(scene.position);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.PointLight(0xffffff);
spotLight.position.set(-200, 50, 150);
spotLight.castShadow = true;
scene.add(spotLight);
// add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement);
var controls = new function() {
this.EarthRotationSpeed = 1.0;
};
var gui = new dat.GUI();
gui.add(controls, 'EarthRotationSpeed', 0, 5);
// call the render function
var angle = 0;
render();
function render() {
stats.update();
angle += 0.002 * controls.EarthRotationSpeed;
//this.speed=0.005;
planetEarth.rotation.y = angle;
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function createPlanetEarthMesh(geom) {
var loader = new THREE.TextureLoader();
var planetEarthTexture = loader.load("../assets/textures/planets/Earth.png");
var normalEarthTexture = loader.load("../assets/textures/planets/EarthNormal.png");
var planetEarthMaterial = new THREE.MeshPhongMaterial({map: planetEarthTexture, bumpMap: normalEarthTexture});
// create a multimaterial
var planetEarthMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetEarthMaterial]);
return planetEarthMesh;
}
function createMoonMesh(geom) {
var loader = new THREE.TextureLoader();
var planetMoonTexture = loader.load("../assets/textures/planets/moon.jpg");
var normalMoonTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetMoonMaterial = new THREE.MeshPhongMaterial({map: planetMoonTexture, bumpMap: normalMoonTexture});
// create a multimaterial
var planetMoonMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMoonMaterial]);
return planetMoonMesh;
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
</script>
</body>
</html>

Object on camera rotation isn't centered three js

I've created a 3D marquee by bending two meshes into a circle, however I'm having trouble getting them to center to the camera.
Please reference https://jsfiddle.net/siiiick/1jh49e1u/
var text = "EXPRESS FREE SHIPPING WORLDWIDE OVER 200€ / 200% 150$ ";
var geoParams = {
size: 208,
height: 1,
curveSegments: 4,
font: "junicode",
// bevelEnabled: false,
// bevelThickness: 1,
// bevelSize: 1,
}
var textMaterial = new THREE.MeshPhongMaterial({
color: 0x000000
});
var deg = Math.PI / 4.8;
var geoTop = new THREE.TextGeometry(text, geoParams);
var textTop = new THREE.Mesh(geoTop, textMaterial);
geoTop.computeBoundingBox();
textWidth = geoTop.boundingBox.max.x - geoTop.boundingBox.min.x;
controls.target.set(-textWidth * .1 - 10, 0, -textWidth / 3.8);
textTop.rotation.y = Math.PI;
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textTop.geometry);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textTop.geometry);
textTop.position.set(-0.5 * textWidth + textWidth * .867, 0, -textWidth * .577);
var geoBot = new THREE.TextGeometry(text, geoParams);
var textBot = new THREE.Mesh(geoBot, textMaterial);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textBot.geometry);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textBot.geometry);
textBot.position.set(-0.5 * textWidth, 0, 0);
scene.add(textTop);
scene.add(textBot);
As you can see after a few seconds the the marquee isn't centered. Do you think it's as a result of the camera positioning or the mesh positioning?
Thanks

//Testing some easy camera centering code...
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45, // Field of view
w / h, // Aspect ratio
0.1, // Near
10000 // Far
);
camera.position.set(15, 10, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight(0xFFFF00);
light.position.set(20, 20, 20);
scene.add(light);
var light1 = new THREE.AmbientLight(0x808080);
light1.position.set(20, 20, 20);
scene.add(light1);
var light2 = new THREE.PointLight(0x00FFFF);
light2.position.set(-20, 20, -20);
scene.add(light2);
var light3 = new THREE.PointLight(0xFF00FF);
light3.position.set(-20, -20, -20);
scene.add(light3);
var sphereGeom = new THREE.SphereGeometry(5, 16, 16);
var material = new THREE.MeshLambertMaterial({
color: 0x808080
});
var mesh = new THREE.Mesh(sphereGeom, material);
scene.add(mesh);
var mesh1 = new THREE.Mesh(sphereGeom, material);
mesh1.position.x += 5;
mesh.add(mesh1);
var mesh2 = new THREE.Mesh(sphereGeom, material);
mesh2.position.y += 5;
mesh2.position.x += 9;
mesh.add(mesh2);
var grp0 = mesh;
var mesh = new THREE.Mesh(sphereGeom, material);
scene.add(mesh);
mesh.position.x += 30;
var mesh1 = new THREE.Mesh(sphereGeom, material);
mesh1.position.x += 15;
mesh.add(mesh1);
var mesh2 = new THREE.Mesh(sphereGeom, material);
mesh2.position.y += 12;
mesh2.position.x += 9;
mesh.add(mesh2);
renderer.setClearColor(0xdddddd, 1);
var grp1 = mesh;
var curGrp;
var targPos;
var targLook;
var tmp = new THREE.Vector3();
var vbox;
function focusCam(targ) {
const boundingBox = new THREE.Box3();
boundingBox.setFromObject(targ)
var center = boundingBox.getCenter(new THREE.Vector3())
var sz = boundingBox.getSize(new THREE.Vector3());
var minZ = sz.length() + camera.near;
var lookOffset = new THREE.Vector3(0, 0, 1);
lookOffset.applyQuaternion(camera.quaternion);
lookOffset.multiplyScalar(minZ)
targLook = center.clone();
targPos = new THREE.Vector3().copy(center).add(lookOffset)
if (!vbox) {
vbox = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material.clone())
vbox.material.transparent = true;
vbox.material.opacity = 0.15;
scene.add(vbox)
}
vbox.scale.copy(sz);
vbox.position.copy(center);
}
renderer.domElement.onclick = (evt) => {
if (!curGrp) {
curGrp = grp0;
} else if (curGrp === grp0) {
curGrp = grp1
} else if (curGrp === grp1) {
curGrp = grp0
}
focusCam(curGrp);
}
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
if (targPos) {
tmp.copy(targPos).sub(camera.position).multiplyScalar(0.01)
if (tmp.length() > 0.01) {
camera.position.add(tmp)
controls.target.add(tmp);//copy(targLook);
//camera.lookAt(targLook);
} else targPos = undefined;
}
})();
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Light rays from point light three.js

Is there a way to see the light rays from a point light in a Three js scene. I have tried fog but it makes the whole objects in the scene the color of fog.
var width = $('#g_pre_emo').width();
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xffff00, 0, 10);
var camera = new THREE.PerspectiveCamera(50, width / 500, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width, 500);
$('#g_pre_emo').append(renderer.domElement);
var intensity = 2.5;
var distance = 5;
var decay = 2.0;
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
renderer.shadowMap.Enabled = true;
renderer.setClearColor(0xffffff, 1);
var happyGroup = new THREE.Object3D();
var sadGroup = new THREE.Object3D();
var angryGroup = new THREE.Object3D();
var relaxedGroup = new THREE.Object3D();
scene.add(happyGroup);
scene.add(sadGroup);
scene.add(angryGroup);
scene.add(relaxedGroup);
var c1 = 0xffff00;
var sphere = new THREE.SphereGeometry(0.25, 16, 8);
light1 = new THREE.PointLight(c1, intensity, distance, decay);
light1.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: c1})));
scene.add(light1);
happyGroup.position.set(-3, 3, 0);
sadGroup.position.set(3, 3, 0);
angryGroup.position.set(-3, -3, 0);
relaxedGroup.position.set(3, -3, 0);
var happyGeometry = new THREE.SphereGeometry(1, 50, 50);
var happyMaterial = new THREE.MeshNormalMaterial();
var happySphere = new THREE.Mesh(happyGeometry, happyMaterial);
scene.add(happySphere);
happyGroup.add(happySphere);
var sadGeometry = new THREE.SphereGeometry(1, 50, 50);
var sadMaterial = new THREE.MeshNormalMaterial();
var sadSphere = new THREE.Mesh(sadGeometry, sadMaterial);
scene.add(sadSphere);
sadGroup.add(sadSphere);
var angryGeometry = new THREE.SphereGeometry(1, 50, 50);
var angryMaterial = new THREE.MeshNormalMaterial();
var angrySphere = new THREE.Mesh(angryGeometry, angryMaterial);
scene.add(angrySphere);
angryGroup.add(angrySphere);
var relaxedGeometry = new THREE.SphereGeometry(1, 50, 50);
var relaxedMaterial = new THREE.MeshNormalMaterial();
var relaxedSphere = new THREE.Mesh(relaxedGeometry, relaxedMaterial);
scene.add(relaxedSphere);
relaxedGroup.add(relaxedSphere);
renderer.gammaInput = true;
renderer.gammaOutput = true;
camera.position.z = 15;
function render() {
renderer.render(scene, camera);
}
;
render();
animate();
function animate() {
requestAnimationFrame(animate);
}
If i run the above code the i cant see any fog in the scene
the fiddle for above code is
https://jsfiddle.net/bqv5ynbo/1/

Possibly, you can use VolumetricSpotlightMaterial from Jerome Etienne.
For me it worked well for Three.js r71, though I haven't tried it with later revisions.
Example of usage

'Light Rays' aren't an automatically occurring thing.
Typically, light rays are created using advanced pixel shaders (stencil/shadow projection over lit region / volumetric fog) or in simple cases by creating simple alpha-blended polygons with 'ray' textures applied.
A point light is simply a light that does not apply directional calculations during it's shading phase. Instead, only distance based calculations are made.
Good Luck!

Texturing a Cylinder in Three.js

I'm looking after this for a long time now.
I just can't find any solution, anywhere.
I'm trying to apply 3 different textures on a cylinder (2 caps, and side)
But I have absolutely no idea on how to achieve this.
Can you orient me?
Here's what I'm doing for now :
var coin1_geo = new THREE.CylinderGeometry( 100, 100, 10, 100, 100, false );
var coin1_texture = THREE.ImageUtils.loadTexture("./assets/avers.png");
var coin1_mat = new THREE.MeshLambertMaterial({map:coin1_texture});
var coin1 = new THREE.Mesh( coin1_geo, coin1_mat );
coin1.rotation.x = 20;
coin1.position.set(0,0,0);
coin1.castShadow = true;
coin1.receiveShadow = false;
scene.add( coin1 );
As you can see here, I only apply one texture on all faces.
But even on caps, it's not really displaying, I only have a piece of the full circle.
Please help, I'm achieving a coin, if you didn't figure out.
Even if you just give me a link to a tutorial I would be really thanksfull.
I can't find anything, and my knowledge in 3D/OpenGL programming is quite limited.
Thanks a lot.

[edit] Three cylinders didn't work since the cap UVs are bogus.
You need to roll your own cap geometries. Not a lot of work, just annoying. Here's how to do an uncapped cylinder with custom caps:
var coin_sides_geo =
new THREE.CylinderGeometry( 10.0, 10.0, 1.0, 100.0, 10.0, true );
var coin_cap_geo = new THREE.Geometry();
var r = 10.0;
for (var i=0; i<100; i++) {
var a = i * 1/100 * Math.PI * 2;
var z = Math.sin(a);
var x = Math.cos(a);
var a1 = (i+1) * 1/100 * Math.PI * 2;
var z1 = Math.sin(a1);
var x1 = Math.cos(a1);
coin_cap_geo.vertices.push(
new THREE.Vertex(new THREE.Vector3(0, 0, 0)),
new THREE.Vertex(new THREE.Vector3(x*r, 0, z*r)),
new THREE.Vertex(new THREE.Vector3(x1*r, 0, z1*r))
);
coin_cap_geo.faceVertexUvs[0].push([
new THREE.UV(0.5, 0.5),
new THREE.UV(x/2+0.5, z/2+0.5),
new THREE.UV(x1/2+0.5, z1/2+0.5)
]);
coin_cap_geo.faces.push(new THREE.Face3(i*3, i*3+1, i*3+2));
}
coin_cap_geo.computeCentroids();
coin_cap_geo.computeFaceNormals();
var coin_sides_texture =
THREE.ImageUtils.loadTexture("./coin_sides.png");
var coin_cap_texture =
THREE.ImageUtils.loadTexture("./coin_face.png");
var coin_sides_mat =
new THREE.MeshLambertMaterial({map:coin_sides_texture});
var coin_sides =
new THREE.Mesh( coin_sides_geo, coin_sides_mat );
var coin_cap_mat = new THREE.MeshLambertMaterial({map:coin_cap_texture});
var coin_cap_top = new THREE.Mesh( coin_cap_geo, coin_cap_mat );
var coin_cap_bottom = new THREE.Mesh( coin_cap_geo, coin_cap_mat );
coin_cap_top.position.y = 0.5;
coin_cap_bottom.position.y = -0.5;
coin_cap_top.rotation.x = Math.PI;
var coin = new THREE.Object3D();
coin.add(coin_sides);
coin.add(coin_cap_top);
coin.add(coin_cap_bottom);

In modern Three.js you can create a cylinder with an array of 3 materials:
const materials = [
sideMaterial,
topMaterial,
bottomMaterial
]
const geometry = new THREE.CylinderGeometry(5, 5, 0.5, 100)
const mesh= new THREE.Mesh(geometry, materials)

TypeScript function variant, that creates Object3D with 3 meshes: side, topCap and bottomCap.
Works with lib version:
"three": "0.102.1"
import capTop from './textures/capTopTexture.png';
import capBottom from './textures/capBottomTexture.png';
import capSide from './textures/sideTexture.png';
function createCylinder (
radiusTop: number,
radiusBottom: number,
height: number,
radialSegments: number,
heightSegments: number,
): Object3D {
const cylinder = new THREE.Object3D();
const sidesGeo = new THREE.CylinderGeometry(
radiusTop,
radiusBottom,
height,
radialSegments,
heightSegments,
true,
);
const sideTexture = new THREE.TextureLoader().load(capSide, this.reRender);
const sidesMat =
new THREE.MeshLambertMaterial({map: sideTexture});
const sidesMesh =
new THREE.Mesh( sidesGeo, sidesMat );
cylinder.add(sidesMesh);
const capTopGeo = new THREE.CircleGeometry(radiusTop, radialSegments);
const capTopTexture = new THREE.TextureLoader().load(capTop, this.reRender);
const capTopMat =
new THREE.MeshLambertMaterial({map: capTopTexture});
const capTopMesh =
new THREE.Mesh( capTopGeo, capTopMat );
capTopMesh.position.y = height / 2;
capTopMesh.rotation.x = - Math.PI / 2;
cylinder.add(capTopMesh);
const capBottomGeo = new THREE.CircleGeometry(radiusBottom, radialSegments);
const capBottomTexture = new THREE.TextureLoader().load(capBottom, this.reRender);
const capBottomMat =
new THREE.MeshLambertMaterial({map: capBottomTexture});
const capBottomMesh =
new THREE.Mesh( capBottomGeo, capBottomMat );
capBottomMesh.position.y = -height / 2;
capBottomMesh.rotation.x = Math.PI / 2;
cylinder.add(capBottomMesh);
return cylinder;
};