Question

我正在乱搞three.js，我遇到了彼此面前的物体问题。对象变得模糊，如this。有人可以帮助我吗？代码（糟糕，虽然有效）是：

 //////////////////////////////////
//      Init basic objects      //
//////////////////////////////////
var scene;
var renderer;
var camera;

var backgroundScene;
var backgroundCamera;



//////////////////////////////////
//    Init supporting modules   //
//////////////////////////////////
//Initialize the top-left stats screen
var stats;
//Initialize the axes.
var axis;
//Used for getting the camera option (inputed by user)
var cameraMode = 1; //0 - follow, 1 - toXAxis, 2 - toCenter, 3 - followHorizontal


//////////////////////////////////
//     Time and acceleration    //
//////////////////////////////////
var milis = 0;
var scale = 170;
var acceleration = 10000 * scale;
var acceleratedTime;


//////////////////////////////////
//   Init objects, def consts   //
//////////////////////////////////
//Sun
//Constants
const SUN_ANGULAR_ROTAION = 2.865329607243705e-6; //in [rad/s]
const SUN_RADIUS = 696342000 * scale; //in [m]
const SUN_MERIDIANS_AND_PARALLELS = 80; //in []
//Objects
var sunGeo;
var sunMat;
var sun;

var sunLight;


//Earth
//Constants
const EARTH_ANGULAR_ROTATION = 7.292115053925690e-5; //in [rad/s]
const EARTH_RADIUS = 6368500 * scale; //in [m]
const EARTH_MERIDIANS_AND_PARALLELS = 80; //in []
const EARTH_SEMI_MAJOR_AXIS = 1.4960e11; //in [m]
const EARTH_ANGULAR_REVOLUTION = 1.99102128e-7; //in [rad/s]
const EARTH_YEAR_LENGTH = 31.6e6;
const EARTH_AXIAL_TILT = 0.13022222222 * Math.PI; //in [rad]
//Objects
var earthGeo;
var earthMat;
var earth;


//Ecliptic Axis
//Objects
var eclipticAxisGeo;
var eclipticAxisMat;
var eclipticAxis;



//Start the actual code
function init() { //Initializes
    //////////////////////////////////
    //    Creating basic objects    //
    //////////////////////////////////
    //Create scene
    scene = new THREE.Scene();

    //Init renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setClearColor(new THREE.Color(0x000000, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);

    //Init camera
    camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, EARTH_RADIUS * 100);



    //////////////////////////////////
    //   Create supporting modules  //
    //////////////////////////////////
    stats = new Stats();
    stats = initStats();

    axis = new THREE.AxisHelper(100000000000000);
    scene.add(axis);



    //////////////////////////////////
    //    Creating the Background   //
    //////////////////////////////////
    //Material
    var backgroundMaterial = new THREE.MeshBasicMaterial();
    backgroundMaterial.map = new THREE.TextureLoader().load("resources/textures/sky.jpg");

    //Mesh
    var background = new THREE.Mesh(new THREE.PlaneGeometry(2, 2, 2), backgroundMaterial);

    //Mesh position and rotation
    background.rotation.z += Math.PI / 2;

    //Material editing
    background.material.depthTest = false;
    background.material.depthWrite = false;

    //Scene
    backgroundScene = new THREE.Scene();
    backgroundCamera = new THREE.Camera();

    //Add objects
    backgroundScene.add(background);
    backgroundScene.add(backgroundCamera);

    //////////////////////////////////
    //       Creating the Sun       //
    //////////////////////////////////
    //Geometry
    sunGeo = new THREE.SphereGeometry(SUN_RADIUS, SUN_MERIDIANS_AND_PARALLELS, SUN_MERIDIANS_AND_PARALLELS);

    //Material
    sunMat = new THREE.MeshPhongMaterial();
    sunMat.emissive = new THREE.Color(0xffffff);
    sunMat.emissiveMap = new THREE.TextureLoader().load("resources/textures/sun.jpg");

    //Mesh creation
    sun = new THREE.Mesh(sunGeo, sunMat);

    //Position of the Sun
    sun.position.x = 0;
    sun.position.y = 0;
    sun.position.z = 0;

    //Adding the sun
    scene.add(sun);

    //Adding light from sun
    sunLight = new THREE.PointLight(0xFFFFFF, 1.0, 0);
    sunLight.position.x = 0;
    sunLight.position.y = 0;
    sunLight.position.z = 0;
    scene.add(sunLight);



    //////////////////////////////////
    //      Creating the Earth      //
    //////////////////////////////////
    //Geometry
    earthGeo = new THREE.SphereGeometry(EARTH_RADIUS, EARTH_MERIDIANS_AND_PARALLELS, EARTH_MERIDIANS_AND_PARALLELS);

    //Material
    earthMat = new THREE.MeshPhongMaterial();
    earthMat.map = new THREE.TextureLoader().load("resources/textures/earth.jpg");

    //Mesh creation
    earth = new THREE.Mesh(earthGeo, earthMat);

    //Position of the Earth
    earth.position.x = EARTH_SEMI_MAJOR_AXIS;
    earth.position.y = 0;
    earth.position.z = 0;

    //Rotate the Earth properly
    earth.rotation.y = Math.Pi / 2;
    earth.rotation.z += EARTH_AXIAL_TILT;

    //Adding the Earth
    scene.add(earth);



    //////////////////////////////////
    //  Creating the EclipticAxis   //
    //////////////////////////////////
    //Geometry
    eclipticAxisGeo = new THREE.CircleGeometry(EARTH_SEMI_MAJOR_AXIS, 10000);
    eclipticAxisGeo.vertices.shift();

    //Material
    eclipticAxisMat = new THREE.LineBasicMaterial({
        color: 0xFF00FF
    });


    //Mesh creation
    eclipticAxis = new THREE.Line(eclipticAxisGeo, eclipticAxisMat);

    //Rotate the Ecliptic properly
    eclipticAxis.rotation.x = Math.PI / 2;

    //Adding the Ecliptic
    scene.add(eclipticAxis);



    //////////////////////////////////
    //      Camera positioning      //
    //////////////////////////////////
    camera.position.set(earth.position.x, earth.position.y, earth.position.z);
    camera.position.y += 1000000000 * scale;
    camera.position.z += 1000000000 * scale;
    camera.lookAt(earth.position);



    //////////////////////////////////
    //     Appending to the DOM     //
    //////////////////////////////////
    document.getElementById("WebGL-output").appendChild(renderer.domElement);



    //////////////////////////////////
    // Creating interval functions  //
    //////////////////////////////////
    setInterval(function() {
        ++milis;
        acceleratedTime = milis * acceleration / 1000; //TODO: Fix this bodge
    }, 1);



    //////////////////////////////////
    //Calling the actual renderScene//
    //////////////////////////////////  
    renderScene();
};



function renderScene() { //Does the rendering
    stats.update();

    /*      COPE WITH ROTATION      */
    sun.rotation.y = SUN_ANGULAR_ROTAION * acceleratedTime;

    earth.rotation.y = EARTH_ANGULAR_ROTATION * acceleratedTime;



    /*      COPE WITH REVOLUTION    */
    //The Sun doesn't move as its position is 0, 0, 0

    earth.position.x = Math.cos(EARTH_ANGULAR_REVOLUTION * acceleratedTime) * EARTH_SEMI_MAJOR_AXIS;
    earth.position.z = Math.sin(-EARTH_ANGULAR_REVOLUTION * acceleratedTime) * EARTH_SEMI_MAJOR_AXIS;



    /*      COPE WITH CAMERA        */
    //TODO: Work with cameraMode0 and cameraMode3
    if (cameraMode == 0) {
        camera.position.x = earth.position.x + 10000000 * scale;
        camera.position.y = earth.position.y + 10000000 * scale;
        camera.position.z = earth.position.z + 10000000 * scale;

        camera.lookAt(earth.position);
    } else if (cameraMode == 1) { //To Starting Position
        camera.position.x = EARTH_SEMI_MAJOR_AXIS;
        camera.position.y = 1000000000 * scale;
        camera.position.z = 1000000000 * scale;

        camera.lookAt(new THREE.Vector3(EARTH_SEMI_MAJOR_AXIS, 0, 0));
    } else if (cameraMode == 2) { //To Center
        camera.position.x = sun.position.x;
        camera.position.y = sun.position.y + SUN_RADIUS * scale / 50;
        camera.position.z = sun.position.z;

        camera.lookAt(sun.position);
    } else {
        camera.position.x = earth.position.x;
        camera.position.y = 0;
        camera.position.z = 0;

        camera.lookAt(earth.position);
    }

    requestAnimationFrame(renderScene); //The ugly bits

    renderer.autoClear = false;
    renderer.clear();
    renderer.render(backgroundScene, backgroundCamera);
    renderer.render(scene, camera); //The ugly bits
};


//////////////////////////////////
//Initiates the supporting stats//
//////////////////////////////////
function initStats() {
    stats.setMode(0);

    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';

    document.getElementById("Stats-output").appendChild(stats.domElement);

    return stats;
};


//////////////////////////////////
//Defines what happens on resize//
//////////////////////////////////
function onResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
};

Answer 1

这听起来像是深度缓冲区的问题。对数线性和线性z缓冲区之间有一个很好的例子here。他们建议使用对数z缓冲区远距离。看起来你正在塑造行星，所以我认为这可能是你悲伤的根源。

看一下这个例子，看看你的问题是否与这个草图的左侧（普通z缓冲区）类似，如果是这样，你可能只需要使用一个对数z缓冲区，如上面的链接示例所示。希望这有帮助！

模糊物体在彼此面前（THREE.JS）

1 个答案: