Mixing
How to make a wave pattern circularly around a cylinder?
1
Hello i'm trying to make a wave pattern on the surface of a cylinder. The waves should rotate with the rotation of the surface. and in a way the sine period is moving in circles, and the amplitudes are long mounds on the surface. Here's some pictures to better explain what i mean.
This is what i'm trying to get the top down view of the cylinder to look similar to:
this is the top view of my cylinder. I'd like the wave to change direction with the rotation of the circle, so it looks the same from all directions.
I feel like i'm very close, i'm just not sure what quaternion or angle to multiply against the vector:
var geometry = this.threeDHandler.threeD_meshes[0].geometry;
var vec3 = new THREE.Vector3(); // temp vector
for (let i = 0; i < geometry.vertices.length; i++) {
vec3.copy(geometry.vertices[i]); // copy current vertex to the temp vector
vec3.setX(0);
vec3.normalize(); // normalize
//part i'm confsude about
const quaternion = new THREE.Quaternion();
const xPos = geometry.vertices[i].x;
//trying to twist the sine around the circle
const twistAmount = 100;
const upVec = new THREE.Vector3(0, 0, 1);
quaternion.setFromAxisAngle(
upVec,
(Math.PI / 180) * (xPos / twistAmount)
);
vec3.multiplyScalar(Math.sin((geometry.vertices[i].x* Math.PI) * period) * amplitude) // multiply with sin function
geometry.vertices[i].add(vec3); // add the temp vector to the current vertex
geometry.vertices[i].applyQuaternion(quaternion);
}
geometry.verticesNeedUpdate = true;
geometry.computeVertexNormals();
three.js trigonometry sine
edited Jan 2 at 9:23
Rabbid76
41.4k123353
asked Jan 2 at 9:09
Tintinabulator ZeaTintinabulator Zea
6452821
add a comment |
1
Hello i'm trying to make a wave pattern on the surface of a cylinder. The waves should rotate with the rotation of the surface. and in a way the sine period is moving in circles, and the amplitudes are long mounds on the surface. Here's some pictures to better explain what i mean.
This is what i'm trying to get the top down view of the cylinder to look similar to:
this is the top view of my cylinder. I'd like the wave to change direction with the rotation of the circle, so it looks the same from all directions.
I feel like i'm very close, i'm just not sure what quaternion or angle to multiply against the vector:
var geometry = this.threeDHandler.threeD_meshes[0].geometry;
var vec3 = new THREE.Vector3(); // temp vector
for (let i = 0; i < geometry.vertices.length; i++) {
vec3.copy(geometry.vertices[i]); // copy current vertex to the temp vector
vec3.setX(0);
vec3.normalize(); // normalize
//part i'm confsude about
const quaternion = new THREE.Quaternion();
const xPos = geometry.vertices[i].x;
//trying to twist the sine around the circle
const twistAmount = 100;
const upVec = new THREE.Vector3(0, 0, 1);
quaternion.setFromAxisAngle(
upVec,
(Math.PI / 180) * (xPos / twistAmount)
);
vec3.multiplyScalar(Math.sin((geometry.vertices[i].x* Math.PI) * period) * amplitude) // multiply with sin function
geometry.vertices[i].add(vec3); // add the temp vector to the current vertex
geometry.vertices[i].applyQuaternion(quaternion);
}
geometry.verticesNeedUpdate = true;
geometry.computeVertexNormals();
three.js trigonometry sine
edited Jan 2 at 9:23
Rabbid76
41.4k123353
asked Jan 2 at 9:09
Tintinabulator ZeaTintinabulator Zea
6452821
add a comment |
1
1
1
0
Hello i'm trying to make a wave pattern on the surface of a cylinder. The waves should rotate with the rotation of the surface. and in a way the sine period is moving in circles, and the amplitudes are long mounds on the surface. Here's some pictures to better explain what i mean.
This is what i'm trying to get the top down view of the cylinder to look similar to:
this is the top view of my cylinder. I'd like the wave to change direction with the rotation of the circle, so it looks the same from all directions.
I feel like i'm very close, i'm just not sure what quaternion or angle to multiply against the vector:
var geometry = this.threeDHandler.threeD_meshes[0].geometry;
var vec3 = new THREE.Vector3(); // temp vector
for (let i = 0; i < geometry.vertices.length; i++) {
vec3.copy(geometry.vertices[i]); // copy current vertex to the temp vector
vec3.setX(0);
vec3.normalize(); // normalize
//part i'm confsude about
const quaternion = new THREE.Quaternion();
const xPos = geometry.vertices[i].x;
//trying to twist the sine around the circle
const twistAmount = 100;
const upVec = new THREE.Vector3(0, 0, 1);
quaternion.setFromAxisAngle(
upVec,
(Math.PI / 180) * (xPos / twistAmount)
);
vec3.multiplyScalar(Math.sin((geometry.vertices[i].x* Math.PI) * period) * amplitude) // multiply with sin function
geometry.vertices[i].add(vec3); // add the temp vector to the current vertex
geometry.vertices[i].applyQuaternion(quaternion);
}
geometry.verticesNeedUpdate = true;
geometry.computeVertexNormals();
three.js trigonometry sine
edited Jan 2 at 9:23
Rabbid76
41.4k123353
asked Jan 2 at 9:09
Tintinabulator ZeaTintinabulator Zea
6452821
Hello i'm trying to make a wave pattern on the surface of a cylinder. The waves should rotate with the rotation of the surface. and in a way the sine period is moving in circles, and the amplitudes are long mounds on the surface. Here's some pictures to better explain what i mean.
This is what i'm trying to get the top down view of the cylinder to look similar to:
this is the top view of my cylinder. I'd like the wave to change direction with the rotation of the circle, so it looks the same from all directions.
I feel like i'm very close, i'm just not sure what quaternion or angle to multiply against the vector:
var geometry = this.threeDHandler.threeD_meshes[0].geometry;
var vec3 = new THREE.Vector3(); // temp vector
for (let i = 0; i < geometry.vertices.length; i++) {
vec3.copy(geometry.vertices[i]); // copy current vertex to the temp vector
vec3.setX(0);
vec3.normalize(); // normalize
//part i'm confsude about
const quaternion = new THREE.Quaternion();
const xPos = geometry.vertices[i].x;
//trying to twist the sine around the circle
const twistAmount = 100;
const upVec = new THREE.Vector3(0, 0, 1);
quaternion.setFromAxisAngle(
upVec,
(Math.PI / 180) * (xPos / twistAmount)
);
vec3.multiplyScalar(Math.sin((geometry.vertices[i].x* Math.PI) * period) * amplitude) // multiply with sin function
geometry.vertices[i].add(vec3); // add the temp vector to the current vertex
geometry.vertices[i].applyQuaternion(quaternion);
}
geometry.verticesNeedUpdate = true;
geometry.computeVertexNormals();
three.js trigonometry sine
three.js trigonometry sine
edited Jan 2 at 9:23
Rabbid76
41.4k123353
asked Jan 2 at 9:09
Tintinabulator ZeaTintinabulator Zea
6452821
edited Jan 2 at 9:23
Rabbid76
41.4k123353
asked Jan 2 at 9:09
Tintinabulator ZeaTintinabulator Zea
6452821
edited Jan 2 at 9:23
Rabbid76
41.4k123353
edited Jan 2 at 9:23
Rabbid76
41.4k123353
edited Jan 2 at 9:23
Rabbid76
41.4k123353
41.4k123353
asked Jan 2 at 9:09
Tintinabulator ZeaTintinabulator Zea
6452821
asked Jan 2 at 9:09
Tintinabulator ZeaTintinabulator Zea
6452821
asked Jan 2 at 9:09
Tintinabulator ZeaTintinabulator Zea
6452821
6452821
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
You can use absolute value of the sin function of the angle, that a vertex belongs to.
In this case you can use THREE.Spherical() object that allows to get spherical coordinates of a vector:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var cylinderGeom = new THREE.CylinderGeometry(1, 1, 4, 128, 40, true);
var vec3 = new THREE.Vector3(); // temp vector
var vec3_2 = new THREE.Vector3(); // temp vector 2
var spherical = new THREE.Spherical();
cylinderGeom.vertices.forEach(v => {
vec3.copy(v); // copy current vertex to the temp vector
vec3.setY(0); // leave x and z (thus the vector is parallel to XZ plane)
vec3.normalize(); // normalize
vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25) // multiply with sin function
// radial wave
vec3_2.copy(v).setY(0).normalize();
spherical.setFromVector3(vec3_2);
vec3_2.setLength(Math.abs(Math.sin((spherical.theta * 4) + v.y * 2) * 0.25));
v.add(vec3).add(vec3_2); // add the temp vectors to the current vertex
})
cylinderGeom.computeVertexNormals();
var cylinder = new THREE.Mesh(cylinderGeom, new THREE.MeshNormalMaterial({
side: THREE.DoubleSide,
wireframe: false
}));
scene.add(cylinder);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
})body {
overflow: hidden;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>answered Jan 2 at 10:17
prisoner849prisoner849
7,75821328
when i apply this to my object i can't get the same effect as the vase in codepen. My object uses z height and x and y for widths. this is what it looks like when i use Z for the radiall wave section imgur.com/a/ayQouUX and this is what it looks like when i use Y imgur.com/a/HEBrWr3 do i have to adjust the spherical to match the Z height of cylinder?
– Tintinabulator Zea
Jan 2 at 21:20
@TintinabulatorZea you can rotate your geometry to align it along the Y-axis, apply all the operations, provided in the answer, then rotate the geometry back to the initial state.
– prisoner849
Jan 2 at 21:38
ok cool thank you! also, what do you think of this question stackoverflow.com/questions/54029401/… ? do you think this is possible? @prisoner849
– Tintinabulator Zea
Jan 3 at 20:32
@TintinabulatorZea You can find me on the forum: discourse.threejs.org. The same nickname :) Just ping me there somehow with a private message.
– prisoner849
Jan 3 at 23:36
@TintinabulatorZea I hope I've found a right person there with that skype nickname :D
– prisoner849
Jan 4 at 0:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003693%2fhow-to-make-a-wave-pattern-circularly-around-a-cylinder%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You can use absolute value of the sin function of the angle, that a vertex belongs to.
In this case you can use THREE.Spherical() object that allows to get spherical coordinates of a vector:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var cylinderGeom = new THREE.CylinderGeometry(1, 1, 4, 128, 40, true);
var vec3 = new THREE.Vector3(); // temp vector
var vec3_2 = new THREE.Vector3(); // temp vector 2
var spherical = new THREE.Spherical();
cylinderGeom.vertices.forEach(v => {
vec3.copy(v); // copy current vertex to the temp vector
vec3.setY(0); // leave x and z (thus the vector is parallel to XZ plane)
vec3.normalize(); // normalize
vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25) // multiply with sin function
// radial wave
vec3_2.copy(v).setY(0).normalize();
spherical.setFromVector3(vec3_2);
vec3_2.setLength(Math.abs(Math.sin((spherical.theta * 4) + v.y * 2) * 0.25));
v.add(vec3).add(vec3_2); // add the temp vectors to the current vertex
})
cylinderGeom.computeVertexNormals();
var cylinder = new THREE.Mesh(cylinderGeom, new THREE.MeshNormalMaterial({
side: THREE.DoubleSide,
wireframe: false
}));
scene.add(cylinder);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
})body {
overflow: hidden;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>answered Jan 2 at 10:17
prisoner849prisoner849
7,75821328
when i apply this to my object i can't get the same effect as the vase in codepen. My object uses z height and x and y for widths. this is what it looks like when i use Z for the radiall wave section imgur.com/a/ayQouUX and this is what it looks like when i use Y imgur.com/a/HEBrWr3 do i have to adjust the spherical to match the Z height of cylinder?
– Tintinabulator Zea
Jan 2 at 21:20
@TintinabulatorZea you can rotate your geometry to align it along the Y-axis, apply all the operations, provided in the answer, then rotate the geometry back to the initial state.
– prisoner849
Jan 2 at 21:38
ok cool thank you! also, what do you think of this question stackoverflow.com/questions/54029401/… ? do you think this is possible? @prisoner849
– Tintinabulator Zea
Jan 3 at 20:32
@TintinabulatorZea You can find me on the forum: discourse.threejs.org. The same nickname :) Just ping me there somehow with a private message.
– prisoner849
Jan 3 at 23:36
@TintinabulatorZea I hope I've found a right person there with that skype nickname :D
– prisoner849
Jan 4 at 0:17
add a comment |
2
You can use absolute value of the sin function of the angle, that a vertex belongs to.
In this case you can use THREE.Spherical() object that allows to get spherical coordinates of a vector:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var cylinderGeom = new THREE.CylinderGeometry(1, 1, 4, 128, 40, true);
var vec3 = new THREE.Vector3(); // temp vector
var vec3_2 = new THREE.Vector3(); // temp vector 2
var spherical = new THREE.Spherical();
cylinderGeom.vertices.forEach(v => {
vec3.copy(v); // copy current vertex to the temp vector
vec3.setY(0); // leave x and z (thus the vector is parallel to XZ plane)
vec3.normalize(); // normalize
vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25) // multiply with sin function
// radial wave
vec3_2.copy(v).setY(0).normalize();
spherical.setFromVector3(vec3_2);
vec3_2.setLength(Math.abs(Math.sin((spherical.theta * 4) + v.y * 2) * 0.25));
v.add(vec3).add(vec3_2); // add the temp vectors to the current vertex
})
cylinderGeom.computeVertexNormals();
var cylinder = new THREE.Mesh(cylinderGeom, new THREE.MeshNormalMaterial({
side: THREE.DoubleSide,
wireframe: false
}));
scene.add(cylinder);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
})body {
overflow: hidden;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>answered Jan 2 at 10:17
prisoner849prisoner849
7,75821328
when i apply this to my object i can't get the same effect as the vase in codepen. My object uses z height and x and y for widths. this is what it looks like when i use Z for the radiall wave section imgur.com/a/ayQouUX and this is what it looks like when i use Y imgur.com/a/HEBrWr3 do i have to adjust the spherical to match the Z height of cylinder?
– Tintinabulator Zea
Jan 2 at 21:20
@TintinabulatorZea you can rotate your geometry to align it along the Y-axis, apply all the operations, provided in the answer, then rotate the geometry back to the initial state.
– prisoner849
Jan 2 at 21:38
ok cool thank you! also, what do you think of this question stackoverflow.com/questions/54029401/… ? do you think this is possible? @prisoner849
– Tintinabulator Zea
Jan 3 at 20:32
@TintinabulatorZea You can find me on the forum: discourse.threejs.org. The same nickname :) Just ping me there somehow with a private message.
– prisoner849
Jan 3 at 23:36
@TintinabulatorZea I hope I've found a right person there with that skype nickname :D
– prisoner849
Jan 4 at 0:17
add a comment |
2
2
2
You can use absolute value of the sin function of the angle, that a vertex belongs to.
In this case you can use THREE.Spherical() object that allows to get spherical coordinates of a vector:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var cylinderGeom = new THREE.CylinderGeometry(1, 1, 4, 128, 40, true);
var vec3 = new THREE.Vector3(); // temp vector
var vec3_2 = new THREE.Vector3(); // temp vector 2
var spherical = new THREE.Spherical();
cylinderGeom.vertices.forEach(v => {
vec3.copy(v); // copy current vertex to the temp vector
vec3.setY(0); // leave x and z (thus the vector is parallel to XZ plane)
vec3.normalize(); // normalize
vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25) // multiply with sin function
// radial wave
vec3_2.copy(v).setY(0).normalize();
spherical.setFromVector3(vec3_2);
vec3_2.setLength(Math.abs(Math.sin((spherical.theta * 4) + v.y * 2) * 0.25));
v.add(vec3).add(vec3_2); // add the temp vectors to the current vertex
})
cylinderGeom.computeVertexNormals();
var cylinder = new THREE.Mesh(cylinderGeom, new THREE.MeshNormalMaterial({
side: THREE.DoubleSide,
wireframe: false
}));
scene.add(cylinder);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
})body {
overflow: hidden;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>answered Jan 2 at 10:17
prisoner849prisoner849
7,75821328
You can use absolute value of the sin function of the angle, that a vertex belongs to.
In this case you can use THREE.Spherical() object that allows to get spherical coordinates of a vector:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var cylinderGeom = new THREE.CylinderGeometry(1, 1, 4, 128, 40, true);
var vec3 = new THREE.Vector3(); // temp vector
var vec3_2 = new THREE.Vector3(); // temp vector 2
var spherical = new THREE.Spherical();
cylinderGeom.vertices.forEach(v => {
vec3.copy(v); // copy current vertex to the temp vector
vec3.setY(0); // leave x and z (thus the vector is parallel to XZ plane)
vec3.normalize(); // normalize
vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25) // multiply with sin function
// radial wave
vec3_2.copy(v).setY(0).normalize();
spherical.setFromVector3(vec3_2);
vec3_2.setLength(Math.abs(Math.sin((spherical.theta * 4) + v.y * 2) * 0.25));
v.add(vec3).add(vec3_2); // add the temp vectors to the current vertex
})
cylinderGeom.computeVertexNormals();
var cylinder = new THREE.Mesh(cylinderGeom, new THREE.MeshNormalMaterial({
side: THREE.DoubleSide,
wireframe: false
}));
scene.add(cylinder);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
})body {
overflow: hidden;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var cylinderGeom = new THREE.CylinderGeometry(1, 1, 4, 128, 40, true);
var vec3 = new THREE.Vector3(); // temp vector
var vec3_2 = new THREE.Vector3(); // temp vector 2
var spherical = new THREE.Spherical();
cylinderGeom.vertices.forEach(v => {
vec3.copy(v); // copy current vertex to the temp vector
vec3.setY(0); // leave x and z (thus the vector is parallel to XZ plane)
vec3.normalize(); // normalize
vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25) // multiply with sin function
// radial wave
vec3_2.copy(v).setY(0).normalize();
spherical.setFromVector3(vec3_2);
vec3_2.setLength(Math.abs(Math.sin((spherical.theta * 4) + v.y * 2) * 0.25));
v.add(vec3).add(vec3_2); // add the temp vectors to the current vertex
})
cylinderGeom.computeVertexNormals();
var cylinder = new THREE.Mesh(cylinderGeom, new THREE.MeshNormalMaterial({
side: THREE.DoubleSide,
wireframe: false
}));
scene.add(cylinder);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
})body {
overflow: hidden;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var cylinderGeom = new THREE.CylinderGeometry(1, 1, 4, 128, 40, true);
var vec3 = new THREE.Vector3(); // temp vector
var vec3_2 = new THREE.Vector3(); // temp vector 2
var spherical = new THREE.Spherical();
cylinderGeom.vertices.forEach(v => {
vec3.copy(v); // copy current vertex to the temp vector
vec3.setY(0); // leave x and z (thus the vector is parallel to XZ plane)
vec3.normalize(); // normalize
vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25) // multiply with sin function
// radial wave
vec3_2.copy(v).setY(0).normalize();
spherical.setFromVector3(vec3_2);
vec3_2.setLength(Math.abs(Math.sin((spherical.theta * 4) + v.y * 2) * 0.25));
v.add(vec3).add(vec3_2); // add the temp vectors to the current vertex
})
cylinderGeom.computeVertexNormals();
var cylinder = new THREE.Mesh(cylinderGeom, new THREE.MeshNormalMaterial({
side: THREE.DoubleSide,
wireframe: false
}));
scene.add(cylinder);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
})body {
overflow: hidden;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>answered Jan 2 at 10:17
prisoner849prisoner849
7,75821328
answered Jan 2 at 10:17
prisoner849prisoner849
7,75821328
answered Jan 2 at 10:17
prisoner849prisoner849
7,75821328
answered Jan 2 at 10:17
prisoner849prisoner849
7,75821328
7,75821328
when i apply this to my object i can't get the same effect as the vase in codepen. My object uses z height and x and y for widths. this is what it looks like when i use Z for the radiall wave section imgur.com/a/ayQouUX and this is what it looks like when i use Y imgur.com/a/HEBrWr3 do i have to adjust the spherical to match the Z height of cylinder?
– Tintinabulator Zea
Jan 2 at 21:20
@TintinabulatorZea you can rotate your geometry to align it along the Y-axis, apply all the operations, provided in the answer, then rotate the geometry back to the initial state.
– prisoner849
Jan 2 at 21:38
ok cool thank you! also, what do you think of this question stackoverflow.com/questions/54029401/… ? do you think this is possible? @prisoner849
– Tintinabulator Zea
Jan 3 at 20:32
@TintinabulatorZea You can find me on the forum: discourse.threejs.org. The same nickname :) Just ping me there somehow with a private message.
– prisoner849
Jan 3 at 23:36
@TintinabulatorZea I hope I've found a right person there with that skype nickname :D
– prisoner849
Jan 4 at 0:17
add a comment |
when i apply this to my object i can't get the same effect as the vase in codepen. My object uses z height and x and y for widths. this is what it looks like when i use Z for the radiall wave section imgur.com/a/ayQouUX and this is what it looks like when i use Y imgur.com/a/HEBrWr3 do i have to adjust the spherical to match the Z height of cylinder?
– Tintinabulator Zea
Jan 2 at 21:20
@TintinabulatorZea you can rotate your geometry to align it along the Y-axis, apply all the operations, provided in the answer, then rotate the geometry back to the initial state.
– prisoner849
Jan 2 at 21:38
ok cool thank you! also, what do you think of this question stackoverflow.com/questions/54029401/… ? do you think this is possible? @prisoner849
– Tintinabulator Zea
Jan 3 at 20:32
@TintinabulatorZea You can find me on the forum: discourse.threejs.org. The same nickname :) Just ping me there somehow with a private message.
– prisoner849
Jan 3 at 23:36
@TintinabulatorZea I hope I've found a right person there with that skype nickname :D
– prisoner849
Jan 4 at 0:17
when i apply this to my object i can't get the same effect as the vase in codepen. My object uses z height and x and y for widths. this is what it looks like when i use Z for the radiall wave section imgur.com/a/ayQouUX and this is what it looks like when i use Y imgur.com/a/HEBrWr3 do i have to adjust the spherical to match the Z height of cylinder?
– Tintinabulator Zea
Jan 2 at 21:20
when i apply this to my object i can't get the same effect as the vase in codepen. My object uses z height and x and y for widths. this is what it looks like when i use Z for the radiall wave section imgur.com/a/ayQouUX and this is what it looks like when i use Y imgur.com/a/HEBrWr3 do i have to adjust the spherical to match the Z height of cylinder?
– Tintinabulator Zea
Jan 2 at 21:20
@TintinabulatorZea you can rotate your geometry to align it along the Y-axis, apply all the operations, provided in the answer, then rotate the geometry back to the initial state.
– prisoner849
Jan 2 at 21:38
@TintinabulatorZea you can rotate your geometry to align it along the Y-axis, apply all the operations, provided in the answer, then rotate the geometry back to the initial state.
– prisoner849
Jan 2 at 21:38
ok cool thank you! also, what do you think of this question stackoverflow.com/questions/54029401/… ? do you think this is possible? @prisoner849
– Tintinabulator Zea
Jan 3 at 20:32
ok cool thank you! also, what do you think of this question stackoverflow.com/questions/54029401/… ? do you think this is possible? @prisoner849
– Tintinabulator Zea
Jan 3 at 20:32
@TintinabulatorZea You can find me on the forum: discourse.threejs.org. The same nickname :) Just ping me there somehow with a private message.
– prisoner849
Jan 3 at 23:36
@TintinabulatorZea You can find me on the forum: discourse.threejs.org. The same nickname :) Just ping me there somehow with a private message.
– prisoner849
Jan 3 at 23:36
@TintinabulatorZea I hope I've found a right person there with that skype nickname :D
– prisoner849
Jan 4 at 0:17
@TintinabulatorZea I hope I've found a right person there with that skype nickname :D
– prisoner849
Jan 4 at 0:17
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003693%2fhow-to-make-a-wave-pattern-circularly-around-a-cylinder%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
