[SOLVED] Help with image meshes and meshes going off screen=

Questions
, , ,
1

Hi, I have a couple of things I would like to do with this code but I am having a lot of trouble figuring out the exact formatting for how to add the few more things I’d like for it to do. I’ve been looking around these forums and threejs documentation and found a couple similar ideas, but they are difficult for me, as a newbie, to figure out how to incorporate. Any advice or pointers for where in the code or what snippets I can work with would be immensely helpful, and if there are more controls I need to import to achieve them. :slightly_smiling_face: Thanks!

My question: How might I go about getting the below code to achieve the following two goals:

  1. An image background on a mesh (specifically would like to know how to add an image texture to the “g_jiggleVertMesh” such as a bouncy ball)
  2. Make it such that none of the meshes can be dragged off screen/out of view (I would like them to ‘collide’ with the edges of the scene and not go beyond the edge)

import * as THREE from “https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js”;
import { OrbitControls } from “https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js”;
import { DragControls } from “https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/DragControls.js”;
import Stats from ‘https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/libs/stats.module.js’;

let g_camera, g_scene, g_renderer;
let g_canvaContainer, g_controls;
let g_goalMesh;
let g_jiggleVertMesh;
let g_jiggleVertPrevious = new THREE.Vector3(0,0,0);
const renderer = new THREE.WebGLRenderer({ alpha: true });
let DatGuiContext = function () {

this.damping = 0.01;
this.stifness = 0.05;    
this.jiggleButton = jiggleButtonCallback;

};
let g_datGuiContext = new DatGuiContext();

window.addEventListener(“load”, jigglePointV1InitUI);

function jigglePointV1InitUI()
{
setValue();

if(true)
{
}

};

function setValue()
{
g_goalMesh.position.set(0,0,0);
g_jiggleVertMesh.position.set(0,0,0);
g_jiggleVertPrevious = new THREE.Vector3(0,0,0);
}

function jiggleButtonCallback(){
g_goalMesh.position.set(0,50,0);
g_jiggleVertMesh.position.set(0,0,0);
g_jiggleVertPrevious = new THREE.Vector3(0,0,0);
}

function init_scene()
{
let container = document.createElement(‘div’);
document.body.appendChild(container);

g_camera = new THREE.PerspectiveCamera(50, 650 / 200, 1, 150);
g_camera.position.set(10, 100, 140);    
g_scene = new THREE.Scene();
g_scene.background = null;


let light2 = new THREE.DirectionalLight(0xbbbbbb);
light2.position.set(0, 200, 100);
light2.castShadow = false;
g_scene.add(light2);
g_renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
g_renderer.setPixelRatio(window.devicePixelRatio);
g_renderer.setSize(650, 200);
g_renderer.shadowMap.enabled = false; 
document.body.style.margin = 0;
document.body.style.padding = 0;
document.body.style.position = 'fixed';
container.appendChild(g_renderer.domElement);

g_controls = new /*THREE.*/OrbitControls(g_camera, g_renderer.domElement);

}

function init()
{

init_scene();  

let draggableObjects = [];

let sphereGeometry = new THREE.SphereBufferGeometry(1.0, 50, 50);    
{
    let invertEllipsoid = false;
    let material = new THREE.MeshLambertMaterial({ 
        color: 0x777777, 
        transparent: true, 
        opacity: 1, 
        side: invertEllipsoid ? THREE.BackSide : THREE.FrontSide, 
        depthWrite: false });

    g_jiggleVertMesh = new THREE.Mesh(sphereGeometry, material);
    g_jiggleVertMesh.scale.set(50, 50, 50);
    g_jiggleVertMesh.castShadow = false;
    g_jiggleVertMesh.renderOrder = 0;
    g_scene.add(g_jiggleVertMesh);

    g_jiggleVertPrevious.copy( g_jiggleVertMesh.position );
}

let bone = new THREE.MeshPhongMaterial({             color: 0x777777, 
        transparent: true, 
        opacity: 0,  
        depthWrite: false });
g_goalMesh = new THREE.Mesh(sphereGeometry, bone);   
g_goalMesh.scale.set(40, 40, 40);
g_goalMesh.position.set(0, 0, 0);
g_goalMesh.castShadow = false;
g_scene.add(g_goalMesh);
draggableObjects.push( g_goalMesh );

let dragControls = new DragControls(draggableObjects, g_camera, g_renderer.domElement);
dragControls.addEventListener('dragstart', function () {
    g_controls.enabled = false;      
});
dragControls.addEventListener('dragend', function () {
    g_controls.enabled = false;
});

}

function onWindowResize() {
g_camera.aspect = 650 / 200;
g_camera.updateProjectionMatrix();
g_renderer.setSize(50, 50);
}

function getPosition( pos ) {
return new THREE.Vector3(pos.x, pos.y, pos.z);
}

function animate()
{
let damping = 0.01;
let stifness = 0.05;
damping = g_datGuiContext.damping;
stifness = g_datGuiContext.stifness;

{ 
    let currentPosition = getPosition( g_jiggleVertMesh.position );       
    let V = getPosition( g_jiggleVertMesh.position );    

    V.sub( g_jiggleVertPrevious );        

    V.multiplyScalar(1.0 - damping); 

    g_jiggleVertMesh.position.add( V );   
    
    let goal = getPosition( g_goalMesh.position );    
    goal.sub( g_jiggleVertMesh.position );        

    goal.multiplyScalar( stifness );    
    
    g_jiggleVertMesh.position.add( goal );      

    g_jiggleVertPrevious.copy( currentPosition );
}

requestAnimationFrame(animate);
g_renderer.render(g_scene, g_camera);    

}

init();
animate();
2

Nevermind I figured out the better solution was to just reset the bouncey ball to its original position so it never ends up leaving the screen after moving. I also was able to achieve a texture on the bouncy ball with this:

let material = new THREE.MeshLambertMaterial({
map: new THREE.TextureLoader().load(
‘``https://imageurlhere.jpg``’
)

I hope this helps anyone trying to achieve the same thing! :slightly_smiling_face: