0
私がしようとしているのは、シンプルなプレーンを追加し、ストレッチしてフィットさせるテクスチャを割り当てることです。テクスチャは両側に表示されます。これまで私はこのコードを持っています（最適化が必要ですが、まずこの問題を修正する必要があります）。Three.jsテクスチャにはフォグがあり、ズームアウト時にオーバーラップします
$(window).on('load', function() {
var container = $('main');
var renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
logarithmicDepthBuffer: true
});
renderer.setSize(container.outerWidth() - 10, container.outerHeight() - 10);
renderer.setClearColor(0xeaeaea);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, container.outerWidth()/container.outerHeight(), 2, 1000);
camera.position.z = 8;
camera.position.x = 2;
var controls = new THREE.OrbitControls(camera);
controls.target.set(0, 0, 0)
container.append(renderer.domElement);
var animate = function() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
var geometry = new THREE.PlaneGeometry(8, 5, 32);
var texture = THREE.ImageUtils.loadTexture("texture.png");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
var diffuse = THREE.ImageUtils.loadTexture("diffuse.png");
diffuse.wrapS = THREE.RepeatWrapping;
diffuse.wrapT = THREE.RepeatWrapping;
diffuse.repeat.set(1, 1);
var material = new THREE.MeshBasicMaterial({ map : texture });
material.alphaMap = diffuse;
material.transparent = true;
material.side = THREE.DoubleSide;
var plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -60 * (Math.PI/180);
scene.add(plane);
});
まず問題が
平面回りに回転または角度から見て、この霧は、平面の周りに追加されます。私はそれを望んでいない。私はテクスチャがすべての平面をはっきりと占めたがっています。霧はなく、マージンにはフェードアウトしません。 、テクスチャの変化をズームアウトし、何とか自身と重なっている場合はそれが
1.第二の問題に
をなぜ起こるか私は知りません。これが何らかのLODテクニックであるかどうかは分かりませんが、私はそれを望んでいません。私が既に言ったように、私は質感を失うことなく、霧をかけることも、何らかの形で変化させることなく、テクスチャを飛行機の内側に収めて完全に覆いたい。私は霧やカメラの切頭値で作業する必要があるかどうかわかりません。私はそれらを変更しようとしましたが、結果は同じです。