如何在threejs地图上固定、渲染图像答案

【问题标题】：How to pin, rener, an image on an threejs map如何在threejs地图上固定、渲染图像
【发布时间】：2014-07-08 01:37:51
【问题描述】：

所以，现在我有一个加载了 three.js 的 3D 地图（带有鼠标交互）。我还在“地图上”放置了一个图像（绝对定位），但是当然，当我移动地图时，图像不会随之移动。那么，我怎样才能将图像“渲染”、“固定”……将图像“渲染”到地图上，使其与相机一起移动？

我一直在研究 angularjs、css3drendere，但我没有让它们工作：s

有人可以帮我吗？

非常感谢！

【问题讨论】：

尝试将对象添加为地图的子对象：map.add( object )。或者，保持地图静止并移动相机。如果您仍然有问题，请展示您的代码的实时示例并提出具体问题。
感谢您的快速回复！这可以完成这项工作（将它们添加为对象吗？）stackoverflow.com/questions/19426559/…
在不知道自己在做什么的情况下很难为您提供帮助。如果你愿意，你可以编辑这个小提琴：jsfiddle.net/9GudA.
我想要这样的东西：dewmap.com/#/experiment/world-connections 或 google.com/zeitgeist/2012/#explore（地图上的标记（与地图一起移动）。JSFiddle 正在启动！
见stemkoski.github.io/Three.js/Labeled-Geometry.html

标签： javascript three.js

【解决方案1】：

我最终是如何做到的：

// ADD SPRITES FOR MARKERS
var pin = THREE.ImageUtils.loadTexture( 'pin.png' );

var marker = new THREE.SpriteMaterial( { map: pin } );
var sprite = new THREE.Sprite( marker );
sprite.position.set( 1.3, 1.9, -1.7 );
sprite.scale.set(0.2, 0.6, 0.5 );

var marker = new THREE.SpriteMaterial( { map: pin } );
var sprite1 = new THREE.Sprite( marker );
sprite1.position.set( -2.3, 1.9, -1.9 );
sprite1.scale.set(0.2, 0.6, 0.5 );

//Group the markers to set them relative to the map
    group = new THREE.Object3D;
    group.add(sprite);
    group.add(sprite1);
    scene.add(group);

【讨论】：