How to select an object and change its position referenced the camera?

Vote count: 0

First of all, I am a begginer. I am trying to select an object and put it close the camera. (Like this http://ift.tt/2kDibuz) I looked for the examples but I didn´t find the solution. I suppose that I need to intersect the object, get the posicion and change it. Is this OK? (HOWEVER, I DO NOT HOW TO DO IT)

my code:

var camera, scene, renderer;
var geometry, mesh;
var controls;
var bubbles = [];
var amountOfParticles = 500000, maxDistance = Math.pow(120, 2);
var positions, alphas, particles, _particleGeom;
var clock = new THREE.Clock();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000000);
    scene = new THREE.Scene();
    controls = new THREE.FirstPersonControls(camera);
    controls.movementSpeed = 10;
    controls.lookSpeed = 0.1;

    var textureLoader = new THREE.TextureLoader();

    var materials = [
    new THREE.MeshBasicMaterial({ map: textureLoader.load('textures/cube/skybox/px.jpg')}),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('textures/cube/skybox/nx.jpg')}),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('textures/cube/skybox/py.jpg')}),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('textures/cube/skybox/ny.jpg')}),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('textures/cube/skybox/pz.jpg')}),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('textures/cube/skybox/nz.jpg')}) 
    ];

    bigBox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000, 7, 7, 7), new THREE.MultiMaterial(materials));
    bigBox.scale.x = - 1;
    scene.add(bigBox);

    var path = "textures/cube/skybox/";
    var format = '.jpg';
    var urls = [
    path + 'px' + format, path + 'nx' + format,
    path + 'py' + format, path + 'ny' + format,
    path + 'pz' + format, path + 'nz' + format
    ];

    var textureCube = new THREE.CubeTextureLoader().load(urls);
    scene.background = textureCube;
    textureCube.mapping = THREE.CubeRefractionMapping;


    var geometry = new THREE.SphereBufferGeometry(0.1, 32, 16);
    var bubbleMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: textureCube, refractionRatio: 0.9});

    for (var i = 0; i < 1000; i ++) {
        var bubble = new THREE.Mesh(geometry, bubbleMaterial);
        bubble.position.x = Math.random() * 200 - 5;
        bubble.position.y = Math.random() * 200 - 5;
        bubble.position.z = Math.random() * 200 - 5;
        bubble.scale.x = bubble.scale.y = bubble.scale.z = Math.random() * 10 + 1;
        scene.add(bubble);
        bubbles.push(bubble);
    }

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    controls.handleResize();
}

function render() {

    var timer = 0.00001 * Date.now();
    for ( var i = 0, il = bubbles.length; i < il; i ++ ) {
        var bubble = bubbles[ i ];
        bubble.position.x = 100 * Math.cos( timer + i );
        bubble.position.y = 100 * Math.sin( timer + i * 1.1 );
    }
    renderer.render( scene, camera );
}

function animate() {

    requestAnimationFrame(animate);
    controls.update(clock.getDelta());
    render()
    //renderer.render(scene, camera);

}

init();
animate();

REALLY THANKS IN ADVANCE!

asked 11 secs ago

Gisela Ferrari

Let's block ads! (Why?)

How to select an object and change its position referenced the camera?