0
私はthree.jsでruby on railプロジェクトで作業しています。私は対応する宝石をインストールし、それは正常に動作するようだ。しかし、どういうわけかjavascriptのは、まだ次のエラーがスローされます。ライン上のReferenceError：3つのレールが3js-railsの宝石を持つRailsプロジェクトで定義されていません
Uncaught ReferenceError: THREE is not defined
：
renderer = new THREE.WebGLRenderer();
奇妙なことは、私のプログラムが動作しているようだということです。私のオブジェクトが表示されます。
私javscriptファイルは次のようになります。
// 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;
}
BVHLoader.jsファイルがthree.js後に含まれている場合、私はチェックします。 gruntやその他のミニマイザーを使用して、Three.jsファイルとBVHLoaderなどの外部アドオンを組み合わせて、gem内の独自のthree.min.jsファイルに追加する方がよい場合があります。しかし、そうでなければ、私は質問に答えるには十分だとは思わない。 – Radio