three.js入门5——2014.5.28高亮显示

最新推荐文章于 2024-08-08 16:25:46 发布

言多_必失

最新推荐文章于 2024-08-08 16:25:46 发布

阅读量2.6k

点赞数

分类专栏： three.js/webgl

本文链接：https://blog.csdn.net/fly_xiaoyou2015/article/details/27367833

版权

本文介绍了如何使用three.js实现鼠标移动时的高亮显示功能。通过捕获鼠标移动事件，将2D坐标转换为3D坐标，并生成射线与场景交互，找出最近的物体节点并改变其颜色，从而达到高亮效果。

摘要由CSDN通过智能技术生成

已经可以通过改变摄像机来旋转场景了，现在我想尝试下鼠标经过的高亮显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入Three.js-->
        <script src="../build/three.min.js"></script>
        <script type="text/javascript">
            //开启Three.js渲染器
            var renderer; //声明全局变量（对象）
            var projector, mouse = { x: 0, y: 0 }, INTERSECTED;
            function initThree() {
                width = document.getElementById('canvas3d').clientWidth; //获取画布「canvas3d」的宽
                height = document.getElementById('canvas3d').clientHeight; //获取画布「canvas3d」的高
                renderer = new THREE.WebGLRenderer({ antialias: true }); //生成渲染器对象（属性：抗锯齿效果为设置有效）
                renderer.setSize(width, height); //指定渲染器的高宽（和画布框大小一致）