个人中心
gpt4 book ai didi

javascript - 下拉菜单中的 onchange 触发函数，但 Three.js 输出没有变化

转载 作者：行者123 更新时间：2023-12-02 14:59:56 24 4
gpt4 key购买 nike

我正在尝试使用 Three.js 使页面显示绿色或棕色地板，具体取决于下拉列表中的选择。然而，我发现地板图像没有改变，尽管控制确实转到了该功能。

JS fiddle here (虽然我无法上传图片)

代码如下。

<!DOCTYPE html>
<html>
<head>
    <title>Floor change</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<script>

    // global variables
    var renderer;
    var scene;
    var camera;
    var container;

    //controls
    var controls;

    //html elements
    var colorselection = "green";

    function init() {
        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
        SCREEN_WIDTH-=200;
//        SCREEN_HEIGHT -= 100;

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

        // create a camera, which defines where we're looking at.
        camera = new THREE.PerspectiveCamera(45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.1, 1000);

        // create a render, sets the background color and the size
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

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

        // add the output of the renderer to the html element
        document.body.appendChild(renderer.domElement);

        // attach div element to variable to contain the renderer
        container = document.getElementById( 'ThreeJS' );

        // attach renderer to the container div
        container.appendChild( renderer.domElement );
    }

    function floor()
    {
        ///////////
        // FLOOR //
        ///////////

        if(colorselection == "green")
            var floorTexture = new THREE.ImageUtils.loadTexture( 'green.jpg' );
        else if(colorselection == "brown")/*go with 2 for now*/
            var floorTexture = new THREE.ImageUtils.loadTexture( 'brown.png' );
        floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
        floorTexture.repeat.set( 20, 20 );
        // DoubleSide: render texture on both sides of mesh
        var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
        var floorGeometry = new THREE.PlaneGeometry(110, 110, 1, 1);
        var floor = new THREE.Mesh(floorGeometry, floorMaterial);
        floor.position.y = -0.5;
        floor.rotation.x = Math.PI / 2;
        scene.add(floor);

        animate();
    }

    //scheduler loop
    function animate() {
        renderer.render(scene,camera)
        requestAnimationFrame(animate)
    }

    function myfunction()
    {
        colorselection = document.getElementById("mydropdownlist").value;
        console.log("clicked on '"+ colorselection + "'")
        floor();
    }

    // calls the init function when the window is done loading.
    window.onload = init;
</script>
<body>
<script src="js/Three.js"></script>

<div id="ThreeJS" style="z-index: 1; position: absolute; left:0px; top:0px"></div>

<select id="mydropdownlist" onchange="myfunction()">
    <option value="green">green</option>
    <option value="brown">brown</option>
</select>
</body>

<style>
    #mydropdownlist
    {
        position:absolute;
        left:1200px;
        top:20px
    }
</style>

</html>

我已经上传了上面使用的图片brown.png和green.jpg。

brown.png green.jpg

最佳答案

我将你的代码复制到本地.html文件中，将其放入3js的示例目录中，将图片粘贴在那里，然后将 Three.js 的路径更新为默认路径

src="../build/Three.js"

并在 Chrome 中运行它。它起作用了，当我使用下拉菜单时，地板颜色发生了变化。它也适用于 Firefox。

但是我确实发现了一个问题。每次将新的地板网格添加到场景中，但不要删除旧的。我希望在制作新场景之前看到一个 scene.remove(floor) ，这样场景中就不会堆积一堆东西。我还注意到您有一个名为 Floor 的函数和一个名为 Floor 的变量，这可能会引起困惑。

此外，如果您使用 Chrome，如果您想在文件位于本地驱动器而不是 Web 服务器上时查看纹理，则需要使用 --disable-web-security 作为命令行开关。 

<!DOCTYPE html>
<html>
<head>
    <title>Floor change</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<script>

    // global variables
    var renderer;
    var scene;
    var camera;
    var container;


 var floormesh=null; 
    //controls
    var controls;

    //html elements
    var colorselection = "green";

    function init() {
        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
        SCREEN_WIDTH-=200;
//        SCREEN_HEIGHT -= 100;

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

        // create a camera, which defines where we're looking at.
        camera = new THREE.PerspectiveCamera(45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.1, 1000);

        // create a render, sets the background color and the size
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

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

        // add the output of the renderer to the html element
        document.body.appendChild(renderer.domElement);

        // attach div element to variable to contain the renderer
        container = document.getElementById( 'ThreeJS' );

        // attach renderer to the container div
        container.appendChild( renderer.domElement );
    }
    function floor()
    {
        ///////////
        // FLOOR //
        ///////////

        if(colorselection == "green")
            var floorTexture = new THREE.ImageUtils.loadTexture( 'green.jpg' );
        else if(colorselection == "brown")/*go with 2 for now*/
            var floorTexture = new THREE.ImageUtils.loadTexture( 'brown.png' );
        floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
        floorTexture.repeat.set( 20, 20 );
        // DoubleSide: render texture on both sides of mesh
        var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
        var floorGeometry = new THREE.PlaneGeometry(110, 110, 1, 1);
if(floormesh)
    scene.remove(floormesh);

        floormesh = new THREE.Mesh(floorGeometry, floorMaterial);
        floormesh.position.y = -0.5;
        floormesh.rotation.x = Math.PI / 2;
        scene.add(floormesh);

        animate();
    }

    //scheduler loop
    function animate() {
        renderer.render(scene,camera)
        requestAnimationFrame(animate)
    }

    function myfunction()
    {
        colorselection = document.getElementById("mydropdownlist").value;
        console.log("clicked on '"+ colorselection + "'")
        floor();
    }

    // calls the init function when the window is done loading.
    window.onload = init;
</script>
<body>
<script src="../build/Three.js"></script>

<div id="ThreeJS" style="z-index: 1; position: absolute; left:0px; top:0px"></div>

<select id="mydropdownlist" onchange="myfunction()">
    <option value="green">green</option>
    <option value="brown">brown</option>
</select>
</body>

<style>
    #mydropdownlist
    {
        position:absolute;
        left:1200px;
        top:20px
    }
</style>

</html>

关于javascript - 下拉菜单中的 onchange 触发函数，但 Three.js 输出没有变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35500153/

24 4 0
文章推荐： javascript - 使用 React、Redux 和 Immutable.js 创建模式弹出窗口
文章推荐： java - 如何使用 jackson 将 json 文档的额外属性反序列化为 map 或其他字段？
文章推荐： python - Pyodbc - 读取存储过程的输出参数(SQL Server)
文章推荐： javascript - 在 HTML 元素中添加 JS 变量
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com