在使用threejs-rails gem的Rails项目中没有定义ReferenceError: THREE

Question

我正在一个ruby on rails项目中使用three.js。我安装了相应的宝石，它似乎工作得很好。但是javascript仍然抛出以下错误:

Uncaught ReferenceError: THREE is not defined

Line:

renderer = new THREE.WebGLRenderer();

奇怪的是，我的程序似乎在工作。我的对象被显示。

我的javascript文件看起来像这样:

// set size to the size of the containing box
var box = document.getElementById('player');
if(box){
    var boxSize = box.clientWidth;
}
var a = 0.05;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = 1,
NEAR = 0.1,
FAR = 10000;
var camera, scene, renderer;
var $player;
var char, materialChar ;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 10000 );
camera.position.y = 10;
camera.position.z = 20;
scene = new THREE.Scene();
// get the DOM element to attach to
// - assume we've got jQuery to hand
$player = $('#player');
// attach the render-supplied DOM element
$player.append(renderer.domElement);
// create the character
initChar();
// create a point light
addLight();
scene.add(camera);
// draw!
renderer.setSize(boxSize, boxSize);
renderer.render(scene, camera);
renderer.shadowMap.enabled = true;
document.getElementById("player").addEventListener("click", zoom);
}
function addLight(){
var dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(100, 100, 50);
scene.add(dirLight);
var ambLight = new THREE.AmbientLight(0x404040);
scene.add(ambLight);
var bluePoint = new THREE.PointLight(0x0033ff, 3, 150);
bluePoint.position.set( 70, 5, 70 );
scene.add(bluePoint);
scene.add(new THREE.PointLightHelper(bluePoint, 3));
var greenPoint = new THREE.PointLight(0x33ff00, 1, 150);
greenPoint.position.set( -70, 5, 70 );
scene.add(greenPoint);
scene.add(new THREE.PointLightHelper(greenPoint, 3));
}
function initChar(){
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('<%= asset_path 'grey.jpg' %>');
materialChar = new THREE.MeshBasicMaterial({
    map: texture
});
var loader = new THREE.JSONLoader();
loader.load('<%= asset_path 'standard-male-figure2.json' %>', function(geometry){
    char = new THREE.Mesh( geometry, materialChar );
    scene.add(char);
});
}
function animate(){
requestAnimationFrame( animate );
render();
}
function render(){
//char.rotation.y += 0.05;
renderer.render( scene, camera );
}
function zoom(){
    camera.position.z = camera.position.z - 10;
}

Answer 1

我在Rails 4.2中有类似的问题。我认为默认的jquery/Ajax gem缺少以下组件。我把它连在我的动词里，解决了这个问题。如果您选择使用资产管道，也可以将其配置为预编译。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>