three.js - 我无法在 JSFiddle 中输入 dat.gui-6ren

three.js - 我无法在 JSFiddle 中输入 dat.gui

转载作者：行者123 更新时间：2023-12-04 15:26:52

我编写的代码在我的系统上本地运行时可以完美运行。

这是链接: https://jsfiddle.net/rand0mus3r/L3j7kz5a/

当您单击网格时，会出现一个 dat.gui 实例。但是，当我使用退格键或尝试在文本框中输入内容时，它不起作用。

虽然它在我的系统中运行良好。

这是代码:

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.02 - First Scene</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

</body>
</html>




window.onload = init();
    animate(); //calling function that does all the rendering 


    //GLOBAL VARS
    var scene, camera, renderer;
    var cube;
    var raycaster, mouse;
    var INTERSECTED;

    //global flag
    var isClicked = false;

    //for the camera
    var controls;

//creating and rendering the GUI
params = {
  yAxis: "0.00001"
}
var gui = new dat.GUI();
gui.add(params, "yAxis").onFinishChange(val => {
  cube.scale.y = parseFloat(val);
}); 

//we make sure to make it hidden
 let vis = gui.domElement.style.visibility;
 gui.domElement.style.visibility = vis == "" ? "hidden" : "";

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        //SET CAMERA
        camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
        camera.position.z = 5;

        // create a render and set the size
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor("#e5e5e5"); //background color
        renderer.setSize(window.innerWidth,window.innerHeight); //size of renderer




        //bind rendered to the dom element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);  


        //RAYCASTER
        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2(1,1);


        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00 }); //0xF7F7F7 = gray
        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.scale.y = 0.00001;
        cube.userData.originalColor = 0xffff00;

        // position the cube
        cube.position.x = 0;
        cube.position.y = 3;
        cube.position.z = 0;
        /*
        //USEFUL METHODS
        cube.rotation.x +=0.5
        cube.scale.x +=0.5
        */
        // add the cube to the scene
        scene.add(cube);


        /*  RENDERING A PLANE
        var geometry = new THREE.PlaneGeometry( 20, 20);
        var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
        var plane = new THREE.Mesh( geometry, material );
        plane.rotation.set(80,0,0);
        scene.add( plane );
        //plane.position.x = 2;
        */

        //ADDING LIGHTS
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);


        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);


        //camera
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.minDistance = 1;
        controls.maxDistance = 1000;

        // when the mouse moves, call the given function
        document.addEventListener('mousemove', onDocumentMouseMove, false);

        //when the mouse is clicked, call the given function
        document.addEventListener('click', onDocumentMouseClick, false);
    }

    function onDocumentMouseMove(event)
    {
      // the following line would stop any other event handler from firing
      // (such as the mouse's TrackballControls)
      event.preventDefault();

      // update the mouse variable
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;


        // calculate objects intersecting the picking ray
        var intersects = raycaster.intersectObjects( scene.children );

        //TRY THIS
        // intersects = raycaster.intersectObject(cube); // to get the cube only

        //if the mouse hovers over the cube mesh, change its color to red
        //when mouse leaves the mesh, change it back to its original color
        //ONLY MAKE THESE MODIFICATION IF THE MESH IS NOT CLICKED
        //BECAUSE IF IT IS CLICKED, YOU HAVE TO PAINT THE MESH ACCORDING TO THE onDocumentMouseClick()
        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            cube.material.color.set( 0xF7F7F7 );    
        } 
        else if (isClicked === false)
        {
            cube.material.color.set( cube.userData.originalColor );
        }

    }

    // 0xff0000 red
    //0xF7F7F7 = gray

    function onDocumentMouseClick(event) //if we detect a click event
    {
        // the following line would stop any other event handler from firing
        // (such as the mouse's TrackballControls)
        event.preventDefault();

        // update the mouse variable
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        // calculate objects intersecting the picking ray
        var intersects = raycaster.intersectObjects( scene.children );

        //if mouse is on top of the mesh when the click occurs, change color of mesh and render GUI
        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            isClicked = true;
            cube.material.color.set( 0xff0000);

/*
            var params = {
                textField: "Enter value:"
            }



                 var item =  gui.add(params, "textField").onFinishChange(function (value) {
                //Do something with the new value
                //console.log(value);
                cube.scale.y +=value;
            });

*/       

//when its clicked, change the visibily of the GUI
 vis = gui.domElement.style.visibility;
    gui.domElement.style.visibility = vis == "" ? "hidden" : "";


        } 
        //if mouse is on top of the mesh when the click occurs, but it already marked as 'clicked', now mark it as 'unclicked'
        else if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === true)
        {
            isClicked = false;
            cube.material.color.set( cube.userData.originalColor );
            //when its clicked, change the visibily of the GUI
            vis = gui.domElement.style.visibility;
            gui.domElement.style.visibility = vis == "" ? "hidden" : "";
   //         gui.__proto__.constructor.toggleHide()
            //dat.GUI.toggleHide();
            //gui.toggleHide()
        }


    }


    function render() 
    {
        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera( mouse, camera );
        renderer.render(scene, camera); //render the scene
    }


    function animate()
    {
        requestAnimationFrame( animate ); //pauses when user switches tab
        controls.update();
        render();
    }

最佳答案

此问题与 OrbitControls 中的错误有关，该错误已通过 r110 修复。将 OrbitControls 升级到 r110 可解决问题。

window.onload = init();
    animate(); //calling function that does all the rendering 
    

    //GLOBAL VARS
    var scene, camera, renderer;
    var cube;
    var raycaster, mouse;
    var INTERSECTED;

    //global flag
    var isClicked = false;

    //for the camera
    var controls;

//creating and rendering the GUI
params = {
  yAxis: 0.00001
}
var gui = new dat.GUI();
gui.add(params, "yAxis").onFinishChange(val => {
  cube.scale.y = val;
}); 

//we make sure to make it hidden
 let vis = gui.domElement.style.visibility;
 gui.domElement.style.visibility = vis == "" ? "hidden" : "";

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        //SET CAMERA
        camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
        camera.position.z = 5;

        // create a render and set the size
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor("#e5e5e5"); //background color
        renderer.setSize(window.innerWidth,window.innerHeight); //size of renderer

        
          

        //bind rendered to the dom element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);  

       
        //RAYCASTER
        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2(1,1);

        
        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00 }); //0xF7F7F7 = gray
        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.scale.y = 0.00001;
        cube.userData.originalColor = 0xffff00;

        // position the cube
        cube.position.x = 0;
        cube.position.y = 3;
        cube.position.z = 0;
        /*
        //USEFUL METHODS
        cube.rotation.x +=0.5
        cube.scale.x +=0.5
        */
        // add the cube to the scene
        scene.add(cube);
        

        /*  RENDERING A PLANE
        var geometry = new THREE.PlaneGeometry( 20, 20);
        var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
        var plane = new THREE.Mesh( geometry, material );
        plane.rotation.set(80,0,0);
        scene.add( plane );
        //plane.position.x = 2;
        */

        //ADDING LIGHTS
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

       
        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);


        //camera
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.minDistance = 1;
        controls.maxDistance = 1000;

        // when the mouse moves, call the given function
        document.addEventListener('mousemove', onDocumentMouseMove, false);

        //when the mouse is clicked, call the given function
        document.addEventListener('click', onDocumentMouseClick, false);
    }

    function onDocumentMouseMove(event)
    {
      // the following line would stop any other event handler from firing
      // (such as the mouse's TrackballControls)
      event.preventDefault();

      // update the mouse variable
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;


        // calculate objects intersecting the picking ray
        var intersects = raycaster.intersectObjects( scene.children );

        //TRY THIS
        // intersects = raycaster.intersectObject(cube); // to get the cube only

        //if the mouse hovers over the cube mesh, change its color to red
        //when mouse leaves the mesh, change it back to its original color
        //ONLY MAKE THESE MODIFICATION IF THE MESH IS NOT CLICKED
        //BECAUSE IF IT IS CLICKED, YOU HAVE TO PAINT THE MESH ACCORDING TO THE onDocumentMouseClick()
        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            cube.material.color.set( 0xF7F7F7 );    
        } 
        else if (isClicked === false)
        {
            cube.material.color.set( cube.userData.originalColor );
        }

    }

    // 0xff0000 red
    //0xF7F7F7 = gray

    function onDocumentMouseClick(event) //if we detect a click event
    {
        // the following line would stop any other event handler from firing
        // (such as the mouse's TrackballControls)
        event.preventDefault();

        // update the mouse variable
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        // calculate objects intersecting the picking ray
        var intersects = raycaster.intersectObjects( scene.children );

        //if mouse is on top of the mesh when the click occurs, change color of mesh and render GUI
        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            isClicked = true;
            cube.material.color.set( 0xff0000);

/*
            var params = {
                textField: "Enter value:"
            }

   
         
                 var item =  gui.add(params, "textField").onFinishChange(function (value) {
                //Do something with the new value
                //console.log(value);
                cube.scale.y +=value;
            });

*/       

//when its clicked, change the visibily of the GUI
 vis = gui.domElement.style.visibility;
    gui.domElement.style.visibility = vis == "" ? "hidden" : "";
          
           
        } 
        //if mouse is on top of the mesh when the click occurs, but it already marked as 'clicked', now mark it as 'unclicked'
        else if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === true)
        {
            isClicked = false;
            cube.material.color.set( cube.userData.originalColor );
            //when its clicked, change the visibily of the GUI
            vis = gui.domElement.style.visibility;
            gui.domElement.style.visibility = vis == "" ? "hidden" : "";
   //         gui.__proto__.constructor.toggleHide()
            //dat.GUI.toggleHide();
            //gui.toggleHide()
        }


    }

    
    function render() 
    {
        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera( mouse, camera );
        renderer.render(scene, camera); //render the scene
    }


    function animate()
    {
        requestAnimationFrame( animate ); //pauses when user switches tab
        controls.update();
        render();
    }

body {
  margin: 0;
}
canvas {
  display: block;

}

<script src="https://cdn.jsdelivr.net/npm/three@0.110/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.110/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<div id="WebGL-output">
</div>

顺便说一句:请始终确保使用来自同一版本的 three.js 文件。在您的演示中，three.js 来自 r110 而 OrbitControls 来自 101.1。此类配置不受支持，并且会产生未定义的行为。

关于three.js - 我无法在 JSFiddle 中输入 dat.gui，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62088099/

文章推荐： python - 在数据探索编码中获取 UnboundLocalError

文章推荐： c# - 异步方法是否有可能在 C# 中返回 null？

VBA 提示输入不带分隔符的 DAT，添加新工作表并导入 DAT
该代码提示用户选择一个 Excel 文件和五个不同的 DAT 文件。 Excel 文件被加载到工作表上，然后应该为每个要导入的 DAT 文件添加新工作表。 Excel 文件正确加载，但程序在第一次尝试
dat.gui - 在 dat.gui 中为属性名称创建别名
我尝试在 Three.js 项目中使用 dat.gui 来允许打开和关闭场景中各种元素的可见属性。从功能上来说，这工作得很好。然而，我遇到的问题是因为我正在为场景中每个 child 的可见属性创建一个
dat.gui - 使用 dat.gui slider 触发轨道控件
我正在构建一个折纸模拟器，我希望能够使用 dat.gui slider “折叠”纸张。我还想包括轨道控制。但是，当我单击 slider 并随后将鼠标移出 dat.gui 窗口时，轨道控件已被触发，导
c - 保存到 C 子文件夹中的文件 (.dat) 或从中读取文件 (.dat)
我基本上试图写入/读取 C 子文件夹中的文件。有问题的文件夹位于 C:/users/me/Test/ 。下面是我的尝试的一个例子。已包含在内。 DIR *dirPS = opendir("/
dat.gui - 使用三个 JS 在 dat.gui 中自定义最小值和最大值
我在 MorphTargets 上使用 dat.gui。默认情况下，GUI 将 0 作为最小值，将 1 作为最大值，我希望它们显示为我各自的值，例如:0 为 10，1 为 20。我该怎么做？最佳答
c - 我做错了什么？下面的代码不会将结构化数据的最后一条记录从 .dat 文件复制到 C 中的另一个 .dat 文件
#include #include struct stud { int rollno; char name[10]; char add[10]; }; void main() {
javascript - 如何更改 dat.GUI 上的 slider 值以及如何重置 dat.GUI
1) 我正在开发一个有 2 个 slider 的 dat.GUI 应用程序。我想在另一个更改时重置一个。例如: var FizzyText = function() { this.slider
javascript - Three.js 中的类型错误 : DAT is undefined when using DAT. gui()
我正在尝试在代码中使用 DAT.gui 来控制 third.js 上的摄像头我在 index.html 文件中包含以下内容。我确保从 build 文件夹获取文件当我在 my.js 文件中使用以
python - 如何将二进制 dat 文件 (.dat) 保存为 png 或 jpg 格式？
我有一个二进制文件格式.dat。我想将其转换为 png 或 jpg 格式，我尝试使用 numpy.loadtxt() 对其进行解码以获取数组列表，然后将其保存为 png 或 jpg 格式。但是当我执行
c# - Visual Studio 2010 解决方案文件夹中的未知 Index.dat 和 Storage.dat 文件
我有一个 Visual Studio 2010 解决方案，一周前两个文件神秘地出现在根解决方案文件夹中，名为 Index.dat 和 Storage.dat。它们的大小分别为 28 字节和 512 字
nginx - GeoIP.dat.gz 和 GeoLiteCity.dat.gz 不再可用？获取 404 尝试加载它
前几天开始下载了 http://geolite.maxmind.com/download/geoip/database/GeoLiteCountry/GeoIP.dat.gz http://geoli
GeoIPCity.dat 文件在哪里可以找到？
我的一个网站上有一个文件 GeoIPCity.day。最初的开发人员告诉我这是来自 maxmind.com 的免费文件，我应该每个月更新它。我查看了 maxmind.com 并没有找到具有完全相同名称
java - dat 文件不是由缓冲写入器创建的
我陷入了一个奇怪的境地，我必须创建一个名为 abc.dat 的 .dat 文件，但问题是，当我创建它时，然后在我的 c: 驱动器中，我检查扩展名为 .dat 的文件没有被创建扩展名为 _auto_fi
python - .dat 文件中的数字时间导数
我有一个很长的 3 列数值数据表。例如，它的一小部分看起来像这样: -5.3986816409999996e+00 8.3394692357616169e-23 2.2891221151890116e
python - 如何用python解析winmail.dat
我正在从服务器上提取带有附件的电子邮件，并根据特定条件将它们放入文件夹中。这对于以纯文本编码发送的电子邮件没有问题，但众所周知，如果它们以富文本格式发送，则附件会转换为 winmail.dat 格式。
php读取qqwry.dat ip地址定位文件的类实例代码
实例如下： php" id="highlighter_878313"> ?
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
如下所示： ? 1
r 读入多个 .dat 文件
嗨，我是新来的，也是 R 的初学者，我的问题: 如果我在 R 中有多个文件(test1.dat，test2.dat，...)可以使用，我使用此代码读取它们 filelist <- list.file
javascript - dat.GUI 创建多个同名按钮
我尝试使用 dat.GUI 创建多个具有相同名称“ShowCoord”的按钮，这可能吗？我目前拥有的是: for (i = 0; i 注意:这只是一个提示，我无法从您的代码中得出更多结论。
r - 如果列名迄今为止包含 'dat'，则进行变异
我有以下 df 其中 num, chr, num dat a idat 1 20200101 h 20200101 2 20200113 g 20200113 3 2020021

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

three.js - 我无法在 JSFiddle 中输入 dat.gui