How to join two box geometries? - javascript

I want to join 2 Box Geometries to each other (image below) which are than drag rotatable as one object.
Below is the code for one drag-rotatable boxgeometry ( var geometry1 ), what do I need to add to the code, so that the second box geometry ( var geometry2 ) is joined to the first?
var three = THREE;
var space = new three.Scene();
var cam = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var rend = new three.WebGLRenderer();
rend.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(rend.domElement);
var geometry1 = new three.BoxGeometry(1, 2, 1);
var geometry2 = new three.BoxGeometry(1, 1, 1);
var material = new three.MeshFaceMaterial([
new three.MeshBasicMaterial({
color: "red"
}),
new three.MeshBasicMaterial({
color: "orange"
}),
new three.MeshBasicMaterial({
color: "yellow"
}),
new three.MeshBasicMaterial({
color: "green"
}),
new three.MeshBasicMaterial({
color: "blue"
}),
new three.MeshBasicMaterial({
color: "cyan"
})
]);
var cube = new three.Mesh(geometry1, material);
cube.rotation.x = Math.PI / 4;
cube.rotation.y = Math.PI / 4;
space.add(cube);
cam.position.z = 5;
var Dragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
$(rend.domElement).on('mousedown', function(e) {
Dragging = true;
})
.on('mousemove', function(e) {
//console.log(e);
var deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};
if (Dragging) {
var deltaRotationQuaternion = new three.Quaternion()
.setFromEuler(new three.Euler(
toRadians(deltaMove.y * 1),
toRadians(deltaMove.x * 1),
0,
'XYZ'
));
cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
}
previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});
$(document).on('mouseup', function(e) {
Dragging = false;
});
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var lastFrameTime = new Date().getTime() / 1000;
var totalGameTime = 0;
function update(dt, t) {
setTimeout(function() {
var TimeNow = new Date().getTime() / 1000;
var dt = TimeNow - (lastFrameTime || TimeNow);
totalGameTime += dt;
update(dt, totalGameTime);
lastFrameTime = TimeNow;
}, 0);
}
function render() {
rend.render(space, cam);
requestAnimFrame(render);
}
render();
update(0, totalGameTime);
function toRadians(angle) {
return angle * (Math.PI / 180);
}
function toDegrees(angle) {
return angle * (180 / Math.PI);
}


You can create a group:
var group = new THREE.Group();
group.add(geometry1);
group.add(geometry2);
scene.add(group);
Now you can change it's position, rotation, quaternion, normally, just by using the group variable.

Related

How can I center THREE.points (text mesh) in Three.js?

I made vertices using svg path. And I made a text mesh using these vertices.
But the text mesh is not centered. The starting position of a letter is always the same, regardless of the length of the letter.
I always want to see the middle of the text.
If the length of the text is long, the entire text should be displayed on the screen.
How can I solve this problem? Please help me T.T...
The following are gif files that show the current situation.
When I write "hello"
When I write "hello world"
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
import { ALPHAMAP } from "../constants/url";
import { load } from "opentype.js";
import UnDotumBold from "../../assets/UnDotumBold.ttf";
class WebGLCanvas {
constructor(canvas) {
this._canvas = canvas;
this._clock = new THREE.Clock();
this._count = 4000;
this._distance = 2;
this._mouseX = 0;
this._mouseY = 0;
this._vertexShader = document.querySelector("#vertex-shader").textContent;
this._fragmentShader =
document.querySelector("#fragment-shader").textContent;
}
async _setupTextModel() {
const font = await load(UnDotumBold);
// 💡 I created a svg and got the svg paths to create vertices.
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
svg.setAttribute("viewBox", [0, 0, 1920, 1920].join(" "));
g.setAttribute("fill", "black");
let pathMarkup = "";
const fontPaths = font.getPaths(text, 0, 1000, 1000);
fontPaths.forEach((fontPath) => {
const path = fontPath.toSVG();
pathMarkup += path;
});
g.insertAdjacentHTML("beforeend", pathMarkup);
document.body.appendChild(svg);
svg.appendChild(g);
const paths = svg.querySelectorAll("path");
const svgViewBoxWidth = svg.viewBox.baseVal.width;
const svgViewBoxHeight = svg.viewBox.baseVal.height;
svg.remove();
// 💡 vertices
this._textVertices = [];
const colors = [];
const sizes = [];
const delay = 1;
const gradient = chroma.scale([
"ef476f",
"ffd166",
"06d6a0",
"118ab2",
"073b4c",
]);
const colorRGB = {
r: Math.random() * 100,
g: Math.random() * 100,
b: Math.random() * 100,
};
const positionXYZ = {
x: Math.random() * 3000,
y: Math.random() * 3000,
z: Math.random() * 3000,
};
const timeline = gsap.timeline({
onReverseComplete: () => {
timeline.timeScale(1);
timeline.play(0);
},
});
paths.forEach((path) => {
const length = path.getTotalLength();
for (let i = 0; i < length; i += 30) {
const pointLength = i;
const point = path.getPointAtLength(pointLength);
// 💡 end point ❗❗ => I think this part is the problem..
const vector = new THREE.Vector3(
point.x - svgViewBoxWidth / 2,
-point.y + svgViewBoxHeight / 2,
(Math.random() - 0.5) * 15,
);
// 💡 start point
const start = new THREE.Vector3(
vector.x + (Math.random() - 0.5) * positionXYZ.x,
vector.y + (Math.random() - 0.5) * positionXYZ.y,
vector.z + (Math.random() - 0.5) * positionXYZ.z,
);
const coloursX =
point.x / svgViewBoxWidth + (Math.random() - 0.5) * 0.2;
const color = gradient(coloursX).rgb();
this._textVertices.push(vector);
vector.r = 1 - (vector.z + 7.5) / colorRGB.r;
vector.g = 1 - (vector.z + 7.5) / colorRGB.g;
vector.b = 1 - (vector.z + 7.5) / colorRGB.b;
timeline.from(
vector,
{
x: start.x,
y: start.y,
z: start.z,
r: color[0] / 255,
g: color[1] / 255,
b: color[2] / 255,
duration: "random(0.5, 1.5)",
ease: "power2.out",
},
delay * 0.0012,
);
sizes.push(25 * this.renderer.getPixelRatio());
}
});
// 💡 text mesh
this._textGeometry = new THREE.BufferGeometry().setFromPoints(
this._textVertices,
);
this._textGeometry.setAttribute(
"color",
new THREE.Float32BufferAttribute(colors, 3),
);
this._textGeometry.setAttribute(
"size",
new THREE.Float32BufferAttribute(sizes, 1),
);
const textMaterial = new THREE.ShaderMaterial({
uniforms: {
pointTexture: {
value: new THREE.TextureLoader().load(ALPHAMAP.CIRCLE),
},
},
vertexShader: this._vertexShader,
fragmentShader: this._fragmentShader,
transparent: true,
depthTest: false,
});
this._textMesh = new THREE.Points(this._textGeometry, textMaterial);
this._textMesh.scale.set(0.1, 0.1, 0.1);
// this._textMesh.geometry.center(); => ❌ It dosen't work..
// this._getCenterPoint(this._textMesh); => ❌ It dosen't work..
this._textGroup = new THREE.Group();
this._textGroup.add(this._textMesh);
this._textGroup.position.set(0, 0, -240);
this._init();
}
/*
_getCenterPoint(mesh) {
const { geometry } = mesh;
const center = new THREE.Vector3();
geometry.computeBoundingBox();
geometry.boundingBox.getCenter(center);
mesh.localToWorld(center);
return center;
}
*/
_init() {
this.scene = new THREE.Scene();
this._sizes = {
width: window.innerWidth,
height: window.innerHeight,
};
this._setupCamera(this._sizes);
this._setupControls(this.camera, this._canvas);
this._render(this._canvas, this._sizes);
this._tick(this._sizes);
window.addEventListener("resize", this._resize);
window.addEventListener("mousemove", this._mousemove.bind(this));
}
_setupCamera(sizes) {
const camera = new THREE.PerspectiveCamera(
25,
sizes.width / sizes.height,
0.01,
5000,
);
this.scene.add(camera);
this.camera = camera;
}
_setupControls(camera, canvas) {
const control = new OrbitControls(camera, canvas);
control.enableDamping = true;
this.control = control;
}
_render(canvas, sizes) {
const renderer = new THREE.WebGL1Renderer({
canvas,
antialias: true,
alpha: true,
});
renderer.setClearColor(0x000000, 0);
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(window.devicePixelRatio);
this.renderer = renderer;
}
_tick(sizes) {
this.camera.position.z = 400;
this.scene.add(this._textGroup);
this._textGeometry.setFromPoints(this._textVertices);
const colours = [];
this._textVertices.forEach((vector) => {
colours.push(vector.r, vector.g, vector.b);
});
this._textGeometry.setAttribute(
"customColor",
new THREE.Float32BufferAttribute(colours, 3),
);
this.renderer.render(this.scene, this.camera);
this.control.update();
window.requestAnimationFrame(this._tick.bind(this, sizes));
}
_resize() {
const width = window.innerWidth;
const height = window.innerHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
}
_mousemove(event) {
// ...
}
}
export default WebGLCanvas;

(THREE.JS) calculate the custom UVs for custom Buffer Geometry

I am trying to create a curve wall using some vertices array in three JS.
What I will get in array is some base vertices in 2D which will be the bottom vertices of wall. These includes the center, lower and upper vertices which means it is two faced wall. based on these vertices, I added some wall height and convert that 2D to 3D.
Below is the code and working fiddle
/**
* Created by Singh on 7/30/2018.
*/
var renderer, scene, camera;
init();
animate();
function init() {
wallsGeometry = function(totalPoints){
var material = new THREE.MeshBasicMaterial({/*color: 0xff0000,*/ side: THREE.DoubleSide, wireframe : false});
var material2 = new THREE.MeshBasicMaterial({/*color: 0x0044400, */side: THREE.DoubleSide, wireframe : true});
var geometry = new THREE.BufferGeometry();
var geometry2 = new THREE.BufferGeometry();
var wallHeight = 200;
var pointindices = [
0,1,2,0,2,3, //left
5,4,7,5,7,6, //right
4,0,3,4,3,7, //back
1,5,6,1,6,2, //front
2,6,7,2,7,3, //top
5,1,0,5,0,4, //bottom
];
var pointindices2 = [
1,0,2,1,3,2 , //left
4,5,7,4,6,7, //right
0,4,3,0,7,3, //back
5,1,2,5,2,6, //front
6,2,7,6,3,7, //top
1,5,0,1,4,0, //bottom
];
var tempIndices = [];
var tempIndices2 = [];
for(var i=0; i<4; i++) {
for (var j = 0; j < pointindices.length; j++) {
tempIndices[pointindices.length * i + j] = 4 * i + pointindices[j];
}
}
for(var i=0; i<4; i++) {
for (var j = 0; j < pointindices2.length; j++) {
tempIndices2[pointindices2.length * i + j] = 4 * i + pointindices2[j];
}
}
var tempVerMesh = [];
var tempVerMesh2 = [];
var indices = new Uint32Array( tempIndices );
var pointsArray = { // for testing
pointUpper1: new THREE.Vector3(),
pointUpper2: new THREE.Vector3(),
pointCenter1: new THREE.Vector3(),
pointCenter2: new THREE.Vector3(),
pointLower1: new THREE.Vector3(),
pointLower2: new THREE.Vector3()
};
console.log(totalPoints);
/*function generateUVs(geometry) {
geometry.computeBoundingBox();
var max = geometry.boundingBox.max, min = geometry.boundingBox.min;
var offset = new THREE.Vector3(0 - min.x, 0 - min.y);
var range = new THREE.Vector3(max.x - min.x, max.y - min.y);
var faces = geometry.faces;
geometry.faceVertexUvs[0] = [];
for (var i = 0; i < faces.length ; i++) {
var v1 = geometry.vertices[faces[i].a],
v2 = geometry.vertices[faces[i].b],
v3 = geometry.vertices[faces[i].c];
geometry.faceVertexUvs[0].push([
new THREE.Vector3((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
new THREE.Vector3((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
new THREE.Vector3((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y),
]);
}
geometry.uvsNeedUpdate = true;
return geometry;
}*/
for (var i = 0; i < totalPoints.lower.length ; i++) {
pointsArray.pointCenter1 = totalPoints.center[i];
//pointsArray.pointCenter2 = totalPoints.center[i + 1];
pointsArray.pointLower1 = totalPoints.lower[i];
//pointsArray.pointLower2 = totalPoints.lower[i + 1];
pointsArray.pointUpper1 = totalPoints.upper[i];
//pointsArray.pointUpper2 = totalPoints.upper[i + 1];
tempVerMesh.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y, pointsArray.pointCenter1.z);
tempVerMesh.push(pointsArray.pointLower1.x, pointsArray.pointLower1.y, pointsArray.pointLower1.z);
tempVerMesh.push(pointsArray.pointLower1.x, pointsArray.pointLower1.y + wallHeight, pointsArray.pointLower1.z);
tempVerMesh.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y + wallHeight, pointsArray.pointCenter1.z);
tempVerMesh2.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y, pointsArray.pointCenter1.z);
tempVerMesh2.push(pointsArray.pointUpper1.x, pointsArray.pointUpper1.y, pointsArray.pointUpper1.z);
tempVerMesh2.push(pointsArray.pointUpper1.x, pointsArray.pointUpper1.y + wallHeight, pointsArray.pointUpper1.z );
tempVerMesh2.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y + wallHeight, pointsArray.pointCenter1.z);
}
var vertices = new Float32Array(tempVerMesh);
var vertices2 = new Float32Array(tempVerMesh2);
//var uvs = new Float32Array(pointUVs);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
//geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
geometry.computeFaceNormals();
geometry.computeVertexNormals();
console.log(geometry);
var mesh = new THREE.Mesh(geometry, material);
var indices2 = new Uint32Array(tempIndices2);
geometry2.addAttribute('position', new THREE.BufferAttribute(vertices2, 3));
geometry2.setIndex(new THREE.BufferAttribute(indices2, 1));
geometry2.computeFaceNormals();
geometry2.computeVertexNormals();
/*var geom = new THREE.Geometry().fromBufferGeometry(geometry2);
var temp = generateUVs(geom);
geometry2 = new THREE.BufferGeometry().fromGeometry(temp);*/
var mesh2 = new THREE.Mesh(geometry2, material2);
//geometry2.addAttribute('uv', new THREE.BufferAttribute(uvs2, 2));
return [mesh,mesh2];
};
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 400;
scene = new THREE.Scene();
var arrow;
var rayCaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.domElement.addEventListener("mousemove", onMouseMove);
var points = {
pointUpper1: new THREE.Vector3(-70, 0, -20),
pointUpper2: new THREE.Vector3(130, 0, -20),
pointCenter1: new THREE.Vector3(-100, 0, 0),
pointCenter2: new THREE.Vector3(150, 0, 0),
pointLower1: new THREE.Vector3(-70, 0, 20),
pointLower2: new THREE.Vector3(130, 0, 20)
};
var totalPoints = {
center : [new THREE.Vector3(-70, 0, 0),new THREE.Vector3(0, 0, 0),new THREE.Vector3(50, 0, 0),new THREE.Vector3(100, 0, 0),new THREE.Vector3(130, 0, 0)],
lower : [new THREE.Vector3(-70, 0, 20),new THREE.Vector3(0, 0, 20),new THREE.Vector3(50, 0, 20),new THREE.Vector3(100, 0, 20),new THREE.Vector3(130, 0, 20)],
upper : [new THREE.Vector3(-70, 0, -20),new THREE.Vector3(0, 0, -20),new THREE.Vector3(50, 0, -20),new THREE.Vector3(100, 0, -20),new THREE.Vector3(130, 0, -20)]
};
var sphere = new THREE.SphereGeometry(2, 10, 10);
function initPoints(){
var point1mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0xff00}));
point1mesh.position.copy(points.pointUpper1);
scene.add(point1mesh);
var point2mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0x0000ff}));
point2mesh.position.copy(points.pointUpper2);
scene.add(point2mesh);
var point3mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0xff00}));
point3mesh.position.copy(points.pointCenter1);
scene.add(point3mesh);
var point4mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0x0000ff}));
point4mesh.position.copy(points.pointCenter2);
scene.add(point4mesh);
var point5mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0xff00}));
point5mesh.position.copy(points.pointLower1);
scene.add(point5mesh);
var point6mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0x0000ff}));
point6mesh.position.copy(points.pointLower2);
scene.add(point6mesh);
}
initPoints();
var mesh = new wallsGeometry(totalPoints);
function createArrow() {
var length = 30;
arrow = new THREE.ArrowHelper(
THREE.Object3D.DefaultUp,
new THREE.Vector3(),
length,
0xffff00,
1.5 * length,
1.25 * length
);
arrow.position.z = 10;
scene.add(arrow);
}
// arrow
createArrow();
function updateArrow(object, point, face) {
arrow.position.copy(point);
var normalMatrix = new THREE.Matrix3().getNormalMatrix( object.matrixWorld );
var normal = face.normal.clone().applyMatrix3( normalMatrix ).normalize();
arrow.setDirection(normal);
}
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
rayCaster.setFromCamera(mouse, camera);
var intersects = rayCaster.intersectObject(mesh[0], true);
var i, il, intersect;
if (intersects[0]) {
var face = intersects[0].face;
var point = intersects[0].point;
var object = intersects[0].object;
updateArrow(object, point, face);
}
}
/* var textureLoader = new THREE.TextureLoader();
textureLoader.load('./textures/Capture.PNG', function (texture) {
console.log('texture loaded');
texture.minFilter = THREE.LinearFilter;
//mesh[0].material.map = texture;
var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh[0], 10 );
mesh[0].add( vertexNormalsHelper );
}); */
scene.add(mesh[0]);
/* textureLoader.load('./textures/abc.jpg', function (texture) {
console.log('texture loaded');
texture.minFilter = THREE.LinearFilter;
//mesh[1].material.map = texture;
var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh[1], 10 );
mesh[1].add( vertexNormalsHelper );
}); */
scene.add(mesh[1]);
//
var Orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
Orbitcontrols.update();
}
// render
function render() {
renderer.render(scene, camera);
}
// animate
function animate() {
requestAnimationFrame(animate);
render();
}
https://jsfiddle.net/simar_aneja/fsmw8znq/6/
In the fiddle you can see that wall is building properly and you can increase the vertices and loop of creating those indices, in the start. Now I want to add UVs to this bufferGeometry, I tried converting to geometry and then calculated faceVertexUVs, but this is not the right way. Can anyone suggest me the further path where I can attach different textures only at the front side, different on top side. And it should be in such a way that no matter how many vertices comes, Uvs should get calculated based on length of vertices. I have some Idea but not getting how to make it different for diff sides of wall.
Thanks

Here's a UV box-unwrapping I fixed up for ya. Maybe you'll find it helpful...
I also put your fiddle into a snippet you can run below...
function boxUnwrapUVs(geometry) {
if (!geometry.boundingBox) geometry.computeBoundingBox();
var sz = geometry.boundingBox.getSize(new THREE.Vector3());
var center = geometry.boundingBox.getCenter(new THREE.Vector3())
var min = geometry.boundingBox.min;
if (geometry.faceVertexUvs[0].length == 0) {
for (var i = 0; i < geometry.faces.length; i++) {
geometry.faceVertexUvs[0].push([new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()]);
}
}
for (var i = 0; i < geometry.faces.length; i++) {
var face = geometry.faces[i];
var faceUVs = geometry.faceVertexUvs[0][i]
var va = geometry.vertices[geometry.faces[i].a]
var vb = geometry.vertices[geometry.faces[i].b]
var vc = geometry.vertices[geometry.faces[i].c]
var vab = new THREE.Vector3().copy(vb).sub(va)
var vac = new THREE.Vector3().copy(vc).sub(va)
//now we have 2 vectors to get the cross product of...
var vcross = new THREE.Vector3().copy(vab).cross(vac);
//Find the largest axis of the plane normal...
vcross.set(Math.abs(vcross.x), Math.abs(vcross.y), Math.abs(vcross.z))
var majorAxis = vcross.x > vcross.y ? (vcross.x > vcross.z ? 'x' : vcross.y > vcross.z ? 'y' : vcross.y > vcross.z) : vcross.y > vcross.z ? 'y' : 'z'
//Take the other two axis from the largest axis
var uAxis = majorAxis == 'x' ? 'y' : majorAxis == 'y' ? 'x' : 'x';
var vAxis = majorAxis == 'x' ? 'z' : majorAxis == 'y' ? 'z' : 'y';
faceUVs[0].set((va[uAxis] - min[uAxis]) / sz[uAxis], (va[vAxis] - min[vAxis]) / sz[vAxis])
faceUVs[1].set((vb[uAxis] - min[uAxis]) / sz[uAxis], (vb[vAxis] - min[vAxis]) / sz[vAxis])
faceUVs[2].set((vc[uAxis] - min[uAxis]) / sz[uAxis], (vc[vAxis] - min[vAxis]) / sz[vAxis])
}
geometry.elementsNeedUpdate = geometry.verticesNeedUpdate = true;
}
geometry = new THREE.Geometry().fromBufferGeometry(geometry)
boxUnwrapUVs(geometry)
var mesh = new THREE.Mesh(geometry, material);
/**
* Created by Singh on 7/30/2018.
*/
var renderer, scene, camera;
init();
animate();
function init() {
wallsGeometry = function(totalPoints) {
var rrnd = (min, max) => (Math.random() * (max - min)) + min
var irnd = (rng) => (Math.random() * rng) | 0
function makeRndCanvas() {
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 128;
var ctx = canvas.getContext('2d');
var srnd = (rng) => (Math.random() - 0.5) * 2 * rng
var irnd = (rng) => ((Math.random() * rng) | 0)
for (var x = 0; x < canvas.width; x++) {
for (var y = 0; y < canvas.width; y++) {
ctx.fillStyle = `rgba(${irnd(256)},${irnd(256)},${irnd(256)},1.0)`
ctx.fillRect(x, y, 1, 1);
}
}
ctx.fillStyle = '#ffff00'
ctx.fillText("WAHOO", 3, 64)
return canvas;
}
function makeRndTexture() {
var tex = new THREE.Texture(makeRndCanvas())
tex.minFilter = // THREE.LinearMipMapLinearFilter;
tex.magFilter = THREE.NearestFilter; //THREE.LinearFilter;
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
//tex.repeat.set(0.01, 0.01);
tex.needsUpdate = true;
return tex;
}
var material = new THREE.MeshLambertMaterial({ /*color: 0xff0000,*/
side: THREE.DoubleSide,
wireframe: false,
map: makeRndTexture()
});
var material2 = new THREE.MeshLambertMaterial({ /*color: 0x0044400, */
side: THREE.DoubleSide,
wireframe: true
});
var geometry = new THREE.BufferGeometry();
var geometry2 = new THREE.BufferGeometry();
var wallHeight = 200;
var pointindices = [
0, 1, 2, 0, 2, 3, //left
5, 4, 7, 5, 7, 6, //right
4, 0, 3, 4, 3, 7, //back
1, 5, 6, 1, 6, 2, //front
2, 6, 7, 2, 7, 3, //top
5, 1, 0, 5, 0, 4, //bottom
];
var pointindices2 = [
1, 0, 2, 1, 3, 2, //left
4, 5, 7, 4, 6, 7, //right
0, 4, 3, 0, 7, 3, //back
5, 1, 2, 5, 2, 6, //front
6, 2, 7, 6, 3, 7, //top
1, 5, 0, 1, 4, 0, //bottom
];
var tempIndices = [];
var tempIndices2 = [];
for (var i = 0; i < 4; i++) {
for (var j = 0; j < pointindices.length; j++) {
tempIndices[pointindices.length * i + j] = 4 * i + pointindices[j];
}
}
for (var i = 0; i < 4; i++) {
for (var j = 0; j < pointindices2.length; j++) {
tempIndices2[pointindices2.length * i + j] = 4 * i + pointindices2[j];
}
}
var tempVerMesh = [];
var tempVerMesh2 = [];
var indices = new Uint32Array(tempIndices);
var pointsArray = { // for testing
pointUpper1: new THREE.Vector3(),
pointUpper2: new THREE.Vector3(),
pointCenter1: new THREE.Vector3(),
pointCenter2: new THREE.Vector3(),
pointLower1: new THREE.Vector3(),
pointLower2: new THREE.Vector3()
};
console.log(totalPoints);
/*function generateUVs(geometry) {
geometry.computeBoundingBox();
var max = geometry.boundingBox.max, min = geometry.boundingBox.min;
var offset = new THREE.Vector3(0 - min.x, 0 - min.y);
var range = new THREE.Vector3(max.x - min.x, max.y - min.y);
var faces = geometry.faces;
geometry.faceVertexUvs[0] = [];
for (var i = 0; i < faces.length ; i++) {
var v1 = geometry.vertices[faces[i].a],
v2 = geometry.vertices[faces[i].b],
v3 = geometry.vertices[faces[i].c];
geometry.faceVertexUvs[0].push([
new THREE.Vector3((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
new THREE.Vector3((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
new THREE.Vector3((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y),
]);
}
geometry.uvsNeedUpdate = true;
return geometry;
}*/
for (var i = 0; i < totalPoints.lower.length; i++) {
pointsArray.pointCenter1 = totalPoints.center[i];
//pointsArray.pointCenter2 = totalPoints.center[i + 1];
pointsArray.pointLower1 = totalPoints.lower[i];
//pointsArray.pointLower2 = totalPoints.lower[i + 1];
pointsArray.pointUpper1 = totalPoints.upper[i];
//pointsArray.pointUpper2 = totalPoints.upper[i + 1];
tempVerMesh.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y, pointsArray.pointCenter1.z);
tempVerMesh.push(pointsArray.pointLower1.x, pointsArray.pointLower1.y, pointsArray.pointLower1.z);
tempVerMesh.push(pointsArray.pointLower1.x, pointsArray.pointLower1.y + wallHeight, pointsArray.pointLower1.z);
tempVerMesh.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y + wallHeight, pointsArray.pointCenter1.z);
tempVerMesh2.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y, pointsArray.pointCenter1.z);
tempVerMesh2.push(pointsArray.pointUpper1.x, pointsArray.pointUpper1.y, pointsArray.pointUpper1.z);
tempVerMesh2.push(pointsArray.pointUpper1.x, pointsArray.pointUpper1.y + wallHeight, pointsArray.pointUpper1.z);
tempVerMesh2.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y + wallHeight, pointsArray.pointCenter1.z);
}
var vertices = new Float32Array(tempVerMesh);
var vertices2 = new Float32Array(tempVerMesh2);
//var uvs = new Float32Array(pointUVs);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
//geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
geometry.computeFaceNormals();
geometry.computeVertexNormals();
console.log(geometry);
function boxUnwrapUVs(geometry) {
if (!geometry.boundingBox) geometry.computeBoundingBox();
var sz = geometry.boundingBox.getSize(new THREE.Vector3());
var center = geometry.boundingBox.getCenter(new THREE.Vector3())
var min = geometry.boundingBox.min;
if (geometry.faceVertexUvs[0].length == 0) {
for (var i = 0; i < geometry.faces.length; i++) {
geometry.faceVertexUvs[0].push([new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()]);
}
}
for (var i = 0; i < geometry.faces.length; i++) {
var face = geometry.faces[i];
var faceUVs = geometry.faceVertexUvs[0][i]
var va = geometry.vertices[geometry.faces[i].a]
var vb = geometry.vertices[geometry.faces[i].b]
var vc = geometry.vertices[geometry.faces[i].c]
var vab = new THREE.Vector3().copy(vb).sub(va)
var vac = new THREE.Vector3().copy(vc).sub(va)
//now we have 2 vectors to get the cross product of...
var vcross = new THREE.Vector3().copy(vab).cross(vac);
//Find the largest axis of the plane normal...
vcross.set(Math.abs(vcross.x), Math.abs(vcross.y), Math.abs(vcross.z))
var majorAxis = vcross.x > vcross.y ? (vcross.x > vcross.z ? 'x' : vcross.y > vcross.z ? 'y' : vcross.y > vcross.z) : vcross.y > vcross.z ? 'y' : 'z'
//Take the other two axis from the largest axis
var uAxis = majorAxis == 'x' ? 'y' : majorAxis == 'y' ? 'x' : 'x';
var vAxis = majorAxis == 'x' ? 'z' : majorAxis == 'y' ? 'z' : 'y';
faceUVs[0].set((va[uAxis] - min[uAxis]) / sz[uAxis], (va[vAxis] - min[vAxis]) / sz[vAxis])
faceUVs[1].set((vb[uAxis] - min[uAxis]) / sz[uAxis], (vb[vAxis] - min[vAxis]) / sz[vAxis])
faceUVs[2].set((vc[uAxis] - min[uAxis]) / sz[uAxis], (vc[vAxis] - min[vAxis]) / sz[vAxis])
}
geometry.elementsNeedUpdate = geometry.verticesNeedUpdate = true;
}
geometry = new THREE.Geometry().fromBufferGeometry(geometry)
boxUnwrapUVs(geometry)
geometry = new THREE.BufferGeometry().fromGeometry(geometry)
var mesh = new THREE.Mesh(geometry, material);
var indices2 = new Uint32Array(tempIndices2);
geometry2.addAttribute('position', new THREE.BufferAttribute(vertices2, 3));
geometry2.setIndex(new THREE.BufferAttribute(indices2, 1));
geometry2.computeFaceNormals();
geometry2.computeVertexNormals();
/* var geom = new THREE.Geometry().fromBufferGeometry(geometry2);
var temp = generateUVs(geom);
geometry2 = new THREE.BufferGeometry().fromGeometry(temp);*/
var mesh2 = new THREE.Mesh(geometry2, material2);
//geometry2.addAttribute('uv', new THREE.BufferAttribute(uvs2, 2));
return [mesh, mesh2];
};
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 400;
scene = new THREE.Scene();
var arrow;
var rayCaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var light = new THREE.DirectionalLight();
light.position.set(200, 200, 200)
scene.add(light)
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener("mousemove", onMouseMove);
var points = {
pointUpper1: new THREE.Vector3(-70, 0, -20),
pointUpper2: new THREE.Vector3(130, 0, -20),
pointCenter1: new THREE.Vector3(-100, 0, 0),
pointCenter2: new THREE.Vector3(150, 0, 0),
pointLower1: new THREE.Vector3(-70, 0, 20),
pointLower2: new THREE.Vector3(130, 0, 20)
};
var totalPoints = {
center: [new THREE.Vector3(-70, 0, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(50, 0, 0), new THREE.Vector3(100, 0, 0), new THREE.Vector3(130, 0, 0)],
lower: [new THREE.Vector3(-70, 0, 20), new THREE.Vector3(0, 0, 20), new THREE.Vector3(50, 0, 20), new THREE.Vector3(100, 0, 20), new THREE.Vector3(130, 0, 20)],
upper: [new THREE.Vector3(-70, 0, -20), new THREE.Vector3(0, 0, -20), new THREE.Vector3(50, 0, -20), new THREE.Vector3(100, 0, -20), new THREE.Vector3(130, 0, -20)]
};
var sphere = new THREE.SphereGeometry(2, 10, 10);
function initPoints() {
var point1mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
color: 0xff00
}));
point1mesh.position.copy(points.pointUpper1);
scene.add(point1mesh);
var point2mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
color: 0x0000ff
}));
point2mesh.position.copy(points.pointUpper2);
scene.add(point2mesh);
var point3mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
color: 0xff00
}));
point3mesh.position.copy(points.pointCenter1);
scene.add(point3mesh);
var point4mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
color: 0x0000ff
}));
point4mesh.position.copy(points.pointCenter2);
scene.add(point4mesh);
var point5mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
color: 0xff00
}));
point5mesh.position.copy(points.pointLower1);
scene.add(point5mesh);
var point6mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
color: 0x0000ff
}));
point6mesh.position.copy(points.pointLower2);
scene.add(point6mesh);
}
initPoints();
var mesh = new wallsGeometry(totalPoints);
function createArrow() {
var length = 30;
arrow = new THREE.ArrowHelper(
THREE.Object3D.DefaultUp,
new THREE.Vector3(),
length,
0xffff00,
1.5 * length,
1.25 * length
);
arrow.position.z = 10;
scene.add(arrow);
}
// arrow
createArrow();
function updateArrow(object, point, face) {
arrow.position.copy(point);
var normalMatrix = new THREE.Matrix3().getNormalMatrix(object.matrixWorld);
var normal = face.normal.clone().applyMatrix3(normalMatrix).normalize();
arrow.setDirection(normal);
}
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
rayCaster.setFromCamera(mouse, camera);
var intersects = rayCaster.intersectObject(mesh[0], true);
var i, il, intersect;
if (intersects[0]) {
var face = intersects[0].face;
var point = intersects[0].point;
var object = intersects[0].object;
updateArrow(object, point, face);
}
}
/* var textureLoader = new THREE.TextureLoader();
textureLoader.load('./textures/Capture.PNG', function (texture) {
console.log('texture loaded');
texture.minFilter = THREE.LinearFilter;
//mesh[0].material.map = texture;
var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh[0], 10 );
mesh[0].add( vertexNormalsHelper );
}); */
scene.add(mesh[0]);
/* textureLoader.load('./textures/abc.jpg', function (texture) {
console.log('texture loaded');
texture.minFilter = THREE.LinearFilter;
//mesh[1].material.map = texture;
var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh[1], 10 );
mesh[1].add( vertexNormalsHelper );
}); */
scene.add(mesh[1]);
//
var Orbitcontrols = new THREE.OrbitControls(camera, renderer.domElement);
Orbitcontrols.update();
}
// render
function render() {
renderer.render(scene, camera);
}
// animate
function animate() {
requestAnimationFrame(animate);
render();
}
<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>

How can I turn shaders off and on at specific points in my Three JS scene?

I am creating a THREEjs animation which I eventually want to sync with audio. (Can't accomplish this currently) I would like to add and remove shaders at specific points. How can I accomplish this most efficiently?
The way I have it set up now, is that I have a mirror shader inside of a function called turnOnMirror and in my render function, I have a conditional statement,
if (audioSrc.context.currentTime > 32.0) { turnOnMirror(); }
The shader looks like this:
var mirror = mirrorPass = new THREE.ShaderPass( THREE.MirrorShader );
mirror.renderToScreen = true;
composer.addPass(mirror);
(I am doing this for 2 reasons!
A: The renderer is the only place I can grab the actual time to make this call. And B: because for whatever reason, my frequencyData array comes back as 0s.
However, when the scene reaches this point, everything slows down extremely. How can I keep the same frame rate and accomplish what I am attempting to at the same time?
A piece of information for you is that the scene works fine at the same constant speed if I just apply the shader without making the call in the render function.
You can view the site here!
And the source code for the main.js is below!
/* ==================== [ Global Variables ] ==================== */
var scene, camera, renderer, aspectRatio;
var stats;
var composer, effect, clock;
var backMesh;
/* ==================== [ Audio Context ] ==================== */
var ctx = new AudioContext();
var audio = document.getElementById('player');
audio.play();
audio.volume = 1;
// audio.crossOrigin = "anonymous";
var audioSrc = ctx.createMediaElementSource(audio);
var analyser = ctx.createAnalyser();
audioSrc.connect(analyser);
audioSrc.connect(ctx.destination);
// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);
console.log(audioSrc);
console.log(audioSrc.context.currentTime);
console.log(frequencyData);
console.log(analyser.fftSize); // 2048 by default
console.log(analyser.frequencyBinCount); // will give us 1024 data points
analyser.fftSize = 64;
console.log(analyser.frequencyBinCount); // fftSize/2 = 32 data points
/* ==================== [ Set Scene & Camera ] ==================== */
scene = new THREE.Scene();
// scene.fog = new THREE.Fog(0x000000, 0, 1200);
aspectRatio = window.innerWidth / window.innerHeight;
camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 100);
// camera.target = new THREE.Vector3( 10, 10, 10 );
// Set the DOM
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("#000000");
document.body.appendChild(renderer.domElement);
/* ==================== [ Camera Position ] ==================== */
camera.position.z = 15;
camera.position.y = 0;
/* ==================== [ Point Lights ] ==================== */
var pointLightBlue = new THREE.PointLight("#00ccff", 5, 100, 2);
pointLightBlue.position.set(-10, -40, -10);
scene.add(pointLightBlue);
// var pointLightWhite = new THREE.PointLight( "#ffffff", 1, 0, 1 );
// // pointLightWhite.position.set( -10, 160, -10 );
// pointLightWhite.position.set( 0, 0, 1 );
// scene.add(pointLightWhite);
// camera.add(pointLightWhite);
// var pointLightPink = new THREE.PointLight( "#EE567C", 5, 100, 10 );
// pointLightPink.position.set( 1, 0, -5 );
// scene.add(pointLightPink);
var pointLight = new THREE.PointLight("#A805FA", 2, 100, 40);
pointLight.position.set(40, 0, 40);
scene.add(pointLight);
var light2 = new THREE.PointLight( 0xFFFFFF, 1, 100 );
scene.add( light2 );
light2.position.z = 1000;
var pointLight2 = new THREE.PointLight("#07FAA0", 2, 100, 30);
pointLight2.position.set(-40, 0, -40);
scene.add(pointLight2);
/* ==================== [ Particles ] ==================== */
var getCamera = function() {
return camera;
}
// var texture = new Image();
// texture.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/82015/snowflake.png';
// texture.src = './images/particle.png';
//var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(texture) } );
var particleCount = 0, particleSystem, particles;
THREE.ImageUtils.crossOrigin = '';
var texture = THREE.ImageUtils.loadTexture('./images/particle.png');
//console.log(texture);
particleCount = 20000,
particles = new THREE.Geometry();
var pMaterial = new THREE.PointCloudMaterial({
color: 0xFFFFFF,
map: texture,
blending: THREE.AdditiveBlending,
depthTest: false,
depthWrite: false,
transparent: true,
opacity: 0.3,
side: THREE.DoubleSide,
size: 1.2
});
for (var i = 0; i < particleCount; i++) {
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vector3(pX, pY, pZ);
particles.vertices.push(particle);
}
particleSystem = new THREE.ParticleSystem(particles, pMaterial);
particleSystem.sortParticles = false;
particleSystem.frustumCulled = false;
scene.add(particleSystem);
/* ==================== [ Light Beams ] ==================== */
var BEAM_ROT_SPEED = 0.003;
var BEAM_COUNT = 360;
var beamGeometry = new THREE.PlaneBufferGeometry(1, 500, 10, 1);
beamGroup = new THREE.Object3D();
beamMaterial = new THREE.MeshBasicMaterial({
opacity: 0.02,
transparent: true,
});
for (var i = 0; i <= BEAM_COUNT; ++i) {
var beam = new THREE.Mesh(beamGeometry, beamMaterial);
beam.doubleSided = true;
beam.rotation.x = Math.random() * Math.PI;
beam.rotation.y = Math.random() * Math.PI;
beam.rotation.z = Math.random() * Math.PI;
beamGroup.add(beam);
}
scene.add(beamGroup);
beamGroup.translateZ( -5 );
/* ==================== [ Cubes ] ==================== */
var doStrobe = false;
var doShake = false;
var strobeOn = false;
var beatTime = 30;
THREE.ImageUtils.crossOrigin = '';
var imgTextureStripes2 = THREE.ImageUtils.loadTexture( "./images/stripes2.jpg" );
imgTextureStripes2.wrapS = imgTextureStripes2.wrapT = THREE.RepeatWrapping;
imgTextureStripes2.repeat.set( 100, 100 );
backMaterial2 = new THREE.MeshBasicMaterial( {
map:imgTextureStripes2
} );
backMesh2 = new THREE.Mesh( new THREE.SphereGeometry( 1900, 30, 20 ), backMaterial2 );
backMesh2.scale.x = -1;
scene.add( backMesh2 );
backMesh2.visible = false;
function Box() {
this.posn = new THREE.Vector3();
this.rotation = new THREE.Vector3();
this.speed = getRand(3, 20);
this.init();
}
Box.ORIGIN = new THREE.Vector3();
Box.MAX_DISTANCE = 1000;
Box.INIT_POSN_RANGE = 500;
Box.FRONT_PLANE_Z = 1000;
Box.BACK_PLANE_Z = -1000;
Box.prototype.init = function() {
this.posn.copy(Box.ORIGIN);
this.posn.x = getRand(-Box.INIT_POSN_RANGE,Box.INIT_POSN_RANGE);
this.posn.y = getRand(-Box.INIT_POSN_RANGE,Box.INIT_POSN_RANGE);
this.posn.z = Box.BACK_PLANE_Z;
this.rotation.x = (Math.random() * 360 ) * Math.PI / 180;
this.rotation.y = (Math.random() * 360 ) * Math.PI / 180;
this.rotation.z = (Math.random() * 360 ) * Math.PI / 180;
};
Box.prototype.update = function() {
this.posn.z += this.speed * sketchParams.cubeSpeed ;
this.rotation.x += 0.03;
this.rotation.y += 0.01;
if(this.posn.z > Box.FRONT_PLANE_Z) {
this.init();
}
};
// returns random number within a range
function getRand(minVal, maxVal) {
return minVal + (Math.random() * (maxVal - minVal));
}
var cubesize = 100;
var BOX_COUNT;
var geometry = new THREE.CubeGeometry(cubesize, cubesize, cubesize);
cubeHolder = new THREE.Object3D();
THREE.ImageUtils.crossOrigin = '';
imgTextureStripes = THREE.ImageUtils.loadTexture( "./images/stripes2.jpg" );
cubeMaterial = new THREE.MeshPhongMaterial( {
ambient: 0x111111,
color: 0x666666,
specular: 0x999999,
shininess: 30,
shading: THREE.FlatShading,
map:imgTextureStripes
});
for(i = 0; i < BOX_COUNT; i++) {
var box = new Box();
console.log(box);
boxes.push(box);
var cube = new THREE.Mesh(geometry,cubeMaterial );
cube.position = box.posn;
cube.rotation = box.rotation;
cube.ox = cube.scale.x = Math.random() * 1 + 1;
cube.oy = cube.scale.y = Math.random() * 1 + 1;
cube.oz = cube.scale.z = Math.random() * 1 + 1;
cubeHolder.add(cube);
}
scene.add(cubeHolder);
/* ==================== [ Mini Geometries ] ==================== */
/* ==================== [ Post Processing ] ==================== */
composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
effect = new THREE.ShaderPass(THREE.FilmShader);
effect.uniforms['time'].value = 2.0;
effect.uniforms['nIntensity'].value = 0.4;
effect.uniforms['sIntensity'].value = 0.9;
effect.uniforms['sCount'].value = 1800;
effect.uniforms['grayscale'].value = 0.8;
composer.addPass(effect);
// var dot = new THREE.ShaderPass( THREE.DotScreenShader );
// dot.uniforms[ 'scale' ].value = 400;
// dot.uniforms[ 'tDiffuse' ].value = 40;
// dot.uniforms[ 'tSize' ].value = new THREE.Vector2( 256, 256 );
// composer.addPass(dot);
// var kaleidoPass = new THREE.ShaderPass(THREE.KaleidoShader);
// kaleidoPass.uniforms['sides'].value = 3;
// kaleidoPass.uniforms['angle'].value = 45 * Math.PI / 180;
// composer.addPass(kaleidoPass);
// var mirror = mirrorPass = new THREE.ShaderPass( THREE.MirrorShader );
// // mirror.uniforms[ "tDiffuse" ].value = 1.0;
// // mirror.uniforms[ "side" ].value = 3;
// composer.addPass(mirror);
var glitch = new THREE.GlitchPass(64);
glitch.uniforms[ "tDiffuse" ].value = 1.0;
glitch.uniforms[ 'seed' ].value = Math.random() * 5;
glitch.uniforms[ 'byp' ].value = 0;
// glitch.goWild = true;
composer.addPass(glitch);
var superPass = new THREE.ShaderPass(THREE.SuperShader);
superPass.uniforms.vigDarkness.value = 1;
superPass.uniforms.vigOffset.value = 1.3;
superPass.uniforms.glowSize.value = 2;
superPass.uniforms.glowAmount.value = 1;
composer.addPass( superPass );
var tv = new THREE.ShaderPass( THREE.BadTVShader );
tv.uniforms[ "distortion" ].value = 1;
tv.uniforms[ "distortion2" ].value = .01;
// tv.uniforms[ "time" ].value = 1.5;
tv.uniforms[ "speed" ].value = 8.8;
tv.uniforms[ "rollSpeed" ].value = 0.8;
composer.addPass(tv);
var staticPass = new THREE.ShaderPass( THREE.StaticShader );
staticPass.uniforms[ "amount" ].value = 0.15;
staticPass.uniforms[ "size" ].value = 1.0;
staticPass.uniforms[ "time" ].value = 4.5;
composer.addPass(staticPass);
var effect1 = new THREE.ShaderPass(THREE.RGBShiftShader);
effect1.uniforms['amount'].value = 0.003;
effect1.renderToScreen = true;
composer.addPass(effect1);
function turnOnMirror() {
var mirror = mirrorPass = new THREE.ShaderPass( THREE.MirrorShader );
mirror.renderToScreen = true;
composer.addPass(mirror);
}
function turnOffMirror() {
var mirror = mirrorPass = new THREE.ShaderPass( THREE.MirrorShader );
mirror.renderToScreen = false;
composer.addPass(mirror);
}
// add a timer
clock = new THREE.Clock;
/* ==================== [ Stats ] ==================== */
// stats = new Stats();
// stats.domElement.style.position = 'absolute';
// stats.domElement.style.left = '0px';
// stats.domElement.style.top = '0px';
// document.body.appendChild(stats.domElement);
// document.body.appendChild( renderer.domElement );
/* ==================== [ Shapes ] ==================== */
var quantity = 40;
var shapes = [];
for (var i = 0; i < quantity; i++) {
if (Math.random() < 0.5) {
var geometry = new THREE.RingGeometry(4, 40, 3);
// geometry.position = 0;
// var geometry = new THREE.RingGeometry( 30, 30, 18);
// camera.position.z = 60;
// var geometry = new THREE.RingGeometry( 20, 150, 18);
// var geometry = new THREE.RingGeometry( 20, 150, 18);
// var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
}
else {
//var geometry = new THREE.RingGeometry( 4, 40, 3);
// var geometry = new THREE.RingGeometry( 30, 30, 18);
// var geometry = new THREE.RingGeometry( 1, 5, 6 );
// var material = new THREE.MeshBasicMaterial( { color: 0xffff00,
// side: THREE.DoubleSide } );
// var mesh = new THREE.Mesh( geometry, material );
// scene.add( mesh );
}
if (i % 7 === 0) {
var material = new THREE.MeshPhongMaterial({
color: "#ffffff"
});
} else if (i % 2 === 0) {
var material = new THREE.MeshPhongMaterial({
color: "#666666"
});
} else {
var material = new THREE.MeshPhongMaterial({
color: "#333333"
});
}
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -i * 3;
// mesh.rotation.z = i;
shapes.push(mesh);
scene.add(mesh);
}
// function refRate() {
// curTime = Date.now();
// delta = curTime - oldTime;
//
// if (delta > interval) {
// oldTime = curTime - (delta % interval);
// updateSize();
// }
//
// }
// Variables
var u_time = 0;
/* ==================== [ Render Function ] ==================== */
var render = function () {
requestAnimationFrame(render);
// var timer = Date.now() * 0.0010;
// camera.lookAt(scene.position);
u_time++;
for (var i = 0; i < quantity; i++) {
// Set rotation change of shapes
shapes[i].position.z += 0.2;
shapes[i].rotation.z += 0;
shapes[i].scale.x = 1 + Math.sin(i + u_time * 0.1) * 0.05;
shapes[i].scale.y = 1 + Math.sin(i + u_time * 0.1) * 0.05;
// shapes[i].scale.y = 120 + Math.tan(i + u_time * 5.0) * 0.5;
// shapes[i].scale.x = 120 + Math.tan(i + u_time * 5.0) * 0.5;
var change = 1.5 + Math.sin(u_time * 0.5) * 0.5;
// Set wireframe & width
if (Math.random() < change) {
shapes[i].material.wireframe = false;
shapes[i].material.wireframeLinewidth = Math.random() * 2;
// if (shapes[i] / 2 === 0) {
// turnOnMirror();
// }
}
else {
shapes[i].material.wireframe = false;
}
if (shapes[i].position.z > 10) {
shapes[i].position.z = -70;
shapes[i].rotation.z = i;
}
}
// Set Point light Intensity & Position
pointLight.intensity = Math.abs(Math.sin(u_time * 0.2) * 2);
pointLight2.intensity = Math.abs(Math.cos(u_time * 0.2) * 2);
pointLight.position.z = Math.abs(Math.sin(u_time * 0.02) * 30);
pointLight2.position.z = Math.abs(Math.cos(u_time * 0.02) * 30);
renderer.render(scene, camera);
composer.render();
var pCount = particleCount;
while (pCount--) {
var camz = getCamera().position.z;
var particle = particles.vertices[pCount];
particle.y = Math.random() * 500 - 250;
//particleSystem.vertices[i].z = camz + Math.random()*600 + 200 ;
particleSystem.geometry.vertices.needsUpdate = true;
}
particleSystem.rotation.y += -0.001;
particleSystem.rotation.z += 0.005;
var normLevel = 0.2;
beamGroup.rotation.x += BEAM_ROT_SPEED;
beamGroup.rotation.y += BEAM_ROT_SPEED;
beamMaterial.opacity = Math.min(normLevel * 0.4, 0.6);
camera.rotation.z += 0.003;
if (doShake) {
var maxshake = 60;
var shake = normLevel * maxshake ;
camera.position.x = Math.random()*shake - shake/2;
camera.position.y = Math.random()*shake - shake/2;
}
camera.rotation.z += 0.003;
// camera.rotation.y += 0.005;
// camera.rotation.x -= 0.003;
//camera.rotation.z += 0.03;
if (doStrobe){
strobeOn = !strobeOn;
if (strobeOn){
light2.intensity = 2;
}
else {
light2.intensity = 0.5;
}
}
else {
light2.intensity = 0.2;
}
// flash background on level threshold
if (normLevel > 0.5 ){
renderer.setClearColor ( 0xFFFFFF );
backMesh2.visible = true;
}
else{
renderer.setClearColor ( 0x000000 );
backMesh2.visible = false;
}
// show stripes for 6 frames on beat
backMesh2.visible = beatTime < 6;
for(var i = 0; i < BOX_COUNT; i++) {
boxes[i].update();
}
if (audioSrc.context.currentTime > 32) {
turnOnMirror();
}
// console.log(audioSrc.context.currentTime);
}
render();

Three.js getObjectByName delivers undefined

I started my first Three.js project. A solar system which you can see here.
I have a function addCelestrialObject() where I create the planets and I want this function to automatically create the orbit circles what it does for the planets but I want it also for moons.
So every Planet (mesh) becomes a name and I want to access this object to get its center position so I can add a circle to this position if I have a moon.
My problem is that the function scene.getObjectByName(parent,true); always delivers an undefined. You can see the console.log(scene) on my example when you inspect the site.
function addCelestrialObject(name, type, parent, surface, bump, specular,
positionX, positionY, positionZ, size, clouds, drawcircle
) {
var loader = new THREE.TextureLoader();
var group = new THREE.Group();
loader.load(surface, function (texture) {
var geometry = new THREE.SphereGeometry(size, 32, 32);
if (type == "sun") {
var material = new THREE.MeshBasicMaterial({ map: texture });
material.shading = true;
} else {
var material = new THREE.MeshPhongMaterial({ map: texture, overdraw: 0.5 });
material.shading = true;
if (bump) {
material.bumpMap = THREE.ImageUtils.loadTexture(bump);
material.bumpScale = 0.5;
}
if (specular) {
material.specularMap = THREE.ImageUtils.loadTexture(specular);
material.specular = new THREE.Color(0x222222);
}
}
var mesh = new THREE.Mesh(geometry, material);
mesh.name = name;
mesh.position.x = positionX;
mesh.position.y = positionY;
mesh.position.z = positionZ;
objectControls.add(mesh);
mesh.select = function () {
var position = { x: controls.target.x, y: controls.target.y, z: controls.target.z };
var target = { x: this.position.x, y: this.position.y, z: this.position.z };
var tween = new TWEEN.Tween(position).to(target, 500);
tween.easing(TWEEN.Easing.Exponential.InOut)
tween.onUpdate(function () {
controls.target.x = position.x;
controls.target.y = position.y;
controls.target.z = position.z;
controls.dollyIn(2);
});
tween.start();
controls.minDistance = size * 5;
}
onRenderFcts.push(function (delta, now) {
mesh.rotateY(1 / 32 * delta)
});
group.add(mesh);
});
if (clouds == true) {
var canvasResult = document.createElement('canvas')
canvasResult.width = 1024
canvasResult.height = 512
var contextResult = canvasResult.getContext('2d')
// load earthcloudmap
var imageMap = new Image();
imageMap.addEventListener("load", function () {
// create dataMap ImageData for earthcloudmap
var canvasMap = document.createElement('canvas')
canvasMap.width = imageMap.width
canvasMap.height = imageMap.height
var contextMap = canvasMap.getContext('2d')
contextMap.drawImage(imageMap, 0, 0)
var dataMap = contextMap.getImageData(0, 0, canvasMap.width, canvasMap.height)
// load earthcloudmaptrans
var imageTrans = new Image();
imageTrans.addEventListener("load", function () {
// create dataTrans ImageData for earthcloudmaptrans
var canvasTrans = document.createElement('canvas')
canvasTrans.width = imageTrans.width
canvasTrans.height = imageTrans.height
var contextTrans = canvasTrans.getContext('2d')
contextTrans.drawImage(imageTrans, 0, 0)
var dataTrans = contextTrans.getImageData(0, 0, canvasTrans.width, canvasTrans.height)
// merge dataMap + dataTrans into dataResult
var dataResult = contextMap.createImageData(canvasMap.width, canvasMap.height)
for (var y = 0, offset = 0; y < imageMap.height; y++) {
for (var x = 0; x < imageMap.width; x++, offset += 4) {
dataResult.data[offset + 0] = dataMap.data[offset + 0]
dataResult.data[offset + 1] = dataMap.data[offset + 1]
dataResult.data[offset + 2] = dataMap.data[offset + 2]
dataResult.data[offset + 3] = 255 - dataTrans.data[offset + 0]
}
}
// update texture with result
contextResult.putImageData(dataResult, 0, 0)
material.map.needsUpdate = true;
})
imageTrans.src = 'textures/earthcloudmaptrans.jpg';
}, false);
imageMap.src = 'textures/earthcloudmap.jpg';
var geometry = new THREE.SphereGeometry(size + 0.5, 32, 32)
var material = new THREE.MeshPhongMaterial({
map: new THREE.Texture(canvasResult),
side: THREE.DoubleSide,
transparent: true,
opacity: 1,
shading: true,
})
var cloudMesh = new THREE.Mesh(geometry, material);
cloudMesh.position.x = positionX;
cloudMesh.position.y = positionY;
cloudMesh.position.z = positionZ;
group.add(cloudMesh);
onRenderFcts.push(function (delta, now) {
cloudMesh.rotateY(1 / 16 * delta)
});
}
if (drawcircle == true) {
//circle
var radius = Math.abs(distance(0, positionX, 0, positionZ));
segments = 64;
materialLine = new THREE.LineBasicMaterial({ color: 0x00a8ff });
geometry = new THREE.CircleGeometry(radius, segments);
// Remove center vertex
geometry.vertices.shift();
circle = new THREE.Line(geometry, materialLine);
circle.rotation.x = 1.571;
if (parent) {
var object = scene.getObjectByName(parent, true);
//circle.position.x=object.position.x;
//circle.position.y=object.position.y;
//circle.position.z=object.position.z;
}
group.add(circle);
}
scene.add(group);
}

Three.js Rotate object on sphere radius

I would like to set object at the end of sphere radius based on object.position.set (x,y,z)
In typical mathematic formula for coordinates of the point on sphere we have:
var x = radius * Math.cos(phi) * Math.cos(theta);
var y = radius * Math.cos(phi) * Math.sin(theta);
var z = radius * Math.cos(phi);
I use
var x = radius * Math.cos(angleZ) * Math.cos(angleX);
var y = radius * Math.cos(angleZ) * Math.sin(angleX);
var z = radius * Math.cos(angleZ);
I know that this is wrong becasue thete and phi are not this angles
How can i connect this 3 angles angleX, angleY, angleZ to transformt it to phi and theta
In Three js i have :
cylinderX.rotation.x = degToRad(angleX);
cylinderX.rotation.y = degToRad(angleY);
cylinderX.rotation.z = degToRad(angleZ);
degToRad - function which change deg to radians
where
angleX is angle between y plane and z plane
angleY is angle between z plane and x plane
angleZ is angle between x plane and y plane
phi and theta are difrrent angles becasue theta is angle between radius and plane
I run animation and position of object ( x,y,z) and itts location on sphere plane is wrong
How can i resolved this problem ?
To be more specific , here below is my code and example:
http://newdesignlive.neomedia.info/index.html
I would like to set this green cube at the end of this red cuboid when car is rotating in all angles on all axis x,y,z
In arrays : x[...], y[...], z[...] you have values of angles how car (object) is rotating on all axis (X, Y, Z);
I do not know how to connect angleX, angleZ, angleY to "phi" and "theta" to set "green cube" on correct position x,y,z depend on radius = 100 for example;
In animate.js here is all code I add it here bellow to
var container, stats, camera, scene, renderer, object;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var angleX=0, angleY=0, angleZ=0, G=0;
var x; var y; var z;
var times = [];
x = ["0", "10", "20","30", "40", "50" ];
y = ["0", "20", "40","60", "70", "80" ];
z = ["0", "30", "60","90", "120", "150" ];
gX = ["1", "1.4", "0.7", "0.4", "1", "1.2", "0.5", "1.2", "1.4", "1.3", "1", "0.7" ];
gY = ["1", "2", "1", "2", "1", "2", "3", "1.2", "1.4", "1.3", "1", "2" ];
gZ = ["1", "2", "1", "2", "1", "2", "3", "1.2", "1.4", "1.3", "1", "2" ];
generateTimesForAngles();
generateTimesForG();
var currentTransform = 0;
var currentStep = 0;
var intervalTime = 20;
var intervalTimeG = 50
setInterval(transformAngleX,intervalTime);
setInterval(transformAngleY,intervalTime);
setInterval(transformAngleZ,intervalTime);
setInterval(transformGX,intervalTimeG);
setInterval(transformGY,intervalTimeG);
setInterval(transformGZ,intervalTimeG);
init();
animate();
function setVectorDirection (position, gValue)
{
var gValue = document.getElementById('g').value;
gValue = gValue*10;
var direction = document.getElementById("VectorDirection");
var position = direction.options[direction.selectedIndex].value;
var darkMaterial = new THREE.MeshBasicMaterial( { color: 0x222222 } );
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x222222, wireframe: true, transparent: true } ); var multiMaterial = [ darkMaterial, wireframeMaterial ];
var x;
var y;
x = 120 + gValue - gValue/2;
y = 110;
}
function init(objectfilename, materialfilename) {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xDEDEDE, 1 );
container = document.createElement('div');
document.body.appendChild(container);
container.appendChild( renderer.domElement )
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 200;
camera.position.z = 0;
camera.position.x = 400;
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
var gridHelper = new THREE.GridHelper( 500, 100 );
gridHelper.setColors(0xFFFFFF, 0xFFFFFF);
scene.add(gridHelper);
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
var initColor = new THREE.Color( 0xFFFFFF );
var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );
var groundMaterial = new THREE.MeshPhongMaterial
(
{
color: 0xEDEDED,
specular: 0xEDEDED,
map: initTexture }
);
var groundTexture = THREE.ImageUtils.loadTexture
(
"red.jpg",
undefined,
function()
{
groundMaterial.map = groundTexture
}
);
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set( 25, 25 );
groundTexture.anisotropy = 16;
var backgroundmesh = new THREE.Mesh( new THREE.PlaneGeometry( 20000, 20000 ), groundMaterial );
backgroundmesh.position.y = -200;
backgroundmesh.rotation.x = - Math.PI / 2;
backgroundmesh.receiveShadow = true;
scene.add( backgroundmesh );
setVectorDirection();
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 100, 60);
light.castShadow = true;
light.shadowCameraLeft = -60;
light.shadowCameraTop = -60;
light.shadowCameraRight = 60;
light.shadowCameraBottom = 60;
light.shadowCameraNear = 1;
light.shadowCameraFar = 10000;
light.shadowBias = -.0001
light.shadowMapWidth = light.shadowMapHeight = 1024;
light.shadowDarkness = .7;
scene.add(light);
mesh1 = new THREE.Mesh( geometry, material );
mesh1.position.set(100,100,100);
scene.add( mesh1 );
var geometry;
loader = new THREE.JSONLoader();
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('gtare.jpg'),
colorAmbient: [0.480000026226044, 0.480000026226044, 0.480000026226044],
colorDiffuse: [0.480000026226044, 0.480000026226044, 0.480000026226044],
colorSpecular: [0.8999999761581421, 0.8999999761581421, 0.8999999761581421]
});
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
grotX = new THREE.Mesh( new THREE.CylinderGeometry( 0.4, 8, 8, 40, 1 ),new THREE.MeshBasicMaterial( { color: 0x458B00 } ));
cylinderX = new THREE.Mesh(new THREE.BoxGeometry(10,10,10)/*THREE.CylinderGeometry(4, 4, 300, 50, 50, false)*/,new THREE.MeshBasicMaterial( { color: 0x458B00 } ));
cylinderY = new THREE.Mesh(new THREE.BoxGeometry(10,10,10/*4, 4, 300, 50, 50, false*/),new THREE.MeshBasicMaterial( { color: 0x01C5BB } ));
cylinderZ = new THREE.Mesh(new THREE.BoxGeometry(10,200,10/*4, 4, 300, 50, 50, false*/),new THREE.MeshBasicMaterial( { color: 0xFF0000 } ));
scene.add(cylinderX);
scene.add(cylinderY);
scene.add(cylinderZ);
loader.load('car.js', function (geometry, materials) {
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('gtare.jpg'),
colorAmbient: [0.480000026226044, 0.480000026226044, 0.480000026226044],
colorDiffuse: [0.480000026226044, 0.480000026226044, 0.480000026226044],
colorSpecular: [0.8999999761581421, 0.8999999761581421, 0.8999999761581421]
});
mesh = new THREE.Mesh( geometry, material );
mesh.receiveShadow = true;
scene.add(mesh);
render();
});
}
function degToRad(degrees) {
return degrees * Math.PI / 180.0;
}
function radToDeg(radians) {
return parseInt(radians * 180.0 / Math.PI);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function generateTimesForAngles() {
var baseTime360 = 10000;
for(i=0;i<z.length-1;i++) {
var timeMiddle = 10000;
times.push(timeMiddle);
}
}
function generateTimesForG() {
var baseTimeallG = 5000;
for(i=0;i<g.length-1;i++) {
var timeMiddleG = 240;
times.push(timeMiddleG);
}
}
function transformGX() {
var steps = times[currentTransform] / intervalTime;
var singleStepGX = (gX[currentTransform+1]-gX[currentTransform]) / steps;
if(currentStep<steps) {
currentStep++;
GX = +gX[currentTransform] + (+currentStep * +singleStepGX);
} else if(currentTransform<times.length){
currentStep = 0;
currentTransform++;
GX = gX[currentTransform];
} else {
}
}
function transformGY() {
var steps = times[currentTransform] / intervalTime;
var singleStepGY = (gY[currentTransform+1]-gY[currentTransform]) / steps;
if(currentStep<steps) {
currentStep++;
GY = +gY[currentTransform] + (+currentStep * +singleStepGY);
} else if(currentTransform<times.length){
currentStep = 0;
currentTransform++;
GY = gY[currentTransform];
} else {
}
}
function transformGZ() {
var steps = times[currentTransform] / intervalTime;
var singleStepGZ = (gZ[currentTransform+1]-gZ[currentTransform]) / steps;
if(currentStep<steps) {
currentStep++;
GZ = +gZ[currentTransform] + (+currentStep * +singleStepGZ); // Pamiętaj o plusach!!!
} else if(currentTransform<times.length){
currentStep = 0;
currentTransform++;
GZ = gZ[currentTransform];
} else {
}
}
function transformAngleX() {
var steps = times[currentTransform] / intervalTime;
var singleStepAngle = (x[currentTransform+1]-x[currentTransform]) / steps;
if(currentStep<steps) {
currentStep++;
angleX = +x[currentTransform] + (+currentStep * +singleStepAngle);
} else if(currentTransform<times.length){
currentStep = 0;
currentTransform++;
angleX = x[currentTransform];
} else {
}
}
function transformAngleY() {
var steps = times[currentTransform] / intervalTime;
var singleStepAngle = (y[currentTransform+1]-y[currentTransform]) / steps;
if(currentStep<steps) {
currentStep++;
angleY = +y[currentTransform] + (+currentStep * +singleStepAngle);
} else if(currentTransform<times.length){
currentStep = 0;
currentTransform++;
angleY = y[currentTransform];
} else {
}
}
function transformAngleZ() {
var steps = times[currentTransform] / intervalTime;
var singleStepAngle = (z[currentTransform+1]-z[currentTransform]) / steps;
if(currentStep<steps) {
currentStep++;
angleZ = +z[currentTransform] + (+currentStep * +singleStepAngle); // Pamiętaj o plusach!!!
} else if(currentTransform<times.length){
currentStep = 0;
currentTransform++;
angleZ = z[currentTransform];
} else {
}
}
var i = 0;
function animate() {
i++;
requestAnimationFrame( animate );
var x = 100 * Math.sin(degToRad(angleX))* Math.cos(degToRad(angleY));
var y = 100 * Math.sin(degToRad(angleX))* Math.sin(degToRad(angleY));
var z = 100 * Math.cos(degToRad(angleX));
z = -z;
cylinderX.position.set(x,y,z);
cylinderY.position.set(0, 0, 0);
cylinderX.rotation.x = degToRad(angleX);
cylinderX.rotation.y = degToRad(angleY);
cylinderX.rotation.z = degToRad(angleZ);
cylinderZ.rotation.x = degToRad(angleX);
cylinderZ.rotation.y = degToRad(angleY);
cylinderZ.rotation.z = degToRad(angleZ-90);
mesh.rotation.x = degToRad(angleX);
mesh.rotation.y = degToRad(angleY);
mesh.rotation.z = degToRad(angleZ);
render();
}
//renderowanie obiektów
function render() {
renderer.render( scene, camera );
}

I think the easiest way is to add the object to a parent Object3D, and move the object the appropriate distance (radius of the sphere you want to match the surface of) on one of the x, y or z axis. Add the parent to the scene and position it on the centre of the sphere you want to match (the child object should now fall on the sphere where that intersects the axis you used). With that set up like this, you can rotate the parent to position your object on the sphere.

Categories