Question

我一直在开发一个ThreeJs应用程序，其中有一个下拉菜单可以进行选择，进而对渲染对象进行更改。
我面临的问题是，当我将html标签与相机控件（轨迹球或OrbitControls）一起使用时，select标签不起作用。

我写了一个样本来证明这个问题。由于某种原因，我无法让它在小提琴中工作。

Js代码：

var camera, scene, renderer,
sphere, material, mesh;
var controls;
var pointLight;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 30, 300/400, 1, 10000 );
camera.position.z = 300;
controls = new THREE.TrackballControls( camera );
scene.add( camera );

sphere = new THREE.SphereGeometry(25, 25, 25);
material = new THREE.MeshLambertMaterial( { color: 0xff0000} );
mesh = new THREE.Mesh( sphere, material );
scene.add( mesh );

renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 400 );

document.getElementById("test").appendChild( renderer.domElement );

pointLight = new THREE.PointLight( 0xFFFFFF );
pointLight.position.set (10, 100, 100);
scene.add(pointLight);

render();

function render() {

      renderer.clear();
      camera.lookAt(scene.position);
      controls.update();
      renderer.render(scene, camera);

}

HTML：

<script src="scripts/three.min.js"></script>
<script src="scripts/TrackballControls.js"></script>
<select>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
   <option value="green">Green</option>
</select>

<div id="test" style="width: 300px; height: 400px; float: right;">
</div>

知道为什么会发生这种情况和/或围绕它会有什么好办法？所有其他渲染似乎都运行良好。

提前致谢！

Answer 1

当您实例化TrackballControls时，需要设置第二个参数：

controls = new THREE.TrackballControls( camera, renderer.domElement );

然后，当然，您的select代码需要一个事件：

<select onchange="switchColor( this.value )">
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
</select>

function switchColor( value ) {

    mesh.material.color.set( value );

}

three.js.r.63

<select>标签不适用于Three Js相机控件</select>

1 个答案: