Question

我需要将输入表单的值发送到three.js工作区。以下是我的代码。我想使用滑块来改变球体的半径。我不想为此目的使用three.js控件。我在HTML5和JS中真的很新。我该如何连接输入和脚本？

<!DOCTYPE html>

<html>

<head>
    <script type="text/javascript" src="../libs/three.js"></script>
</head>
<body>
<div id="WebGL-output",style="heigh:100px;"></div>

<div>
<form>
Radius: 
<input type="range" name="Radius" value="10"><br>
</form>
</div>
<script type="text/javascript">
    function init() {
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColorHex();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth/2, window.innerHeight/2);
        var sphereGeometry = new THREE.SphereGeometry(10, 10, 10);
        var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        scene.add(sphere);
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);
        document.getElementById("WebGL-output").appendChild(renderer.domElement);
        renderer.render(scene, camera);
    }
    window.onload = init;
</script>
</body>
</html>

Answer 1

首先，您应该将代码分为初始化和动画功能：

function init() {
    .....
}

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

init();
animate();

然后你可以使用滑块

<input type="range" id="scale" name="Scale" min="50" max="200" value="100">

根据输入的设置缩放动画功能中的球体：

function animate() {

    var scale = document.getElementById( "scale" ).value / 100;
    scene.scale.x = scene.scale.y = scene.scale.z = scale;

    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

请参阅代码段：

＆＃13;

var renderer, scene, camera;

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE));
    renderer.setSize(window.innerWidth/2, window.innerHeight/2);
    var sphereGeometry = new THREE.SphereGeometry(10, 10, 10);
    var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    scene.add(sphere);
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);
    resize();
    window.onresize = resize;
    document.getElementById("WebGL-output").appendChild(renderer.domElement);
}

function animate() {
    var scale = document.getElementById( "scale" ).value / 100;
    scene.scale.x = scene.scale.y = scene.scale.z = scale;
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

function resize() {
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
}

init();
animate();

＆＃13;

#gui {
    position : absolute;
    top : 10;
    left : 10;
}

＆＃13;

<script src="https://threejs.org/build/three.min.js"></script>
<div>
    <form id="gui" > Scale
    <input type="range" id="scale" name="Scale" min="50" max="200" value="100"><br>
    </form>
</div>
<div id="WebGL-output",style="heigh:100px;"></div>

＆＃13;

从输入表单发送参数到three.js

1 个答案: