Three.js:如何在运行时添加和移除灯光？-6ren

Three.js:如何在运行时添加和移除灯光？

转载作者：行者123 更新时间：2023-12-04 08:27:57

我努力了几天，我的代码有什么问题？ Three.js 不更新灯。我的帮助将得到赞赏，这可能会解决我的问题。
我尝试了以下代码的很多组合，但没有取得任何成功。

function LightFunc(Light){

      scene.remove(spotLight1);
      scene.remove(spotLight2);
      cubeMaterial.needsUpdate=true;
      planeMaterial.needsUpdate=true;

      if (document.getElementById('Light1').checked) {
        spotLight1 = new THREE.SpotLight(0xffffff);
        spotLight1.position.set(15,30,50);
        spotLight1.castShadow = true;
        scene.add(spotLight1);
      }
      if (document.getElementById('Light2').checked) {
        spotLight2 = new THREE.SpotLight(0xffffff);
        spotLight2.position.set(15,30,-50);
        spotLight2.castShadow = true;
        scene.add(spotLight2);
      }
      }

    // step1: how to create scene
    var scene = new THREE.Scene();

    // step2: how to create camera
    var camera = new THREE.PerspectiveCamera(45, 4/3, .1, 500)
    camera.position.set(40,40,40);
    camera.lookAt(scene.position);

    // step3: how to create renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xdddddd);
    renderer.setSize(800, 600);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    // step4: how to create axis
    var axis = new THREE.AxesHelper(10);
    scene.add(axis);

    // step5: how to create color
    var color = new THREE.Color("rgb(255, 0, 0)");

    // step6: how to create grid
    var grid = new THREE.GridHelper(50,5,color,0x000000);
    scene.add(grid);

    // step7: how to create cube
    var cubeGeo = new THREE.BoxGeometry(5,5,5);
    var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff3300});
    var cube = new THREE.Mesh(cubeGeo,cubeMaterial);
    cube.position.set(2.5,2.5,2.5);
    cube.castShadow = true;
    cube.receiveShadow = false;
    scene.add(cube);

    // step8: how to create plane
    var planeGeo = new THREE.PlaneGeometry(30,30,30);
    var planeMaterial = new THREE.MeshLambertMaterial({color:0x00ff00});
    var plane = new THREE.Mesh(planeGeo,planeMaterial);
    plane.rotation.x = -.5*Math.PI;
    plane.receiveShadow = true;
    scene.add(plane);

    // step9: how to create spot lights

    var spotLight1 = new THREE.SpotLight(0xffffff);
    spotLight1.position.set(15,30,50);
    spotLight1.castShadow = true;
    scene.add(spotLight1);

    var spotLight2 = new THREE.SpotLight(0xffffff);
    spotLight2.position.set(15,30,-50);
    spotLight2.castShadow = true;
    scene.add(spotLight2);

    var canvas = document.getElementById("canvas");
    canvas.appendChild(renderer.domElement);
    renderer.render(scene,camera);

<html>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
    <body>
      <div id="canvas" width="800px" height="600px"></div>
      <div>
        <input type="checkbox" id="Light1" name="Light1" value="Light1" onchange="LightFunc();" checked >
        <label for="Light1"> Light1</label><br>
        <input type="checkbox" id="Light2" name="Light2" value="Light2" onchange="LightFunc();" checked >
        <label for="Light2"> Light2</label><br>
      </div>
    </body> 
</html>

最佳答案

由于场景中没有动画循环，因此在更改灯光设置时必须再次渲染它。

function LightFunc(Light){

      scene.remove(spotLight1);
      scene.remove(spotLight2);
      cubeMaterial.needsUpdate=true;
      planeMaterial.needsUpdate=true;

      if (document.getElementById('Light1').checked) {
        spotLight1 = new THREE.SpotLight(0xffffff);
        spotLight1.position.set(15,30,50);
        spotLight1.castShadow = true;
        scene.add(spotLight1);
      }
      if (document.getElementById('Light2').checked) {
        spotLight2 = new THREE.SpotLight(0xffffff);
        spotLight2.position.set(15,30,-50);
        spotLight2.castShadow = true;
        scene.add(spotLight2);
      }
      renderer.render(scene,camera); // FIX
      }

    // step1: how to create scene
    var scene = new THREE.Scene();

    // step2: how to create camera
    var camera = new THREE.PerspectiveCamera(45, 4/3, .1, 500)
    camera.position.set(40,40,40);
    camera.lookAt(scene.position);

    // step3: how to create renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xdddddd);
    renderer.setSize(800, 600);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    // step4: how to create axis
    var axis = new THREE.AxesHelper(10);
    scene.add(axis);

    // step5: how to create color
    var color = new THREE.Color("rgb(255, 0, 0)");

    // step6: how to create grid
    var grid = new THREE.GridHelper(50,5,color,0x000000);
    scene.add(grid);

    // step7: how to create cube
    var cubeGeo = new THREE.BoxGeometry(5,5,5);
    var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff3300});
    var cube = new THREE.Mesh(cubeGeo,cubeMaterial);
    cube.position.set(2.5,2.5,2.5);
    cube.castShadow = true;
    cube.receiveShadow = false;
    scene.add(cube);

    // step8: how to create plane
    var planeGeo = new THREE.PlaneGeometry(30,30,30);
    var planeMaterial = new THREE.MeshLambertMaterial({color:0x00ff00});
    var plane = new THREE.Mesh(planeGeo,planeMaterial);
    plane.rotation.x = -.5*Math.PI;
    plane.receiveShadow = true;
    scene.add(plane);

    // step9: how to create spot lights

    var spotLight1 = new THREE.SpotLight(0xffffff);
    spotLight1.position.set(15,30,50);
    spotLight1.castShadow = true;
    scene.add(spotLight1);

    var spotLight2 = new THREE.SpotLight(0xffffff);
    spotLight2.position.set(15,30,-50);
    spotLight2.castShadow = true;
    scene.add(spotLight2);

    var canvas = document.getElementById("canvas");
    canvas.appendChild(renderer.domElement);
    renderer.render(scene,camera);

<html>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
    <body>
      <div id="canvas" width="800px" height="600px"></div>
      <div>
        <input type="checkbox" id="Light1" name="Light1" value="Light1" onchange="LightFunc();" checked >
        <label for="Light1"> Light1</label><br>
        <input type="checkbox" id="Light2" name="Light2" value="Light2" onchange="LightFunc();" checked >
        <label for="Light2"> Light2</label><br>
      </div>
    </body> 
</html>

关于Three.js:如何在运行时添加和移除灯光？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65172836/

文章推荐： node.js - Mongoose findOne() 不是函数

文章推荐： Java，在游戏中为敌人的波浪制作和放置循环的最佳方法

Threejs入门-灯光
在 Three.js 中，灯光是非常重要的元素之一，它能够模拟现实世界中的光照效果，帮助我们打造更加真实的三维场景。灯光的种类和配置方式可以影响整个场景的视觉效果，在不同的应用中，灯光的使用非常关键。
Android中通知Notification使用实例（振动、灯光、声音）
本文实例讲解了通知notification使用方法，此知识点就是用作通知的显示，包括振动、灯光、声音等效果，分享给大家供大家参考，具体内容如下效果图： mainactivity:
c++ - GLSL 灯光/高光随相机移动
VC++ 2010、OpenGL、GLSL、SDL 我正在转向着色器，遇到了最初在使用 ogl 管道时出现的问题。也就是说，光的位置似乎指向我的相机面向的任何方向。在 ogl 管道中，它只是镜面高光，
Android:推送通知没有声音/振动/灯光
我在收到通知时听不到声音、振动或灯光。有人可以告诉我我缺少什么吗？还有一些问题: 1.) 我只在应用程序打开时得到指定的图标。当应用程序关闭时，我会看到 android Logo 图标(我想那是因为
java - LWJGL GLSL 3D 灯光
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
canvas - Three.js:菲涅尔着色器 - 灯光:真正的问题
我对three.js 示例有一个小问题fresnel shader . 'lights : true' - 如果这是 'true' 那么我会收到以下错误: Uncaught TypeError: Ca
c# - 灯光 USB OpenDMX FTD2XX DMXking
几个简单的问题。我有一个正在尝试控制的 DMX king USB 照明 Controller 。它基于 Open DMX 协议(protocol)(来自 Entec)，提供了一个 c# 类。我已将设

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Three.js:如何在运行时添加和移除灯光？