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

Why 3d models are visible in Three.js without using any light sources?

What I have
As shown in the figure below i use Three.js library to create a WEBGL canvas and load a .gltf model in the scene using GLTFLoader.js.
The Code I use
//Add THREE Renderer
renderer_Main = new THREE.WebGLRenderer({ antialias: true });
renderer_Main.setSize(canvasWidth, canvasHeight); //Set Renderer Size
//Add THREE Scene
scene_Main = new THREE.Scene();
//Add First THREE Camera
camera_Main = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10000);
camera_Main.position.set(-2000, 500, 500); //Set camera position
//Add THREE Grid Helper
var size = 1000; //Value of Each Square Size
var divisions = 60; //Value of Grid Divisions
gridHelper = new THREE.GridHelper(size, divisions);
gridHelper.material.opacity = 0.045;
gridHelper.material.transparent = false;
scene_Main.add(gridHelper); //Add Grid in the Scene
//Add THREE Orbit Controller for the first camera
//Activate mouse events (L_Click, Scroll, R_Click) for moving around in 3D scene
orbitController_Main = new THREE.OrbitControls(camera_Main, renderer_Main.domElement);
orbitController_Main.maxPolarAngle = Math.PI / 2;
orbitController_Main.saveState();
//Add Lights
//var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
//scene_Main.add( directionalLight );
//Add a model (.gltf file)
var loader = new THREE.GLTFLoader();
loader.load( 'models/model_environment/scene.gltf',
function ( gltf ) {
//Add 3d model - file types : .gltf, .bin and (.png materials)
selectedModel = gltf.scene;
selectedModel.scale.set(3,3,3);
selectedModel.position.y = 45;
scene_Main.add(selectedModel);
},
...
);
The Issue
The issue is that when the objects are loaded are visible. Notice that I don't use any kind of Lights (commented). Also when lights are added, nothing changes. I tried using THREE.DirectionalLight and THREE.PointLight, but no luck. In case you wonder about the materials I use for this example is:
1) Cube:
camera_RT_Holder = new THREE.Mesh(
new THREE.BoxGeometry(20, 20, 30),
new THREE.MeshNormalMaterial()
);
2) .gltf model:
Link of the model
Question
If you have an idea what is going on please let me know.

The materials in your glTF file use the KHR_materials_unlit extension. Materials using this extensions are mapped to THREE.MeshBasicMaterial which is an unlit material. That means it does not react on lights so it is visible even without any light sources in your scene.

3D model rotation on HTML with JS

Referring to this video, I can't seem to see the cube which is supposed to be here.
Code causes these 2 errors:
DEPRECATED: THREE.CubeGeometry is deprecated. Use THREE.BoxGeometry instead. three.min.js:634
Uncaught ReferenceError: materials is not defined
Code:
<title>My first three.js app</title>
</head>
<body>
<script src="C:\Users\123303G\Desktop\Webpage\three.min.js"></script>
<script src="C:\Users\123303G\Desktop\Webpage\TrackballControls.js"></script>
<script>
// Our Javascript will go here.
var camera, controls, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
controls = new THREE.TrackballControls(camera);
controls.addEventListener('change', render);
scene = new THREE.Scene();
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>

Problem 1:
One of your methods namely THREE.CubeGeometry is deprecated, which means you should switch it to what the error suggests: THREE.BoxGeometry.
Do:
var geometry = new THREE.BoxGeometry(100,100,100);
Instead of:
var geometry = new THREE.CubeGeometry(100,100,100);
See Three.js referece
Problem 2:
On the other error you have a typo. Your're using materials instead of material.
Do:
var mesh = new THREE.Mesh( geometry, material);
Instead of:
var mesh = new THREE.Mesh( geometry, materials);

Uhm, I believe you just need to remove the 's' of materials in this function call:
var mesh = new THREE.Mesh( geometry, materials);
You have defined the variable "material", but not "materials", which is what the Uncaught ReferenceError means. And this error is the showstopper.

how to import json and rendering in three.js

Hi everyone i write code for importing a json file and rendering it with three.js i export the json file from three.js editor
it doesnt show any error in console
window.onload = function(){
var
shapeObjectUrl = "test.json",
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000),
renderer = new THREE.WebGLRenderer(),
loader = new THREE.JSONLoader();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
loader.load( shapeObjectUrl,
function ( geometry, materials ) {
console.log(geometry, materials);
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
scene.add( mesh );
console.log(mesh);
render();
});
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
};
Json file:
{
"metadata": {
"version": 4,
"type": "geometry",
"generator": "GeometryExporter"
},
"vertices": [0,50,20,14.14213562373095,50,14.142135623730951,20,50,1.2246063538223773e-15,14.142135623730951,50,-14.14213562373095,2.4492127076447545e-15,50,-20,-14.14213562373095,50,-14.142135623730955,-20,50,-3.673819061467132e-15,-14.142135623730955,50,14.142135623730947,-4.898425415289509e-15,50,20,0,-50,20,14.14213562373095,-50,14.142135623730951,20,-50,1.2246063538223773e-15,14.142135623730951,-50,-14.14213562373095,2.4492127076447545e-15,-50,-20,-14.14213562373095,-50,-14.142135623730955,-20,-50,-3.673819061467132e-15,-14.142135623730955,-50,14.142135623730947,-4.898425415289509e-15,-50,20,0,50,0,0,-50,0],
"normals": [0.3826834323650897,0,0.9238795325112866,0,0,1,0.7071067811865475,0,0.7071067811865476,0.9238795325112866,0,0.3826834323650899,1,0,6.123031769111886e-17,0.9238795325112866,0,-0.38268343236508967,0.7071067811865476,0,-0.7071067811865475,0.3826834323650899,0,-0.9238795325112866,1.2246063538223773e-16,0,-1,-0.3826834323650895,0,-0.9238795325112868,-0.7071067811865474,0,-0.7071067811865476,-0.9238795325112866,0,-0.38268343236508984,-1,0,-1.836909530733566e-16,-0.9238795325112868,0,0.3826834323650895,-0.7071067811865478,0,0.7071067811865475,-0.38268343236508995,0,0.9238795325112866,-2.4492127076447545e-16,0,1,0,1,0,0,-1,0],
"uvs": [[0,1,0,0,0.125,1,0.125,0,0.25,1,0.25,0,0.375,1,0.375,0,0.5,1,0.5,0,0.625,1,0.625,0,0.75,1,0.75,0,0.875,1,0.875,0,1,1,1,0]],
"faces": [56,0,9,1,0,1,2,0,1,1,2,56,9,10,1,1,3,2,0,1,2,2,56,1,10,2,2,3,4,3,2,2,4,56,10,11,2,3,5,4,3,2,4,4,56,2,11,3,4,5,6,5,4,4,6,56,11,12,3,5,7,6,5,4,6,6,56,3,12,4,6,7,8,7,6,6,8,56,12,13,4,7,9,8,7,6,8,8,56,4,13,5,8,9,10,9,8,8,10,56,13,14,5,9,11,10,9,8,10,10,56,5,14,6,10,11,12,11,10,10,12,56,14,15,6,11,13,12,11,10,12,12,56,6,15,7,12,13,14,13,12,12,14,56,15,16,7,13,15,14,13,12,14,14,56,7,16,8,14,15,16,15,14,14,16,56,16,17,8,15,17,16,15,14,16,16,56,0,1,18,0,2,3,17,17,17,17,56,1,2,18,2,4,5,17,17,17,17,56,2,3,18,4,6,7,17,17,17,17,56,3,4,18,6,8,9,17,17,17,17,56,4,5,18,8,10,11,17,17,17,17,56,5,6,18,10,12,13,17,17,17,17,56,6,7,18,12,14,15,17,17,17,17,56,7,8,18,14,16,17,17,17,17,17,56,10,9,19,3,1,0,18,18,18,18,56,11,10,19,5,3,2,18,18,18,18,56,12,11,19,7,5,4,18,18,18,18,56,13,12,19,9,7,6,18,18,18,18,56,14,13,19,11,9,8,18,18,18,18,56,15,14,19,13,11,10,18,18,18,18,56,16,15,19,15,13,12,18,18,18,18,56,17,16,19,17,15,14,18,18,18,18]
}
i appreciate any help

The method you are using is right except for some minor things like, in loader.load function's call back you are trying to access material also but its not included in the JSON .
Now I used your code and was successfully able to load the JSON object, so there is nothing wrong with that, except that you are setting camera position to 5 which just makes the loaded model out of the view.
So you can reposition the model like this
var loader = new THREE.JSONLoader();
loader.load( 'models/jsonModel.json', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
mesh.position.x =500;
mesh.position.y =100;
mesh.position.z =500;
scene.add( mesh );
});
or set the camera position to some other position.
You can also use OrbitControls to instead.
Including the above mentioned things I have created a sample code here, you can look are lines 138 and 62, to understand better.

How to load json models in three.js properly?

I'm having a hard time loading JSON models in three.js. I'v made a very simple tube-like model and textured it in blender. The issue is that whenever i try to load the json model in three.js, the vertexes looks weird.
I'v tried exporting model with different settings but got always the same problem, so i think the problem is within my code.
EDIT: Negative. I loaded buffalo model and it looked like it should. Any idea what i'm doing wrong inside blender?
<html>
<head>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="threejs/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.JSONLoader();
loader.load( "models/test.js", modelToScene );
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
var light = new THREE.PointLight( 0xFFFFDD );
light.position.set( -15, 10, 15 );
scene.add( light );
function modelToScene( geometry, materials ) {
var material = new THREE.MeshFaceMaterial( materials );
obj = new THREE.Mesh( geometry, material );
obj.scale.set(1,1,1);
scene.add( obj );
}
camera.position.z = 5;
camera.position.y = 1;
var render = function () {
requestAnimationFrame(render);
obj.rotation.y += 0.01;
obj.rotation.x += 0.02;
renderer.render(scene, camera);
};
render();
</script>
</body>
any help will be appreciated.
Thanks, Jukka Korhonen

I have made some brutal mistakes exporting JSON models. For all those who'r having issues with exporting from Blender. I suggest you to check out your exporting settings.
for me, it worked with following setup;
geometry:
Vertices: check, Faces: check, normals: check, skinning: check
Materials: check all
Settings: Flip YZ: check
Animation: Morph animation
and all mehses: check