Develop Reference

Three JS - make object tilt away from mouse on hover?

I’m trying to make a piece using three js where the object tilts away from the mouse on mouseover, like the locations here (mouse over the VIST tab):
https://meowwolf.com/explore
I don’t know whether this utilized three js or another library, but I don’t know how to go about it. I can’t find any examples on three js.org with the same “tilt away” technology.
So far Im just working with the basic cube example, but ultimately want to be able to "tilt" other objects/particles.
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
How can I do this, starting with just a box?
FOR CLARITY:
The meow wolf site has the objects tilt toward the corner of the object where the mouse is, and lerp back to original rotation when mouse exits

How to set vertical angle of spherebuffergeometry? Why Orbit controls don't work properly when mesh is rotated?

I am having issues trying to set the default view of a panoramic image inside spherebuffergeometry. I have a mesh that makes use of this geometry and the material is an equirectangle panorama image. During runtime, the default view of the image is somewhere towards the right. I want the initial angle to be at the bottom of the camera. I tried changing the Phi angle and theta angle parameters of spherebuffergeometry. While I am able to move the default horizontal angle by changing Phi angle, the panoramic image looks weird when I change the theta angle.
I took the first two snapshots when phi angle was 0 and 100 respectively and theta angle was 0. I took the last snapshot when phi angle was 100 and theta angle was 1.
Any help would be appreciated.
Thanks
sphereBufferGeometry = new THREE.SphereGeometry(100,100,100,0,Math.PI*2,0,Math.PI); sphereBufferGeometry.scale( 1, 1, -1 );
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load([image] )
});
mesh = new THREE.Mesh( sphereBufferGeometry, material );
I have tried this as well.
init();
var scene,renderer,camera;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
var light = new THREE.PointLight(0xffffff, 0.8);
var light2 = new THREE.DirectionalLight( 0xffddcc, 1 );
light.position.set( 1, 0.75, 0.5 );
scene.add( light2 );
var sphereBufferGeometry = new THREE.SphereGeometry(100, 100, 100, 0, Math.PI * 2, 0, Math.PI);
sphereBufferGeometry.scale(1, 1, -1);
var material = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg')
});
var mesh = new THREE.Mesh(sphereBufferGeometry, material);
mesh.rotation.x=1.6;
scene.add(camera);
scene.add(light);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.set(0, 0, 0.001);
orbitControls.update();
var container = document.getElementById('container');
var canvas = renderer.domElement;
canvas.setAttribute("class", "frame");
container.appendChild(canvas);
document.body.appendChild(container);
animate();
}
function animate()
{
requestAnimationFrame(animate);
renderer.render( scene, camera );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>
. As you can see, I've rotated the mesh so that the default view is looking at the floor.. if we click and drag the mouse upwards such that the window in the view is horizontal and then click and drag left or right, orbit controls don't seem to work properly in that it doesn't give a proper panoramic experience.. I would like to know how can this be fixed

CannonJS floor. Make a ball stick to the ground

Noob Question: I'm trying to drop a ball to the floor and make it stick there or even roll over a plane. Right now it passes trough the plane. I'm not sure where I made a mistake or if I'm doing anything wrong.
var world, timeStep=1/60, scene, renderer, camera,
icosahedronBody, sphereShape, groundShape,
ground, groundBody, groundShape;
// CONSTANTS
var GRID_HELPER_SIZE = 40,
GRID_HELPER_STEP = 2,
MASS = 5;
initThree();
initCannon();
animate();
function initCannon() {
world = new CANNON.World();
world.broadphase = new CANNON.NaiveBroadphase();
sphereShape = new CANNON.Sphere();
groundShape = new CANNON.Plane();
icosahedronBody = new CANNON.Body({
mass: MASS,
});
groundBody = new CANNON.Body({
mass: 0, // mass == 0 makes the body static
});
world.solver.iterations = 10;
world.gravity.set(0,-9.8,0);
world.defaultContactMaterial.contactEquationStiffness = 1e9;
world.defaultContactMaterial.contactEquationRegularizationTime = 4;
icosahedronBody.addShape(sphereShape);
icosahedronBody.position.set(0,50,0)
icosahedronBody.linearDamping = 0.5;
world.addBody(icosahedronBody);
groundBody.addShape(groundShape);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0,1,0),-Math.PI/2);
world.addBody(groundBody);
var ballContact = new CANNON.ContactMaterial( groundBody, icosahedronBody, 0.0, 0.0);
world.addContactMaterial(ballContact);
}
function initThree(){
// INITIALIZE CANVAS
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var light = new THREE.AmbientLight( 0x404040 ),
directionalLight = new THREE.DirectionalLight( 0xffffff ),
gridHelper = new THREE.GridHelper( GRID_HELPER_SIZE, GRID_HELPER_STEP );
renderer.setSize( window.innerWidth - 100 , window.innerHeight - 100 );
renderer.setClearColor( 0x757575 );
document.body.appendChild( renderer.domElement );
camera.position.set(1,25,100); // camera position to x , y , z
camera.lookAt( new THREE.Vector3() )
directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
// INITIAL CANVAS
scene.add( directionalLight );
scene.add( light );
scene.add( camera );
scene.add( gridHelper );
// MATERIALS
var icoGeometry = new THREE.IcosahedronGeometry(10, 1),
icoMaterial = new THREE.MeshLambertMaterial( {color: 0xff0000} );
icosahedron = new THREE.Mesh( icoGeometry, icoMaterial );
var groundGeometry = new THREE.BoxGeometry(100 , 1, 100),
groundMaterial = new THREE.MeshLambertMaterial( {color: 0xcccccc} );
ground = new THREE.Mesh( groundGeometry, groundMaterial );
ground.receiveShadow = true;
// ADD OBJECTS TO SCENE
scene.add( icosahedron );
scene.add( ground );
}
function animate() {
requestAnimationFrame( animate );
updatePhysics();
render();
}
function updatePhysics() {
// Step the physics world
world.step(timeStep);
// Copy coordinates from Cannon.js to Three.js
icosahedron.position.copy(icosahedronBody.position);
icosahedron.quaternion.copy(icosahedronBody.quaternion);
ground.position.copy(groundBody.position);
ground.quaternion.copy(groundBody.quaternion);
}
function render() {
renderer.render( scene, camera );
}

It appears that your CANNON.Plane is oriented the wrong way. By default, it's normal is pointing in the Z direction, so you need to rotate it -90 degrees along the positive X axis to make its normal point in the positive Y direction (use the right hand rule):
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2);
Secondly, you have to make the BoxGeometry match. Make sure its thinner along its Z axis.
var groundGeometry = new THREE.BoxGeometry(100, 100, 1),
I also note that the radius of the THREE.IcosahedronGeometry is 10, while the radius of the CANNON.Sphere is 1 (the default). Set its radius to 10 to match the three.js geometry:
sphereShape = new CANNON.Sphere(10);
Replace these three lines and your simulation looks like it should. Good luck!

Three.js - troubles with the size of texture

Less words, more code =)
var objects = [];
var camera, scene, renderer;
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
init();
render();
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
console.log(intersects[ 0 ].object);
}
}
function init() {
container = document.getElementById( 'container' );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 1100 );
camera.position.z = 50;
scene.add( camera );
var particle = new THREE.Particle( new THREE.ParticleBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/satellite.png" ) } ) );
objects.push( particle );
//particle.scale.x = particle.scale.y = 0.25
scene.add( particle );
projector = new THREE.Projector();
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
As a result, we get clickable particle with a texture. But I don't understand several things:
Why the "clickable" area of particle is so small? It works only if I click in the middle of a particle.
Why is that particle so huge? The texture is this .png file and the particle is way more bigger than 16×16. How can I fix that? Yes, I know about particle.scale, that will make particle look smaller. But, the "clickable" area of particle woukd also become smaller.

I know this is an old question but I came across the same issue today and i found this question unanswered, after some workaround i came across a solution for this.
The solution is to create 2 particles, one as a simple particle that draws a geometry (rect or arc) that is a ParticleCanvasMaterial and then the particle that displays the image on top of it.
So you can use the ParticleCanvasMaterial to track the intersections and display the other particle as a dummy object where it's only purpose is displaying an image on the 3D scene.
A little bit of code:
var programFill = function (context) {
context.beginPath();
context.rect(-0.5, -0.38, 1, 1);
//context.fill();
}
//creating particle to intersect with.
var p = new THREE.ParticleCanvasMaterial({ program: programFill, transparent: true });
var particle = new THREE.Particle(p);
particle.scale.set(23, 23);
//use same position for both particle and imgParticle
particle.position.set(200, 300, 200);
//creating particle that displays image.
var imgTexture = THREE.ImageUtils.loadTexture('images/image.png');
var p2 = new THREE.ParticleBasicMaterial({
map: imgTexture
, size: 1
});
var imgParticle = new THREE.Particle(p2);
imgParticle.scale.x = 0.5;
imgParticle.scale.y = 0.5;
imgParticle.position.set(200, 300, 200);

three.js - only one sphere is visible

I'm trying to build 3 red Spheres with three.js...with no luck :-(
Now this is my code...anybody can tell me what I'm doing wrong??
The only thing I see is one red sphere...
var camera, scene, renderer,
mouseX = 0, mouseY = 0;
init();
function init() {
// Camera params :
// field of view, aspect ratio for render output, near and far clipping plane.
camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
// move the camera backwards so we can see stuff!
// default position is 0,0,0.
camera.position.z = 1000;
// the scene contains all the 3D object data
scene = new THREE.Scene();
// and the CanvasRenderer figures out what the
// stuff in the scene looks like and draws it!
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// the renderer's canvas domElement is added to the body
document.body.appendChild( renderer.domElement );
makeParticles();
// add the mouse move listener
document.addEventListener( 'mousemove', onMouseMove, false );
// render 30 times a second (should also look
// at requestAnimationFrame)
setInterval(update,1000/30);
}
function update(){
//updateParticles();
// and render the scene from the perspective of the camera
renderer.render( scene, camera );
}
function makeParticles() {
var geometry,material,mesh;
// create a sphere shape
geometry = new THREE.SphereGeometry( 50, 16, 16 );
// give a shape red color
material = new THREE.MeshLambertMaterial({color: 0xFF1111});
// create an object
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 0;
// add it to the scene
scene.addObject( mesh );
}
// called when the mouse moves
function onMouseMove( event ) {
// store the mouseX and mouseY position
mouseX = event.clientX;
mouseY = event.clientY;
}

Kind of late, but if all your spheres are in the same position (mesh.position.x = 0;) you will only see one sphere.