threejs 在鼠标悬停时修改 envMap答案

【问题标题】：threejs modify envMap on mouseoverthreejs 在鼠标悬停时修改 envMap
【发布时间】：2020-03-02 15:33:47
【问题描述】：

我是threejs的新手，我想了解一些关于这个库的知识......但是，在我看来，文档很少。

问题是：

我有一个 SphereGeometry，我想通过鼠标事件给它一些交互性，我正在使用 three.domevent.object3d.js 的“mouseover”和“mouseout”事件来使缩放属性更大或更小。但是当鼠标悬停时我不能修改球体材料，因为没有任何反应。我的代码是：

    sphere.on('mouseover', function(event){
        event.target.scale.x *= 2;
        event.target.scale.y *= 2;
        event.target.scale.z *= 2;
        event.target.material.envMap = textureCube;
        event.target.material.combine = THREE.MixOperation;
        event.target.material.reflectivity = 0.15;
    }).on('mouseout', function(event){
        event.target.scale.x *= 0.5;
        event.target.scale.y *= 0.5;
        event.target.scale.z *= 0.5;
        event.target.material.envMap = null;
        event.target.material.combine = THREE.MixOperation;
        event.target.material.reflectivity = 0;
    });

textureCube是skyboxMesh的一堆jpeg，它的代码是：

var r = "images/";
var urls = [ r + "px.jpg", r + "nx.jpg",
             r + "py.jpg", r + "ny.jpg",
             r + "pz.jpg", r + "nz.jpg" ];

textureCube = THREE.ImageUtils.loadTextureCube( urls );

任何帮助将不胜感激

谢谢

【问题讨论】：

标签： three.js

【解决方案1】：

如果要在材质中添加或删除环境贴图，则必须添加

material.needsUpdate = true;

查看“如何更新内容”文档：https://threejs.org/docs/index.html#manual/en/introduction/How-to-update-things

three.domevent.object3d.js 不是图书馆的一部分，所以我不能对此发表评论。

three.js r.52

【讨论】：