我正在学习使用＆＃34; three.js＆＃34;图书馆。我可以通过将鼠标移到它上面来改变球体的颜色，但我不能得到名称为＃34; ESFERA＆＃34;当我这样做的时候。浏览器控制台不会返回任何错误。
我是这个图书馆的新手。我花了很多时间在互联网上查看示例和代码。
<!DOCTYPE html>
<html>
<head>
<title>Ratón y objeto con Three.js.</title>
<script type="text/javascript" src="../three.js"></script>
<script type="text/javascript" src="../jquery-1.9.0.js"></script>
<script type="text/javascript" src="../Projector.js"></script>
<style>
/* Configurar margin a 0 y overflow hidden, para ocupar pantalla completa. */
margin:0;
overflow:hidden;
</style>
</head>
<body>
<!-- "div" que contendrá la salida. -->
<div id="WebGL-salida">
</div>
<!-- "script" que ejecuta nuestros ejemplos Three.js. -->
<script type="text/javascript">
// Una vez que todo ha sido cargado, ejecutamos nuestro contenido Three.js.
$(function() {
// Declaración de variables como globales.
var scene, camera, renderer, axes, raycaster;
var canvas1, context1, texture1, sprite1;
var mouse = {x:0, y:0};
var projector, INTERSECTED, sphere;
// Llamada a la función "init()"".
init();
// Llamada a la función "animate()".
animate();
// Lamada del afunción "Render()".
render();
function init() {
// Creación de una escena.
scene = new THREE.Scene();
// Creación de una cámara.
// PerspectiveCamera(campo de visión, relación de aspecto(ancho del elemento/altura), plano de recorte cercano, plano de recorte lejano)
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 20000);
// Creación de un render.
renderer = new THREE.WebGLRenderer();
// Dar color al renderer.
renderer.setClearColor(0xEEEEEE, 1); // color blanco
// Especificar el ancho y el alto del renderer.
renderer.setSize(window.innerWidth, window.innerHeight);
// Añadir la salida de la renderización al elemento html.
$("#WebGL-salida").append(renderer.domElement);
// Ejes de ayuda para situar los elementos.
axes = new THREE.AxisHelper(20);
// Añadir los ejes de ayuda a la escena.
// (x, y, z) = (rojo, verde, azul)
scene.add(axes);
// Definir la esfera.
// SphereGeometry(radio esfera, ancho segemento, altura segmento)
var sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
// Decidimos como se verá la esfera.
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff}); // color azul
// Creamos un objeto tipo esfera.
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// Posicionamos la esfera en la escena.
sphere.position.x = 0;
sphere.position.y = 0;
sphere.position.z = 0;
// Añadimos un nombre al objeto creado.
sphere.name = "ESFERA";
// Añadimos la esfera a la escena.
scene.add(sphere);
// Posicionamos la cámara y la apuntamos al centro de la escena.
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 50;
camera.lookAt(scene.position);
projector = new THREE.Projector();
// Cuando se mueve el ratón llamamos a la función"onDocumentMouseMove()".
document.addEventListener('mousemove', onDocumentMouseMove, false);
// Dibujar el texto en un objeto canvas.
// Crear un elemento canvas.
canvas1 = document.createElement("canvas");
context1 = canvas1.getContext("2d");
context1.font = "Bold 20px Arial";
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillText("Hello world!", 0, 0);
// El contenido del elemento canvas será utilizado por un elemento de textura.
texture1 = new THREE.Texture(canvas1);
texture1.minFilter = THREE.LinearFilter;
texture1.needsUpdate = true;
// Añadir el elemento canvas al sprite.
var spriteMaterial = new THREE.MeshBasicMaterial({map: texture1});
// Creación del sprite.
sprite1 = new THREE.Sprite(spriteMaterial);
// Tamaño del sprite.
sprite1.scale.set(200, 100, 1);
// Posición del sprite.
sprite1.position.set(10, 10, 10);
// Añadimos el sprite a la escena.
scene.add(sprite1);
};
function onDocumentMouseMove(event) {
// Cambiamos de posición el sprite creado.
sprite1.position.set(event.clientX, event.clientY-20,0);
// Calculamos la nueva posición del ratón.
mouse.x = (event.clientX/window.inneWidth)*2-1;
mouse.y = -(event.clientY/window.innerHeight)*2+1;
}
function animate() {
requestAnimationFrame(animate);
update();
render();
}
function update() {
var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
vector.unproject(camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(scene.children);
if(intersects.length >0) {
if(INTERSECTED != intersects[0].object) {
if(INTERSECTED) {
INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
}
INTERSECTED = intersects[0].object;
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
INTERSECTED.material.color.setHex(0xffff00);
if(intersects[0].object.name) {
console.log("dentro");
context1.clearRect(0, 0, 640, 480);
var message = intersects[0].object.name;
var metrics = context1.measureText(message);
var width = metrics.width;
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillRect(0, 0, width+8, 20+8);
context1.fillStyle = "rgba(255,255,255,0.95)";
context1.fillRect(2, 2, width+4, 20+4);
context1.fillStyle = "rgba(0,0,0,1)";
context1.fillText(message, 4, 20);
texture1.needsUpdate = true;
}else{
console.log("fuera");
context1.clearRect(0, 0, 300, 300);
texture1.needsUpdate = true;
}
}
}else{
if(INTERSECTED) {
INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
}
INTERSECTED = null;
context1.clearRect(0, 0, 300, 300);
texture1.needsUpdate = true;
}
}
// Renderizar la escena.
function render() {
renderer.render(scene, camera);
}
})
</script>
</body>
拜托，您能告诉我错误的位置，指出我必须修改或添加的代码吗？
请勿将我发送到其他页面。
提前致谢!!!!