My three.js application seems to be causing issues with my text field in my Ruby on Rails application. I am unable to write anything in the text field or even click on it. Does anyone know why this is happening? Here is a snippet of my three.js application:
var box = document.getElementById('player');
if(box){
var boxSize = box.clientWidth;
}
var $player;
var clock = new THREE.Clock();
var camera, scene, renderer;
var mixer, skeletonHelper;
init();
animate();
loadBVH('<%= asset_path 'forehand.bvh' %>');
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 100, 400 );
controls = new THREE.OrbitControls( camera );
controls.enableZoom = false;
controls.minDistance = 300;
controls.maxDistance = 700;
scene = new THREE.Scene();
scene.add( new THREE.GridHelper( 200, 10 ) );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0xeeeeee );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( boxSize, boxSize );
$player = $('#player');
$player.append(renderer.domElement);
}
function loadBVH(pathBVH) {
var loader = new THREE.BVHLoader();
loader.load(pathBVH, function( result ) {
skeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
skeletonHelper.skeleton = result.skeleton;
var boneContainer = new THREE.Group();
boneContainer.add( result.skeleton.bones[ 0 ] );
scene.add( skeletonHelper );
scene.add( boneContainer );
mixer = new THREE.AnimationMixer( skeletonHelper );
mixer.clipAction( result.clip ).setEffectiveWeight( 1.0 ).play();
});
}
function animate(){
requestAnimationFrame( animate );
var delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
if ( skeletonHelper ) skeletonHelper.update();
renderer.render( scene, camera );
}
function showMotion(role, mood, param, name, weight, gender, body_height, shoulder_width,
shoulder_height, inner_leg_length, tibia_length, body_depth, hip_width, seat_height,
shoulder_elbow_length, elbow_wrist_length, chest_girth, waist_girth, thigh_girth, path){
var fieldNameElement = document.getElementById("details");
fieldNameElement.innerHTML =
'<h4 class="motion-font">' + 'Motion: '
+ '</h4>'
+ '<div class="motion-font">'
+ 'Role: ' + role + '<br/>'
+ 'Mood: ' + mood + '<br/>'
+ 'Description: ' + param + '<br/>'
+ '</div>'
+ '<h4 class="motion-font">' + 'Actor: '
+ '</h4>'
+ '<div class="motion-font">'
+ 'name: ' + name + '<br/>'
+ 'weight: ' + weight + '<br/>'
+ 'gender: ' + gender + '<br/>'
+ 'body height: ' + body_height + '<br/>'
+ 'shoulder width: ' + shoulder_width + '<br/>'
+ 'shoulder height: ' + shoulder_height + '<br/>'
+ 'inner leg length: ' + inner_leg_length + '<br/>'
+ 'tibia length: ' + tibia_length + '<br/>'
+ 'body depth: ' + body_depth + '<br/>'
+ 'hip width: ' + hip_width + '<br/>'
+ 'seat height: ' + seat_height + '<br/>'
+ 'shoulder elbow length: ' + shoulder_elbow_length + '<br/>'
+ 'elbow wrist length: ' + elbow_wrist_length + '<br/>'
+ 'chest girth: ' + chest_girth + '<br/>'
+ 'waist girth: ' + waist_girth + '<br/>'
+ 'thigh girth: ' + thigh_girth + '<br/>'
+ '</div>';
scene.remove( skeletonHelper );
clock = new THREE.Clock();
loadBVH(path);
}
Upon further testing, I discovered that the line:
controls = new THREE.OrbitControls( camera );
is causing the issue. However, I am unsure of the specific reason behind this problem. Additionally, my text box code looks like this:
<%= select_tag :search_mood, options_from_collection_for_select(Motion.all.uniq{ |x| x.mood }, :mood, :mood, params[:search_mood]), include_blank: true, class: 'js-example-placeholder-single mood' %>