threejs 全景区加可点击标注

<template>

    <div class="test-wrapper" id="container">

        <el-dialog :visible.sync="dialogVisible">

            {{pointName}}

        </el-dialog>

    </div>

</template>

 

<script>

import * as THREE from "three";

 

import qjt from "@/assets/threejs/p2.png";

import Icon from "@/assets/threejs/test1.png";

 

var OrbitControls = require('three-orbit-controls')(THREE)

 

var camera, scene, renderer,controls;

var cameraOrtho, sceneOrtho;

var _sprites = [];

var _lables = [];

var clickableObjects = [];

var _pRadius = 100;

var _raycaster;

var _mouse = new THREE.Vector2();

var containerWidth, containerHeight;

 

export default {

    name: "test",

    data() {

        return {

            pointList:[

                {

                    id:1,

                    name:'aaa',

                    lon:120,

                    lat:0,

                },

                {

                    id:2,

                    name:'bbbb',

                    lon:120,

                    lat:10,

                }

            ],

            rotateSpeed:1,

            pointName:'',

            dialogVisible:false,

        };

    },

    mounted() {

        this.$nextTick(() => {

            this.init();

            this.animate();

        })

       

    },

    methods: {

        init() {

 

            

            let container = document.getElementById('container');

 

            containerWidth = container.clientWidth;

            containerHeight = container.clientHeight;

 

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(

                75,

                containerWidth / containerHeight,

                0.1,

                1000

            );

 

            var width = containerWidth;

            var height = containerHeight;

            cameraOrtho = new THREE.OrthographicCamera(

                -width / 2,

                width / 2,

                height / 2,

                -height / 2,

                1,

                10

            );

            cameraOrtho.position.z = 10;

 

            sceneOrtho = new THREE.Scene();

 

            var geometry = new THREE.SphereBufferGeometry(100, 60, 40);

            geometry.scale(-1, 1, 1);

 

            var texture = new THREE.TextureLoader().load(qjt);

            var material = new THREE.MeshBasicMaterial({ map: texture });

 

            let mesh = new THREE.Mesh(geometry, material);

 

            scene.add(mesh);

 

            camera.position.z = 50;

 

            renderer = new THREE.WebGLRenderer();

            renderer.setSize(containerWidth, containerHeight);

            renderer.autoClear = false;

            container.appendChild(renderer.domElement);

 

            controls = new OrbitControls(camera, renderer.domElement);

            controls.enablePan = false;

            controls.maxDistance = 100;

            controls.autoRotate = true;

            controls.autoRotateSpeed = this.rotateSpeed;

 

            this.loadPoint();

 

            _raycaster = new THREE.Raycaster();

 

            document.addEventListener("mousedown", this.onMouseDown, false);

 

        },

        animate() {

            requestAnimationFrame(this.animate);

            this.update();

            

        },

        update(){

            controls.update();

            this.renderSprites();

            renderer.render(scene, camera);

            renderer.render(sceneOrtho, cameraOrtho);

        },

        loadPoint(){

            this.pointList.forEach(item => {

                _sprites.push(this.createSprite(item));

            })

        },

        createSprite(item) {

            var textureLoader = new THREE.TextureLoader();

            var ballMaterial = new THREE.SpriteMaterial({

                map: textureLoader.load(Icon)

            });

            var sp1 = {

                lon: item.lon,

                lat: item.lat,

                name: item.name,

                sprite: new THREE.Sprite(ballMaterial)

            };

            sp1.sprite.scale.set(1, 1, 1);

            sp1.sprite.position.set(0, 0, 0);

            sp1.sprite.name = item.name;

            sceneOrtho.add(sp1.sprite);

            clickableObjects.push(sp1.sprite);

            return sp1;

        },

        geoPosition2World(lon, lat) {

            lat = Math.max(-85, Math.min(85, lat));

            var phi = THREE.Math.degToRad(90 - lat);

            var theta = THREE.Math.degToRad(lon);

 

            var result = {

                x: _pRadius * Math.sin(phi) * Math.cos(theta),

                y: _pRadius * Math.cos(phi),

                z: _pRadius * Math.sin(phi) * Math.sin(theta)

            };

            return new THREE.Vector3(result.x, result.y, result.z);

        },

        worldPostion2Screen(world_vector, camera) {

            var vector = world_vector.clone();

            vector.project(camera);

            var result = {

                x: Math.round((vector.x + 1) * containerWidth / 2 - containerWidth / 2),

                y: Math.round(containerHeight / 2 - (-vector.y + 1) * containerHeight / 2),

                z: 0

            };

            return new THREE.Vector3(result.x, result.y, result.z);

        },

        renderSprites(){

            for (var i = 0; i < _sprites.length; i++) {

                var wp = this.geoPosition2World(_sprites[i].lon, _sprites[i].lat);

                var sp = this.worldPostion2Screen(wp, camera);

                var test = wp.clone();

                test.project(camera);

                if (test.x > -1 && test.x < 1 && test.y > -1 && test.y < 1 && test.z > -1 && test.z < 1) {

                    _sprites[i].sprite.scale.set(24, 24, 1.0);

                    _sprites[i].sprite.position.set(sp.x, sp.y, 1);

                } else {

                    _sprites[i].sprite.scale.set(1.0, 1.0, 1.0);

                    _sprites[i].sprite.position.set(0, 0, 0);

                }

            }

        },

        onMouseDown(event){

            controls.autoRotateSpeed = 0;

            _mouse.x = event.clientX / containerWidth * 2 - 1;

            _mouse.y = -(event.clientY / containerHeight) * 2 + 1;

            _raycaster.setFromCamera(_mouse, cameraOrtho);

            var intersects = _raycaster.intersectObjects(clickableObjects);

            if(intersects != null && intersects.length > 0){

                this.pointName = intersects[0].object.name;

                this.dialogVisible = true;

            }else{

                this.dialogVisible = false;

            }

        }

    }

};

</script>

 

<style lang="less" scoped>

.test-wrapper {

    height: 100vh;

}

</style>