Fatal编程技术网
  • javascript/
  • Javascript three.js orbitControl在Ruby on rails中禁止在文本框中写入内容

Javascript three.js orbitControl在Ruby on rails中禁止在文本框中写入内容

javascript ruby-on-rails three.js

Javascript three.js orbitControl在Ruby on rails中禁止在文本框中写入内容,javascript,ruby-on-rails,three.js,Javascript,Ruby On Rails,Three.js,出于某种原因，我的three.js应用程序禁止我在文本字段中写入任何内容，甚至禁止我在Ruby on rails应用程序中单击它。 有人知道为什么会这样吗？ 我的三个应用程序如下所示： var box = document.getElementById('player'); if(box){ var boxSize = box.clientWidth; } var $player; var clock = new THREE.Clock(); var camera, scene, render

出于某种原因，我的three.js应用程序禁止我在文本字段中写入任何内容，甚至禁止我在Ruby on rails应用程序中单击它。 有人知道为什么会这样吗？ 我的三个应用程序如下所示：

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);

}

<%= 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' %>

controls = new THREE.OrbitControls( camera, renderer.domElement );
这就产生了问题。但我真的不知道它到底能给我带来什么样的问题。 此外，我的文本框如下所示：

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);

}

<%= 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' %>

controls = new THREE.OrbitControls( camera, renderer.domElement );
我发现了我的问题。我应该这样调用3.0控件：

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);

}

<%= 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' %>

controls = new THREE.OrbitControls( camera, renderer.domElement );
您的意思是禁止您在文本字段中写入任何内容？你的问题很模糊。也许您的canvas元素只是位于文本输入元素的前面？也许你应该检查你的元素树？@Wilt它只是禁止我点击文本字段。我根本无法与之互动。我把剧本拿出来，然后它就成功了。关于元素树，sry，我不知道那是什么