html鼠标交互,HTML5 Three.js教程：如何实现3D模型的鼠标交互

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

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

var camera, scene, raycaster, renderer;

var mouse = new THREE.Vector2(),

INTERSECTED;

var selection = null;

function createCubes() {

var geometry = new THREE.IcosahedronGeometry(4, 0);

for (var i = 0; i < 100; i++) {

var object = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({

shading: THREE.FlatShading,

wireframe: false,

color: Math.random() * 0xffffff

}));

object.position.x = Math.random() * 200 - 100;

object.position.y = Math.random() * 100 - 50;

object.position.z = Math.random() * 100 - 50;

object.rotation.x = Math.random() * 2 * Math.PI;

object.rotation.y = Math.random() * 2 * Math.PI;

object.rotation.z = Math.random() * 2 * Math.PI;

object.scale.x = Math.random() + 0.5;

object.scale.y = Math.random() + 0.5;

object.scale.z = Math.random() + 0.5;

scene.add(object);

}

}

function init() {

scene = new THREE.Scene();

raycaster = new THREE.Raycaster();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({

alpha: true

});

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

camera.position.set(0, 0, 70);

var light = new THREE.HemisphereLight(0x00faff, 0xff00ff, 1);

light.position.set(0, 250, 10);

scene.add(light);

createCubes();

animate();

document.addEventListener('mousemove', onMouseMove, false);

}

function render() {

requestAnimationFrame(render);

raycaster.setFromCamera(mouse, camera);

var intersects = raycaster.intersectObjects(scene.children);

if (intersects.length > 0) {

if (INTERSECTED != intersects[0].object) {

selection = intersects[0].object;

// resets mesh hex when mouseout

if (selection) selection.material.emissive.setHex(selection.currentHex);

selection.currentHex = selection.material.emissive.getHex();

// setting new hex for hover

selection.material.emissive.setHex(0x999999);

container.style.cursor = "pointer";

console.log('hovering over mesh');

}

} else {

if (selection) {

console.log(selection);

selection.material.emissive.setHex(selection.currentHex);

}

selection = null;

container.style.cursor = "default";

}

renderer.render(scene, camera);

}

function animate() {

render();

}

function onWindowResize() {

renderer.setSize(window.innerWidth, window.innerHeight);

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

}

function onMouseMove(event) {

event.preventDefault();

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

}

function onWindowLoaded() {

init();

}

window.addEventListener('load', onWindowLoaded, false);

window.addEventListener('resize', onWindowResize, false);