0
私は、threejs.orgの与えられた例のようにページに複数のキャンバスを設定しようとしています。
var scene, camera, controls, renderer, pointLight, geometry, material;
var container, position, dimensions, apps = [];
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
function preView(id){
apps.push(new App(id));
//animate(); // if i call this here, all canvases renders once
function App(id) {
container = $('#preView_' + id);
dimensions = { width: container.width(), height: container.height()};
camera = new THREE.PerspectiveCamera(45, dimensions.width/dimensions.height, 1, 5 * radius);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;
scene = new THREE.Scene();
/* add meshes */
/* ======================= */
renderer = new THREE.WebGLRenderer();
renderer.setSize(dimensions.width, dimensions.height);
container.append(renderer.domElement);
this.animate = function() {
if(camera.position.z > -(1/3) * 100)
{
/* simple fly through the scene */
camera.position.x += 0.05;
camera.position.y += 0.05;
camera.position.z -= 0.1;
}
camera.lookAt(new THREE.Vector3(0,0,0));
render();
};
}
}
function animate(){
for (var i = 0; i < apps.length; ++i) {
apps[ i ].animate();
}
requestAnimationFrame(animate);
}
function render(){
renderer.render(scene, camera);
}
さhappends何奇妙なこと、すべてのキャンバスに描かれた後、私はanimate();を呼び出した場合にのみ、最後のキャンバスレンダラー（すべての）その：
私の基本的なコードは次のようです。そしてpreView();ファンクションのanimate();を呼び出すと、すべてのセンスが1回レンダリングされますが、最後のキャンバスだけが「カメラフライスルー」をレンダリングします。しかし、animate();機能のconsole.log(apps[i]);はすべてのアプリケーションを通過しますが、シーンをレンダリングしません。
ここで何が間違っていますか？また
2.
私はそれがシーンに持っている位置nomatter私は「光」として宣言し、すべてのオブジェクト、ためthisシェーダ効果を達成しようとします。 シェイダー内のすべてのポジション値を使って少しでも演奏しようとしましたが、効果は全くありませんでした。 唯一の効果は、VolumetericLightShaderの333行にあります。
私はここでどんなヒントも願っています。