three.js - Modify the curve of a spline - javascript

So I have a scene with a camera following a spline.
This spline is created directly with three.js thanks to the CatmullRomCurve3() method.
As you can see on the snippet, the spline automatically creates a bumb before and after going down.
I would like to get rid of it : I want my spline to go down and flat directly (I want to keep the curve though).
I played with all the types of curve allowed (centripetal, chordal and catmullrom) but the bumbs are still there.
Does anyone know how can I manage to do it ?
Thanks a lot
var renderer, scene, camera, spline;
renderer = new THREE.WebGLRenderer();
scene = new THREE.Scene();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, .1, 2000 );
camera.position.set(0, 0, 40);
camera.lookAt(0,0, 0);
spline = new THREE.CatmullRomCurve3([
new THREE.Vector3( -70, 9 ),
new THREE.Vector3( -12, 9 ),
new THREE.Vector3( -8, 9 ),
new THREE.Vector3( 8, -9 ),
new THREE.Vector3( 12, -9 ),
new THREE.Vector3( 70, -9 ),
]);
var points = spline.getPoints(500);
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xffffff } );
// Create the final object to add to the scene
var splineObject = new THREE.Line( geometry, material );
scene.add(splineObject);
renderer.render(scene, camera);
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

An instance of THREE.CatmullRomCurve3 is not the correct curve type if you are looking for a linear interpolation between points. Try it with THREE.Path instead and by connecting your points via .lineTo().
var renderer, scene, camera, spline;
renderer = new THREE.WebGLRenderer();
scene = new THREE.Scene();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set(0, 0, 40);
var path = new THREE.Path();
path.moveTo( -70, 9 );
path.lineTo( -8, 9 );
path.lineTo( 8, - 9 );
path.lineTo( 70, -9 );
var points = path.getPoints(500);
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xffffff } );
// Create the final object to add to the scene
var splineObject = new THREE.Line( geometry, material );
scene.add(splineObject);
renderer.render(scene, camera);
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

Related

Why when I change position about the axis(x, y), my figure change shape like in picture below?

When I change position about the axis(x, y), my figure change shape like in picture below. How can I fix it? I'm using Three.js.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set(0,0,20);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
document.getElementById('gameWindow').appendChild( renderer.domElement );
const canvas = renderer.domElement;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( new THREE.SphereGeometry( 2, 20, 20 ), material );
const cube1 = new THREE.Mesh( new THREE.SphereGeometry( 2, 20, 20 ), material );
scene.add(cube, cube1);
cube.position.x=20;
renderer.render(scene, camera);
If you want to maintain the shape of your figure when you change the position, you'll need to switch to an orthographic projection.
To do so in three.js you'll need to replace your PerspectiveCamera with an OrthographicCamera.
Here's a link to the docs that'll help you.

three.js - Camera on spline doesn't have a uniform speed

I used this cool codepen to have my camera follow a spline :
https://codepen.io/wiledal/pen/WvNvEq
This works great but I want to have a uniform speed during my camera movement.
I played with all the parameters of the CatmullRomCurve3() function but to no avail.
In the following example you can see that it slows down at once when it reaches the curves.
Should I try to have the same intensity of points everywhere all along my spline ? If so how can I do that ?
Thank you very much.
var renderer, scene, camera, spline, camPos, camPosIndex;
function init(){
renderer = new THREE.WebGLRenderer();
scene = new THREE.Scene();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const W = window.innerWidth;
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, .1, 2000 );
spline = new THREE.CatmullRomCurve3([
new THREE.Vector3( -70, 9 ),
new THREE.Vector3( -20, 9 ),
new THREE.Vector3( -13, 9 ),
new THREE.Vector3( 13, -9 ),
new THREE.Vector3( 20, -9 ),
new THREE.Vector3( 70, -9 ),
]);
var points = spline.getPoints(500);
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xffffff } );
// Create the final object to add to the scene
var splineObject = new THREE.Line( geometry, material );
scene.add(splineObject);
camPosIndex = 0;
}
let speed = 1000;
function update() {
renderer.render(scene, camera);
requestAnimationFrame(update);
camPosIndex++;
if (camPosIndex > speed) {
camPosIndex = 0;
}
var camPos = spline.getPoint(camPosIndex / speed);
var camRot = spline.getTangent(camPosIndex / speed);
camera.position.x = camPos.x;
camera.position.y = camPos.y;
camera.position.z = camPos.z + 40; // so I can watch my spline
camera.rotation.x = camRot.x;
camera.rotation.y = camRot.y;
camera.rotation.z = camRot.z;
camera.lookAt(spline.getPoint((camPosIndex+1) / speed));
}
init();
update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

Grainy textures in a simple cube scene

I'm just starting to learn three.js and have been trying to set up a simple textured cube box in an isometric view. When I add edge lines to my cube it turns out to be quite grainy on a few of the edges.
I've tried moving the camera and aspect ratio a bit but to no avail.
var aspect = 100/100
var scene = new THREE.Scene();
var d = 100;
camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 500 );
camera.position.set( 80, 80, 80 ); // all components equal
camera.lookAt( scene.position ); // or the origin
var renderer = new THREE.WebGLRenderer( {alpha: true });
renderer.setSize( 100, 80 );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 65, 65, 65 );
var edges = new THREE.EdgesGeometry( geometry )
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( {color: 0x000000} ) );
var material = new THREE.MeshBasicMaterial( { color: 0xf0f0f5 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
scene.add( line );
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
The above gives me a nice grey cube with black edges but the edges appear grainy in my browser.
Picture below:
This is a Z-fighting issue, which can be solved by a polgon offset .polygonOffset.
The issue is caused because the lines and the surface have to same coordinates and depth.
Set the .polygonOffset, .polygonOffsetFactor and .polygonOffsetUnits property of that THREE.Material, which is set to the solid geometry.
This causes that the surfaces are slightly pushed to the back and the lines cover the surfaces:
e.g.
var material = new THREE.MeshBasicMaterial({
color: 0xf0f0f5,
polygonOffset: true,
polygonOffsetFactor: 1.0,
polygonOffsetUnits: -4.0
} );
var aspect = 100/100
var scene = new THREE.Scene();
var d = 100;
camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 500 );
camera.position.set( 80, 80, 80 ); // all components equal
camera.lookAt( scene.position ); // or the origin
var renderer = new THREE.WebGLRenderer( {alpha: true });
renderer.setSize( 100, 80 );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 65, 65, 65 );
var edges = new THREE.EdgesGeometry( geometry )
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( {color: 0x000000} ) );
var material = new THREE.MeshBasicMaterial({
color: 0xf0f0f5,
polygonOffset: true,
polygonOffsetFactor: 1.0,
polygonOffsetUnits: -4.0
} );
var cube = new THREE.Mesh( geometry, material );
scene.add( line );
scene.add( cube );
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>

How to change thickness of three.js cyclinder

If I have a basic hollow cyclinder made using three.js like in the JSFiddle how can I change the thickness of the walls?
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 95, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.CylinderGeometry( 2, 2, 5, 360, 1, true );
var material = new THREE.MeshNormalMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.y = 5;
camera.position.z = 5;
camera.lookAt(0,0,0);
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
JSFiddle example
No, you have to subtract another cylinder from a cylinder. The one you subtract from it is the inner diameter of the cylinder.
So I changed your code to this:
var outerGeometry = new THREE.CylinderGeometry(2, 2, 5, 360, 1);
var innerGeometry = new THREE.CylinderGeometry(1.5, 1.5, 5, 360, 1);
var material = new THREE.MeshNormalMaterial({
color: 0x00ff00,
side: THREE.DoubleSide
});
var outerCylinder = new ThreeBSP(outerGeometry);
var innerCylinder = new ThreeBSP(innerGeometry);
var hollowedCylinder = innerCylinder.union(outerCylinder);
scene.add(hollowedCylinder.toMesh(material));
Here is the fiddle:
http://jsfiddle.net/gerdonabbink/tephoLr1/133/
As you can see the inner cylinder is 1.5, change this to 1 for example to make the thickness 1.

Rotating a 3d vector in THREE.js on two axes

Sorry for posting possible duplicate.
I have two 3d vectors:
center ( 0, 0, 0 )
orb ( 0, 0, 100 )
I want to rotate the orb-vector around the center-vector on both X and the Y axes.
What I'm trying to achieve is the make and object always be in view of the camera in the direction it's facing.
I've tried this but with no luck.
var vector = new THREE.Vector3( 0, 0, 100 );
vector.applyAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI * 0.5 );
vector.applyAxisAngle( new THREE.Vector3( 1, 0, 0 ), Math.PI * 0.5 );
orbBall.position.copy(vector);
"What I'm trying to achieve is the make and object always be in view of the camera in the direction it's facing."
If you are simply trying to ensure that orbBall always faces the camera, and both orbBall and the camera are part of the THREE scene then you can just use lookAt like so:
orbBall.lookAt(camera.position);
if you need to align a particular side of orbBall you can use a null dummy Object3D to do it, by adding the dummy node to the scene and orbBall to the dummy, in something like this:
dummy = new THREE.Object3D();
scene.add(camera); // "camera" is defined however
scene.add(dummy);
dummy.add(orbBall); // "orbBall" is created as usual
// ... not to align dummy+orbBall
dummy.lookAt(camera.position);
// ...and you can just rotate orbBall around "inside" dummy, just once,
/// to face however you like
After digging around this issue I realise that it's quite advanced mathematics.
Check out this lecture about quaternions if you're interested:
https://www.youtube.com/watch?v=mHVwd8gYLnI
So I used #bjorke suggestins and used a dummy object, and it works well.
var container, scene, camera, renderer, controls, stats;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(100, 100, 400);
camera.lookAt(scene.position);
scene.add(camera);
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
var light = new THREE.DirectionalLight(0xffffff); //new THREE.PointLight(0xffffff);
light.position.set( 30, 80, -15 );
scene.add(light);
var boxGeo = new THREE.BoxGeometry( 10, 10, 10);
var axes = new THREE.AxisHelper(1000);
scene.add( axes );
var cameraObj = new THREE.Mesh(boxGeo, new THREE.MeshLambertMaterial( {color: 0x888800}));
scene.add(cameraObj);
var orbSpace = new THREE.Object3D();
scene.add(orbSpace);
var orbBall = new THREE.Mesh(boxGeo, new THREE.MeshLambertMaterial( {color: 0x880088}));
orbBall.position.set(0, 0, cameraObj.position.z + 100);
orbSpace.add(orbBall);
animate();
var camX = 0.3;
var camY = 0;
function animate() {
requestAnimationFrame( animate );
camY += 0.02;
if (camY >= 2) camY = 0;
cameraObj.rotation.x = Math.PI * document.querySelector('#volume').value;
cameraObj.rotation.y = Math.PI * camY;
orbSpace.position.copy(cameraObj.position);
orbSpace.rotation.copy(cameraObj.rotation)
renderer.render( scene, camera );
}
Here's a codepen about how it works:
http://codepen.io/arpo/pen/RrpMJJ
You can update the X angle in the uper right corner

Categories