Question

我正在使用此处显示的Meshline库：https://github.com/spite/THREE.MeshLine 在我的Three.js场景中添加一个厚x，y，z轴，如下图所示。

在我的three.js剧本中，我有2个摄像头和一个场景。问题是MeshLine出现在第一个摄像头中，但不是第二个，即使有一个场景。

我真的非常感到困惑，为什么会出现这种情况，我无法理解为什么会发生这种情况，因为添加到场景中的所有其他对象都出现在BOTH相机中。

有人可以给我一些关于出了什么问题的指示吗？

我使用以下代码创建粗轴

function addHelpers( size = 200 ) {
        scene.remove( gridHelper, axesHelper );
        gridHelper = new THREE.GridHelper( size, size / 10 );
        gridHelper.rotation.x = 0.5 * Math.PI;
        function makeAxes(){
            // This function makes a thick axis - as Ben requested
            var graph = new THREE.Object3D();
            //var resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
            var resolution = new THREE.Vector2( 100, 50 );
            function makeLine( geo,color) {
                var g = new MeshLine();
                g.setGeometry( geo );
                var material = new MeshLineMaterial( {
                    useMap: false,
                    color: new THREE.Color(color),
                    opacity: 1,
                    resolution: resolution,
                    sizeAttenuation: !false,
                    lineWidth: 0.025
                });
                var mesh = new THREE.Mesh( g.geometry, material );
                mesh.position.set( 0,0,0);
                graph.add( mesh );
            }
            // X axis
            var line = new THREE.Geometry();
            line.vertices.push( new THREE.Vector3( -30, -30, -30 ) );
            line.vertices.push( new THREE.Vector3( 30, -30, -30 ) );
            makeLine( line, 0x009500 );
            // Y axis
            var line = new THREE.Geometry();
            line.vertices.push( new THREE.Vector3(  -30, -30, -30 ) );
            line.vertices.push( new THREE.Vector3( -30, 30, -30 ) );
            makeLine( line, 0x0000ff );
            // Z axis
            var line = new THREE.Geometry();
            line.vertices.push( new THREE.Vector3( -30, -30, -30 ) );
            line.vertices.push( new THREE.Vector3( -30, -30, 30 ) );
            makeLine( line, 0xff0000 );
            return graph
        }
        // Thick axis helper
        axesHelper = makeAxes()
        scene.add(axesHelper)
        scene.add(gridHelper);
    }

当我使用代码启动整个场景时，上面的函数在下面的代码中调用。

function initThreejs() {
    width = 300;
    height = 300;
    renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true }  );
    renderer.setClearColor( 0xffffff, 1 );
    renderer.setSize( width, height );
    renderer.shadowMap.enabled = true;
    context1 = canvasPerspective.getContext( '2d' );
    context2 = canvasOrtho.getContext( '2d' );
    camera1 = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
    camera1.position.set( -100, -250, 200 );
    camera1.up.set( 0, 0, 1 );
    controls = new THREE.OrbitControls( camera1, canvasPerspective );
    controls.maxDistance = 600;
    camera2 = new THREE.OrthographicCamera( width / -3, width / 3, height / 3, 
    height / - 3, 1, 1000 );
    camera2.position.set( 0, 0, 200 );
    camera2.up.set( 0, 0, 1 );
    controls2 = new THREE.OrbitControls( camera2, canvasOrtho );
    scene = new THREE.Scene();
    lightAmbient = new THREE.AmbientLight( 0x444444 );
    scene.add( lightAmbient );
    const size = 100
    lightDirectional = new THREE.DirectionalLight( 0xffeedd );
    lightDirectional.position.set( -size, size, size );
    lightDirectional.shadow.camera.scale.set( 13, 15, 0.5 );
    lightDirectional.castShadow = true;
    scene.add( lightDirectional );
    addHelpers();
    addAssets();
}

如果有用，可以看到整个代码here

Three.js Meshline没有出现在第二台相机中

0 个答案: