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

Three.js onHover/onMouseOver interactive mesh

webgl, event

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 9452
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var container = document.getElementById('container');
var camera, scene, raycaster, renderer;
var mouse = new THREE.Vector2(),
    INTERSECTED;
var selection = null;

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 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);

编译

CSS

HTML

Three.js onHover/onMouseOver interactive mesh

webgl, event

编辑器支持Emmet

快捷键

Three.js onHover/onMouseOver interactive mesh

webgl, event

HTML5 WebGL 基于Three.js实现的一个可复用3D烟雾界面组件

HTML5 Three.js读取Kinect数据并在网页呈现（人体摇头晃脑动作的捕捉数据3D可视化）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：