Javascript 下拉菜单中的onchange触发函数，但three.js输出中没有更改_Javascript_Html_Three.js

Javascript 下拉菜单中的onchange触发函数，但three.js输出中没有更改

javascript html three.js

Javascript 下拉菜单中的onchange触发函数，但three.js输出中没有更改,javascript,html,three.js,Javascript,Html,Three.js,我尝试使用three.js使页面显示绿色或棕色地板，具体取决于下拉列表中的选择。然而，我看到地板图像没有改变，尽管控件确实转到该功能 JS fiddle（但我无法上传图像）代码如下 <!DOCTYPE html> <html> <head> <title>Floor change</title> <style> body { margin: 0;

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

JS fiddle（但我无法上传图像）

代码如下

<!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>


换地板
身体{
保证金：0；
溢出：隐藏；
}
//全局变量
var渲染器；
var场景；
var摄像机；
var容器；
//控制
风险值控制；
//html元素
var colorselection=“绿色”；
函数init（）{
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
屏幕宽度-=200；
//屏幕高度-=100；
//创建一个场景，该场景将包含所有元素，例如对象、摄影机和灯光。
场景=新的三个。场景（）；
//创建一个摄像头，它定义了我们要看的地方。
摄像机=新的三个透视摄像机（45，屏幕宽度/屏幕高度，0.11000）；
//创建渲染，设置背景颜色和大小
renderer=new THREE.WebGLRenderer（）；
setClearColor（0x000000，1.0）；
设置大小（屏幕宽度、屏幕高度）；
//将摄影机定位并指向场景的中心
摄像机位置x=0；
摄像机位置y=30；
摄像机位置z=40；
摄像机。注视（场景。位置）；
//将渲染器的输出添加到html元素
document.body.appendChild（renderer.doElement）；
//将div元素附加到变量以包含渲染器
container=document.getElementById（'ThreeJS'）；
//将渲染器附加到容器div
container.appendChild（renderer.doElement）；
}
功能楼层（）
{
///////////
//地板//
///////////
如果（颜色选择==“绿色”）
var floorTexture=new THREE.ImageUtils.loadTexture（'green.jpg'）；
否则，如果（colorselection==“brown”）/*现在选择2*/
var floorTexture=new THREE.ImageUtils.loadTexture（'brown.png'）；
floorTexture.wrapps=floorTexture.wrapT=THREE.RepeatWrapping；
地板结构。重复。设置（20,20）；
//双面：在网格的两侧渲染纹理
var floorMaterial=新的三个.MeshBasicMaterial（{map:floorTexture，side:THREE.DoubleSide}）；
var地板测量法=新的三平面几何（110,110,1,1）；
var地板=新的三层网格（地板测量、地板材料）；
楼层位置y=-0.5；
floor.rotation.x=Math.PI/2；
场景。添加（楼层）；
制作动画（）；
}
//调度程序循环
函数animate（）{
渲染器。渲染（场景、摄影机）
请求动画帧（动画）
}
函数myfunction（）
{
colorselection=document.getElementById（“mydropdownlist”）.value；
log（“单击“+”颜色选择“+”））
地板（）；
}
//在窗口加载完成时调用init函数。
window.onload=init；
绿色
棕色的
#mydropdownlist
{
位置：绝对位置；
左：1200像素；
顶部：20px
}

我上传了上面使用的brown.png和green.jpg图像

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

src=“../build/Three.js”

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

然而，我确实看到了一个问题。每次将新地板网格添加到场景中，但不删除旧地板网格。我希望能看到一个场景。在你做一个新的场景之前，把（地板）移走，这样你就不会在场景中堆起一堆东西。我还注意到有一个名为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>


换地板
身体{
保证金：0；
溢出：隐藏；
}
//全局变量
var渲染器；
var场景；
var摄像机；
var容器；
var floormesh=null；
//控制
风险值控制；
//html元素
var colorselection=“绿色”；
函数init（）{
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
屏幕宽度-=200；
//屏幕高度-=100；
//创建一个场景，该场景将包含所有元素，例如对象、摄影机和灯光。
场景=新的三个。场景（）；
//创建一个摄像头，它定义了我们要看的地方。
摄像机=新的三个透视摄像机（45，屏幕宽度/屏幕高度，0.11000）；
//创建渲染，设置背景颜色和大小
renderer=new THREE.WebGLRenderer（）；
setClearColor（0x000000，1.0）；
设置大小（屏幕宽度、屏幕高度）；
//将摄影机定位并指向场景的中心
摄像机位置x=0；
摄像机位置y=30；
摄像机位置z=40；
摄像机。注视（场景。位置）；
//将渲染器的输出添加到html元素
document.body.appendChild（renderer.doElement）；
//将div元素附加到变量以包含渲染器
container=document.getElementById（'ThreeJS'）；
//将渲染器附加到容器div
container.appendChild（renderer.doElement）；
}
功能楼层（）
{
///////////
//地板//
///////////
如果（颜色选择==“绿色”）
var floorTexture=new THREE.ImageUtils.loadTexture（'green.jpg'）；
埃尔斯