0
JS我知道一點點，我想使用JS函數爲Three.js函數提供標籤。使用JavaScript Creat Threejs標籤方法
在這種情況下，我想創建的每個頂點的標籤。但是，它爲什麼只是創建一個。
update_labels：
function update_labels(vpos) {
var pos = get_screen_xy(vpos , camera);
note.style.display = 'block';
if (pos.x >= x_max) {
note.style.left = '';
note.style.right = x_max - pos.x;
} else {
note.style.right = '';
note.style.left = pos.x;
}
if (pos.y == y_max) {
note.style.top = '';
note.style.bottom = y_max - pos.y;
} else {
note.style.bottom = '';
note.style.top = pos.y;
}
}
get_screen_xy：
function get_screen_xy(position, camera) {
var pos = position.clone();
projScreenMat = new THREE.Matrix4();
projScreenMat.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
pos.applyProjection(projScreenMat);
return { x: (pos.x + 1) * window.innerWidth/2,
y: (- pos.y + 1) * window.innerHeight/2 };
}
使用功能：
function getpos1(){
var notepos1 =objects.geometry.vertices[0];
update_labels(notepos1);
}
function getpos2(){
var notepos2 =objects.geometry.vertices[1];
update_labels(notepos2);
}
function getpos3(){
var notepos1 =objects.geometry.vertices[2];
update_labels(notepos1);
}
function getpos4(){
var notepos2 =objects.geometry.vertices[3];
update_labels(notepos2);
}
function getpos5(){
var notepos1 =objects.geometry.vertices[4];
update_labels(notepos1);
}
function getpos6(){
var notepos2 =objects.geometry.vertices[5];
update_labels(notepos2);
}
function getpos7(){
var notepos1 =objects.geometry.vertices[6];
update_labels(notepos1);
}
function getpos8(){
var notepos2 =objects.geometry.vertices[7];
update_labels(notepos2);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render()
}
function render() {
camera.lookAt(scene.position);
renderer.render(scene, camera);
getpos1();
getpos2();
getpos3();
getpos4();
getpos5();
getpos6();
getpos7();
getpos8();
}
PLZ幫我解決這個問題，非常感謝！
感謝2pha：
我能做到這一點現在 
但是產生了很多相同的代碼，就可以減少一些代碼，我希望能得到一個完美的碼。
我充分代碼在這裏：
<html>
<head>
<title>Demo: Example of how to implement 2D labels for 3D objects using Three.js</title>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
</head>
<body>
<script>
var camera, controls, scene, renderer;
var geometry, material, mesh;
var x_min = 0;
var y_min = 0;
var x_max = window.innerWidth;
var y_max = window.innerHeight;
var x_mid = window.innerWidth/2;
var y_mid = window.innerHeight/2;
var objects = [];
init();
animate();
function init() {
//CAMERA
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.z = 50;
camera.position.x = 25;
camera.position.y = 15;
controls = new THREE.TrackballControls(camera);
controls.addEventListener('change', render);
//RENDER
renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//SCENE
scene = new THREE.Scene();
//LIGHT
var light = new THREE.PointLight(0xff0000, 2.5, 100);
light.position.set(50, 50, 50);
scene.add(light);
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
//MESH
geometry = new THREE.BoxGeometry(20, 20, 20);
sphere = new THREE.SphereGeometry(10, 32, 32);
material = new THREE.MeshPhongMaterial({
color: 0xFF0000 ,
side: THREE.DoubleSide,
specular: 0x222222,
shading:THREE.NoShading,
wireframe:true,
});
objects = new THREE.Mesh(geometry, material);
var vector = objects.geometry.vertices[2];
scene.add(objects);
objects.position.x = 0;
objects.position.y = 0;
objects.position.z = 0;
note = document.createElement('div');
note.innerHTML = '0';
note.style.display = 'none';
note.style.position = 'absolute';
note.style.color = 'white';
note.style.border = '1px';
note.style.borderColor = 'white';
note.style.borderStyle = 'solid';
note.style.borderRadius = '50%';
note.style.padding = '0.5em';
note.style.width = '20px';
note.style.textAlign = 'center';
note.style.background = 'green';
note.style.opacity = '0.8';
document.getElementsByTagName('body')[0].appendChild(note);
note1 = document.createElement('div');
note1.innerHTML = '1';
note1.style.display = 'none';
note1.style.position = 'absolute';
note1.style.color = 'white';
note1.style.border = '1px';
note1.style.borderColor = 'white';
note1.style.borderStyle = 'solid';
note1.style.borderRadius = '50%';
note1.style.padding = '0.5em';
note1.style.width = '20px';
note1.style.textAlign = 'center';
note1.style.background = 'green';
note1.style.opacity = '0.8';
document.getElementsByTagName('body')[0].appendChild(note1);
note2 = document.createElement('div');
note2.innerHTML = '2';
note2.style.display = 'none';
note2.style.position = 'absolute';
note2.style.color = 'white';
note2.style.border = '1px';
note2.style.borderColor = 'white';
note2.style.borderStyle = 'solid';
note2.style.borderRadius = '50%';
note2.style.padding = '0.5em';
note2.style.width = '20px';
note2.style.textAlign = 'center';
note2.style.background = 'green';
note2.style.opacity = '0.8';
document.getElementsByTagName('body')[0].appendChild(note2);
note3 = document.createElement('div');
note3.innerHTML = '3';
note3.style.display = 'none';
note3.style.position = 'absolute';
note3.style.color = 'white';
note3.style.border = '1px';
note3.style.borderColor = 'white';
note3.style.borderStyle = 'solid';
note3.style.borderRadius = '50%';
note3.style.padding = '0.5em';
note3.style.width = '20px';
note3.style.textAlign = 'center';
note3.style.background = 'green';
note3.style.opacity = '0.8';
document.getElementsByTagName('body')[0].appendChild(note3);
}
function getpos1(){
var notepos1 =objects.geometry.vertices[0];
update_labels(notepos1, note);
}
function getpos2(){
var notepos2 =objects.geometry.vertices[1];
update_labels(notepos2, note1);
}
function getpos3(){
var notepos3 =objects.geometry.vertices[2];
update_labels(notepos3, note2);
}
function getpos4(){
var notepos4 =objects.geometry.vertices[3];
update_labels(notepos4, note3);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render()
}
function render() {
camera.lookAt(scene.position);
renderer.render(scene, camera);
getpos1();
getpos2();
getpos3();
getpos4();
}
function update_labels(vpos, note) {
var pos = get_screen_xy(vpos , camera);
note.style.display = 'block';
if (pos.x >= x_max) {
note.style.left = '';
note.style.right = x_max - pos.x;
} else {
note.style.right = '';
note.style.left = pos.x;
}
if (pos.y == y_max) {
note.style.top = '';
note.style.bottom = y_max - pos.y;
} else {
note.style.bottom = '';
note.style.top = pos.y;
}
}
// Get the screen x,y coordinates of the 3D object
// https://github.com/mrdoob/three.js/issues/78#issuecomment-846917
function get_screen_xy(position, camera) {
var pos = position.clone();
projScreenMat = new THREE.Matrix4();
projScreenMat.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
pos.applyProjection(projScreenMat);
return { x: (pos.x + 1) * window.innerWidth/2,
y: (- pos.y + 1) * window.innerHeight/2 };
}
</script>
</body>
</html>