Question

我试图在threejs中绘制三维曲线平面，但出了点问题。我的曲线平面看起来不像曲线平面：不会自己投射阴影，我也看不到任何粗糙度，而且有些顶点没有显示。但是当我在材料上打开线框时 - 我看到，我的飞机真的是曲线。

如果我打开线框，图片看起来像这样：

但是当我关闭线框时 - 它看起来不像曲线而且有些点消失了

网格代码：

web: java -Dserver.port=$PORT $JAVA_OPTS -jar target/countries-1.0-SNAPSHOT.jar

相机代码：

import MeshesDB from '../../databases/meshes';
import scene from '../globals/scene';
import THREE from 'three';

import config from 'config';

import gui from '../debug/dat-gui';

MeshesDB.GetByName('ground', config.coords.boxCoords.lat, config.coords.boxCoords.lon).then(
    /**
     * @param {MeshGeometry} geometryData
     */
    function (geometryData) {
        "use strict";

        // let material = new THREE.MeshPhongMaterial({color: 0x56b65a, wireframe: true});
        // var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x050505 } );
        let material = new THREE.MeshLambertMaterial({wireframe: true, color: 0xcd5c5c});

        // geometryData.vertices.forEach((x) => {
        //     x.normalize();
        // });
        let mesh = new THREE.Mesh(geometryData, material);

        console.log(mesh);

        scene.add(mesh);

        if (config.debug) {
            let meshGuiConfig = {
                set color (val) {
                    mesh.material.color && mesh.material.color.setHex(val);
                },
                get color () {
                    return mesh.material.color && mesh.material.color.getHex() || 0xffffff;
                },

                set wireframe(val) {
                    mesh.material.wireframe = val;
                },
                get wireframe () {
                    return mesh.material.wireframe;
                }
            };

            let guiFolder = gui.addFolder('Dummy Ground');
            guiFolder.addColor(meshGuiConfig, 'color');
            guiFolder.add(meshGuiConfig, 'wireframe');
            guiFolder.add(mesh, 'receiveShadow');
            guiFolder.add(mesh, 'castShadow');
        }
    }
);

光明代码：

import THREE from 'three';
import scene from './scene';

import config from 'config';
import gui from '../debug/dat-gui';

let width = window.innerWidth,
    height = window.innerHeight;

let camera = new THREE.PerspectiveCamera(45, width / height, 1, 1e4);
camera.position.z = 7e3;

scene.add(camera);

console.log(camera);

if (config.debug) {
    let cameraFolder = gui.addFolder('Camera');

    let cameraRotationFolder = cameraFolder.addFolder('Rotation');

    let rotationConfig = {
        set rotationX(val) {
            "use strict";
            camera.rotation.x = val * Math.PI / 180;
        },
        get rotationX() {
            "use strict";
            return camera.rotation.x * 180 / Math.PI;
        },
        set rotationY(val) {
            "use strict";
            camera.rotation.y = val * Math.PI / 180;
        },
        get rotationY() {
            "use strict";
            return camera.rotation.y * 180 / Math.PI;
        },
        set rotationZ(val) {
            "use strict";
            camera.rotation.z = val * Math.PI / 180;
        },
        get rotationZ() {
            "use strict";
            return camera.rotation.z * 180 / Math.PI;
        }
    }

    cameraRotationFolder.add(rotationConfig, 'rotationX', -90, 90);
    cameraRotationFolder.add(rotationConfig, 'rotationY', -90, 90);
    cameraRotationFolder.add(rotationConfig, 'rotationZ', -90, 90);

    let cameraLookAtFolder = cameraFolder.addFolder('Look At');

    let lookAtVector = new THREE.Vector3();
    cameraLookAtFolder.add(lookAtVector, 'x', -10000, 10000);
    cameraLookAtFolder.add(lookAtVector, 'y', -10000, 10000);
    cameraLookAtFolder.add(lookAtVector, 'z', -10000, 10000);

    lookAtVector.look = function () {
        "use strict";
        camera.lookAt(lookAtVector);
    };
    cameraLookAtFolder.add(lookAtVector, 'look');
}

export default camera;

创建渲染器的代码：

import config from 'config';
import gui from '../debug/dat-gui';

import THREE from 'three';
import scene from './scene';

let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 2500, 0 );

scene.add(hemiLight);

let dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 500 );
scene.add( dirLight );

if (config.debug) {
    let lightFolder = gui.addFolder('light');

    let hemiLightFolder = lightFolder.addFolder('Hemi-Light');

    let colorHemi = {
        set skyColor(val) {
            "use strict";
            hemiLight.color.setHex(val);
        },
        get skyColor() {
            "use strict";
            return hemiLight.color.getHex();
        },
        set groundColor(val) {
            "use strict";
            hemiLight.groundColor.setHex(val);
        },
        get groundColor() {
            "use strict";
            return hemiLight.groundColor.getHex();
        }
    };

    hemiLightFolder.addColor(colorHemi, 'skyColor');
    hemiLightFolder.addColor(colorHemi, 'groundColor');

    hemiLightFolder.add(hemiLight.position, 'x', -10000, 10000);
    hemiLightFolder.add(hemiLight.position, 'y', -10000, 10000);
    hemiLightFolder.add(hemiLight.position, 'z', -10000, 10000);

    let dirLightFolder = lightFolder.addFolder('Directional-Light');

    let colorDir = {
        set color(val) {
            "use strict";
            hemiLight.color.setHex(val);
        },
        get color() {
            "use strict";
            return hemiLight.color.getHex();
        }
    };

    dirLightFolder.addColor(colorDir, 'color');

    dirLightFolder.add(dirLight.position, 'x', -10000, 10000);
    dirLightFolder.add(dirLight.position, 'y', -10000, 10000);
    dirLightFolder.add(dirLight.position, 'z', -10000, 10000);
}

export default null;

我试图将我的所有向量标准化，但它没有帮助。但是这个截图的边框：

import THREE from 'three';

let appElement = document.getElementById('app');

let renderer = new THREE.WebGLRenderer();

let clientRect = appElement.getBoundingClientRect();

renderer.setSize(clientRect.width, clientRect.height);

app.appendChild(renderer.domElement);

console.info('renderer', renderer);

export default renderer;

抱歉这么多代码和我的英文）

threejs地面网格本身并没有投射阴影，看起来像

0 个答案: