編集: シェーダーで計算を行う必要があるため、シーンのレンダリング後に FOG を追加することはできません。
- これを行うと、すべてのシェーダーを再レンダリングする必要があるため、マシンがダウンしているように見えます。
- フォグが必要な場合は、フォグを使用してレンダリングする方が計算上は優れていますが、密度を 0 (または 0.01) に設定して、実際に目に見えるフォグがないようにします。これの正当な理由は、FOG 計算が作成されているためです。密度を調整するだけで、ページが読み込まれます。
現在の計画:密度を変更する方法を理解する必要があります。FOG オブジェクトとシーンを調べて、何が見つかるかを確認しています。
元の質問:
クリックするとシーンにフォグを追加/削除すると思われるオン/オフの切り替えがありますが、シーンにフォグを追加していないようです。コンソールで scene.fog を実行して、それがあることを確認します。
私がやったことのように、それを追加したり削除したりできると思いました。霧の実装に依存するものは他にありますか? http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap_dynamic.htmlをオフにして霧がどのように機能するかを確認しようとしましたが、他の行は表示されませんでした。私のようにシーンを調整した後、何らかのシーンのリフレッシュを行う必要があるかもしれません。
function toggledata(){
var toggle = $(this).val(); // 'on' or 'off'
if (toggle == 'on')
{
scene.fog = new THREE.Fog(0xffffff, 10, 60);
scene.fog.color.setHSL( 0.51, 0.6, 0.6 );
}
else if (toggle == 'off')
{
scene.fog = null;
}
}
//GLOBALS
var scene, container, etc.
function init()
{
container = $('#MODELDIV');
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = container.width();
var SCREEN_HEIGHT = container.height();
var VIEW_ANGLE = 45;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000000;
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(3043.0732, 98.8883, 141.0916);
camera.lookAt(3043.0732, 98.8883, 41.0916);
//CAMERA_LIST.push(camera);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setClearColor(0x000000);
renderer.sortObjects = true;
container.append(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
LIGHT_LIST.push(directionalLight);
var ambientLight = new THREE.AmbientLight(0xbbbbbb);
}