Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

通过threelayer添加的mesh 摄像头camera拉进后 就看不到了 这个能设置吗? #654

Open
lzp0070007 opened this issue Nov 21, 2024 · 1 comment

Comments

@lzp0070007
Copy link

59fc1ffdd760f7308c0abe4b713b3a2e
c07f40888d912af797c99f8bc6fdda85

import * as maptalks from 'maptalks-gl';
import {Map} from 'maptalks-gl';
import * as THREE from "three";
import { ThreeLayer } from 'maptalks.three';
let mapJson = {
"jsonVersion": "1.0",
"version": "1.0.0-rc.37",
"extent": {
"xmin": 116.31077070024332,
"ymin": 39.89915188371421,
"xmax": 116.48759952917067,
"ymax": 40.01652811695956
},
"options": {
"spatialReference": {},
"zoomable": true,
"draggable": true,
"center":{
"x": 116.402337,
"y": 39.92069,
},
"zoom": 16,
"bearing": 0,
"pitch": 60,
},
"layers": [
{
"type": "GroupGLLayer",
"id": "group",
"layers": [
{
"type": "TileLayer",
"id": "baseLayer",
"options": {
"urlTemplate":"http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
// "urlTemplate": 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
// "subdomains":['a', 'b', 'c', 'd'],
"name": "高德影像",
}
},
{
"type": "GLTFLayer",
"id": "gltfLayer",
"options": {

                },
                "geometries": [
                    {
                        "coordinates": {
                            "x": 116.15790473091014,
                            "y": 39.91498445582553,
                            "z": 100
                        },
                        "type":"GLTFMarker",
                        "options": {
                            "symbol": {
                                "url": "http://192.168.201.162:9000/digital/SW_1724203727404.glb",
                            },
                            "id": "28400b9e186a9de7f0cd4a39ddbbc0cf",
                        },
                        "zoomOnAdded": 18.18655978976315
                    }
                ]
            }
        ],
    }
]

}

let map = new Map.fromJSON("map", mapJson);
let groupLayer = map.getLayer("group");
let gltfLayer = groupLayer.getLayer("gltfLayer");

var threeLayer = new ThreeLayer('t', {
forceRenderOnMoving: true,
forceRenderOnRotating: true,
animation: true
});
threeLayer.prepareToDraw = function (gl, scene, camera) {
camera.near = 0.0;
camera.far = 10000000;
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, -10, 10).normalize();
scene.add(light);
scene.add(new THREE.AmbientLight('#fff', 0.3));
loadTexture();
let coordinates = [
[
[116.402337,39.92069],
[116.405248,39.920815],
[116.405194,39.918975],
[116.401906,39.918795],
[116.402337,39.92069]
]
]
createPolygon(new maptalks.Polygon(coordinates));
createWall(new maptalks.LineString(coordinates[0]));

let roadCoordinates =[
    [116.40049952294427, 39.91701556171034],
    [116.40285638830423, 39.917042708594806],
    [116.40475162063436, 39.917190069799304],
    [116.40468534843546, 39.918339456018906]
]
createRoad(new maptalks.LineString(roadCoordinates))


animation();

};
threeLayer.addTo(groupLayer);

let material = new THREE.MeshPhongMaterial({ color: '#ffff00' });
let material1 = new THREE.MeshPhongMaterial({ color: '#ffffff' });
let material2 = new THREE.MeshPhongMaterial({ color: '#00fff' });
function createPolygon(polygon){

let options = {
    height : 10,
    bottomHeight : 1,
    // topColor : '#ff0000',
    // bottomColor : '#0000ff',
    // key : "11111"
}

let extrudePolygon = threeLayer.toExtrudePolygon(polygon, options, material);
threeLayer.addMesh(extrudePolygon);

}
function createWall(lineString) {

let wall = threeLayer.toExtrudeLine(
    lineString,
    {height:10, bottomHeight : 1,width: 5},
    material1,
);
threeLayer.addMesh(wall);

}

function createRoad(lineString) {

let roadExtrude = threeLayer.toExtrudeLine(
    lineString,
    {height:4.9, bottomHeight : 5,width: 20,cornerRadius: 1,},
    material1,
);
threeLayer.addMesh(roadExtrude);
var road = threeLayer.toPath(lineString, {
    altitude: 10,
    cornerRadius: 1,
    width: 15,
    // asynchronous: true ,
    // bottomHeight:110,
}, material2);
threeLayer.addMesh(road);

}

function loadTexture(){
const textureLoader = new THREE.TextureLoader();
textureLoader.load("./wall.jpg", (texture) => {
texture.needsUpdate = true; //使用贴图时进行更新
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
// texture.repeat.set(0.002, 0.002);
texture.repeat.set(1, 1);
material.map = texture;
material.needsUpdate = true;
});

textureLoader.load("./green.jpg", (texture) => {
    texture.needsUpdate = true; //使用贴图时进行更新
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    // texture.repeat.set(0.002, 0.002);
    // texture.repeat.set(6, 3);
    material1.map = texture;
    material1.needsUpdate = true;
});

textureLoader.load("./NW_DX_TT_004.jpg", (texture) => {
    texture.needsUpdate = true; //使用贴图时进行更新
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    // texture.repeat.set(0.002, 0.002);
    // texture.repeat.set(6, 3);
    material2.map = texture;
    material2.needsUpdate = true;
});

}
function animation(){
threeLayer._needsUpdate = !threeLayer._needsUpdate;
if (threeLayer._needsUpdate) {
threeLayer.redraw();
}
requestAnimationFrame(animation);
}

@fuzhenn
Copy link
Member

fuzhenn commented Nov 25, 2024

@deyihu

@fuzhenn fuzhenn transferred this issue from maptalks/issues Nov 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants