Three js object z position moving on bowl - javascript

Im making a threejs game.
Now, what should happen is, a ball that comes from z-position -5000 to 0.
This is how i create the mesh:
let geometry = new THREE.SphereGeometry(100, 32, 32);
let material = new THREE.MeshBasicMaterial({
map: loader.load("images/SoftballColor.jpg"), side: THREE.BackSide
});
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0, -5000);
In the render, I run this code (ball coming closer):
mesh.position.z += 50;
the ball comes to me, but in a straight line
What i would like to do, is do this in a bowl. Any ideas?
I'll add some images to make it more clear.
Thank you in advance.
Ball movement:

The Sinus function will help.
var how_high = 1000;
var start_position = new THREE.Vector3(0,0,-5000);
You know the z-value of ball's position, so, its y-value will be
ball.position.y = Math.sin(ball.position.z / start_position.z * Math.PI) * how_high;
jsfiddle example

Related

Changing the way three.js projects a texture onto a halfsphere

I am currently trying to project an image onto the inside of a halfsphere in a three.js project. The half sphere is created via
const geometry = new THREE.SphereGeometry(Component.radius, this.resolution, this.resolution,
Math.PI, Math.PI, 0, Math.PI);
this.material = new THREE.MeshStandardMaterial({color: 0xffffff});
this.material.side = THREE.DoubleSide;
this.sphere = new THREE.Mesh(geometry, this.material);
// The image of the texture is set later dynamically via
// this.material.map = textureLoader.load(...);
With radius and resolution being constants. This works fine, except for one issue: The image becomes distorted around the "top" and "bottom" of the sphere, like this:
Simple example of distorted texture:
The texture originally had the value "0,0" in the bottom left and "0,1" in the bottom right, and with the camera facing down from the center of the demisphere the bottom left and bottom right corner are squished onto the "bottom" point of the sphere.
I want to change this behavior so the texture corners are instead on where they would be if you place the square texture into a sphere, with the corners touching the circle, then stretching the lines between the corners to match the circle. Simple mock of what i mean:
I have tried playing with the mapping Attribute of my texture, but that doesn't change the behaviour from my understanding.
After changing the UV coordinates, my half sphere texture is't stretching on border as well:
this.sphereGeometry = new THREE.SphereGeometry(
10,
32,
24,
0,
Math.PI,
0,
Math.PI
);
const {
uv: uvAttribute,
normal
} = this.sphereGeometry.attributes;
for (let i = 0; i < normal.count; i += 1) {
let u = normal.getX(i);
let v = normal.getY(i);
u = u / 2 + 0.5;
v = v / 2 + 0.5;
uvAttribute.setXY(i, u, v);
}
const texture = new THREE.TextureLoader().load(
'https://i.imgur.com/CslEXIS.jpg'
);
texture.flipY = false;
texture.mapping = THREE.CubeUVRefractionMapping;
texture.needsUpdate = true;
const basicMaterial = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide,
});
this.sphere = new THREE.Mesh(this.sphereGeometry, basicMaterial);
this.scene.add(this.sphere);

Threejs Change Mesh Color doesn't get recognized

I have been trying to change the color of a mesh I created using PlaneGeometry and MeshBasic Material.
var planeSegments = 20,
plane = new THREE.Mesh(
new THREE.PlaneGeometry(horizon, horizon, planeSegments, planeSegments),
new THREE.MeshBasicMaterial({ color:0xFFFFFF })
);
plane.rotation.x = Math.PI / 2;
plane.position.y = 0;
planes.push(plane);
If I add this to MeshBasicMaterial object, it renders the wireframe with the current color. But I don't want the wireframe but a static color.
wireframe: true
Thank you.
Have a look at this fiddle:
http://jsfiddle.net/exiara/mrwdrwkn/
It seems your code is working but maybe you need to rotate your plane to -Math.PI/2 instead of just Math.PI/2 . Otherwise you maybe looking at the plane from the backside.

Three.js - How to move a Ball from left to right repeatedly

I want to move a Ball in Three.js to right and then it shall move to the start position and then back to the right repeatedly.
var geometry = new THREE.SphereGeometry( 5, 32, 32);
var material = new THREE.MeshPhongMaterial( {specular: "#fdfb57",
color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide} );
var ball = new THREE.Mesh(geometry, material);
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
renderer.setSize(window.innerWidth, window.innerHeight);
// What programming code I have to put on here?
};
render();
But how should I implement the Moving of the ball?
Either by changing ball.position on every frame or by using a library like Tween.js to get the motion path between the two points you want to move between.
For a simple left-to-right-reverse-repeat animation, you're well off with simply adjusting the position.
Try pasting this into avgp.github.io/h2g2three:
var geometry = new THREE.SphereGeometry( 5, 32, 32);
var material = new THREE.MeshPhongMaterial( {specular: "#fdfb57", color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide} );
var ball = new THREE.Mesh(geometry, material);
var dxPerFrame = 1; // how to move in a single frame
scene.add(ball);
onRender = function() {
ball.position.x += dxPerFrame; // move ball
if(ball.position.x > 100) dxPerFrame = -1; // if we're too far right, move towards the left
if(ball.position.x < -100) dxPerFrame = 1; // if we're too far left, move towards the right again
};
// Alt+Return run the code

Three.js - shadows rendering on cube but not on imported json mesh object

I'm trying to get my racecar to cast a shadow on the floor. The shadows are working from the cube (the cube is casting a shadow), but the racecar (imported json mesh object) is not casting a shadow. How can I get the racecar to cast a shadow? Is this something to do with the json file baking on the materials? Does the code obj.castShadow = true; actually need to go on a child of the obj? In which case, which child? What am I doing wrong here?
Here's the json file and Here's a link to a demo
Here's the relevant code:
var loader = new THREE.ObjectLoader();
loader.load("models/ferrari-f1-race-car.json", function (obj) {
obj.castShadow = true;
obj.scale.set(50,50,50);
obj.position.x = 30;
obj.rotation.y = Math.PI/1;
scene.add (obj);
});
boxgeometry = new THREE.BoxGeometry(100, 100, 100);
boxmaterial = new THREE.MeshLambertMaterial({
color: 0x0aeedf
});
var cube = new THREE.Mesh(boxgeometry, boxmaterial);
cube.castShadow = true;
cube.position.x = -80;
cube.position.y = 50;
cube.position.z = 0;
scene.add(cube);
function createFloor(){
floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(1000,500), new THREE.MeshBasicMaterial({color: 0x8594a2}));
floor.rotation.x = -Math.PI/2;
floor.position.y = -0;
floor.castShadow = false;
floor.receiveShadow = true;
scene.add(floor);
}
Casting shadows is costly and not well supported on custom objects, there are bugs quite often.
The best solution is to draw a shadow texture on a transparent plane under the car. It can be a problem if you need to rotate you car or your light and need a precise shadow, because the texture won't change with the angle. Up to the author to use tricks (rotate the camera or use much biased shadows). That can still give awesome renderings, check http://helloracer.com/racer-s/ and the simple image used :
Even more impressive :
For this photorealistic demo http://www.littleworkshop.fr/renaultespace/

Javascript 3D Effect using three.js

This is my second time using three.js and I've been playing around for at least 3 hours. I cannot seem to find a direction.
What I should build is something like this:
https://www.g-star.com/nl_nl/newdenimarrivals
I created the scene and everything, but I cannot seem to find a formula or anything on how to arrange the products like that (not to mention that I have to handle click events afterwards and move the camera to that product).
Do you guys have any leads or anything?
EDIT:
This is how I try to arrange the products.
arrangeProducts: function () {
var self = this;
this.products.forEach(function (element, index) {
THREE.ImageUtils.crossOrigin = '';
element.image = 'http://i.imgur.com/CSyFaYS.jpg';
//texture
var texture = THREE.ImageUtils.loadTexture(element.image, null);
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
//material
var material = new THREE.MeshBasicMaterial({
map: texture
});
//plane geometry
var geometry = new THREE.PlaneGeometry(element.width, element.height);
//plane
var plane = new THREE.Mesh(geometry, material);
plane.overdraw = true;
//set the random locations
/*plane.position.x = Math.random() * (self.container.width - element.width);
plane.position.y = Math.random() * (self.container.height - element.height);*/
plane.position.z = -2500 + (Math.random() * 50) * 50;
plane.position.x = Math.random() * self.container.width - self.container.width / 2;
plane.position.y = Math.random() * 200 - 100;
//add the plane to the scene
self.scene.add(plane);
});
},
EDIT 2:
I figured out: I need to add about 5 transparent concentric cilinders and put the products on each (random location) and have the camera in the center of all the cilinders and just rotate. Buut, how do I put the images on the cilinider randomly? I really have a blockout on that
On the three.js website you find a whole bunch of examples that can show you what is possible and how to do it. Don't expect to be an expert in only 3 hours.

Categories

Resources