Question

我正在尝试使用three.js使页面显示为绿色或棕色地板，具体取决于下拉列表中的选择。但是，我发现虽然控制确实可以使用该功能，但是地板图像不会改变。

JS小提琴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。

Answer 1

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

SRC =＆＃34; ../建立/ three.js所＆＃34;

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

但我确实看到了一个问题。您每次都会将新的地板网格物体添加到场景中，但不要删除旧的地板网格物体。我希望在你制作新场景之前看到一个场景。删除（地板），这样你就不会在场景中堆积一堆。我还注意到你有一个叫做floor的函数和一个叫做floor的变量，它会引起混淆。

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

lmeVars = lme.Variables; 
AA = lmeVars{:, 'dist'}; 
whos AA
  Name          Size             Bytes  Class     Attributes
  AA        12915x1             103320  double

ondown in dropdown触发函数但在three.js输出中没有变化

1 个答案: