我正在使用Threejs教程制作一个javascript立方体。这起作用了。现在我想在我的页面上输入一个数字来改变立方体的旋转速度(X轴和Y轴),但我不知道如何改变。有人能帮我解决这个问题吗?
我尝试过使用数字和文本输入,但我确信这与我的javascript有关(我不是很棒)
HTML
<ul>
<li>Color cube: <input type="text" id="colorCube" placeholder=""></li><br>
<li>Rotation X: <input type="number" id="rotationCubeX" placeholder=""></li><br>
<li>Rotation Y: <input type="number" id="rotationCubeY" placeholder=""></li><br>
<li>Change: <input id="submitColor" value="Submit" type="button"></li>
</ul>
这就是我想要改变旋转的地方(颜色有效)
JS
var cube = (function(){
my = {};
var cube;
var xSpeed = parseFloat(document.getElementById('rotationCubeX').value);
var ySpeed = parseFloat(document.getElementById('rotationCubeY').value);
// Function to change color
my.color = function(value){
cube.material.color.set(value);
}
// Generate Cube
my.generate = function(colorCube, rotationCubeX, rotationCubeY) {
var scene = new THREE.Scene();
var width = 1280;
var height = 505;
var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.shadowMapEnabled = true; //Shadow
renderer.shadowMapSoft = true; // Shadow
renderer.shadowMapType = THREE.PCFShadowMap; //Shadow
document.getElementById('projects').appendChild( renderer.domElement );
// Define Shape Object
geometry = new THREE.BoxGeometry(1, 1, 1);
material = new THREE.MeshPhongMaterial({ // Required For Shadows
color: colorCube,
specular: 0x000000,
shininess: 100
});
//Cube
cube = new THREE.Mesh(geometry, material);
cube.position.y = 0.8;
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
camera.position.z = 3;
camera.position.y = 1.8;
camera.position.x = 0;
// Floor
var floorGeometry = new THREE.PlaneGeometry(100, 100, 20, 20);
var floorMaterial = new THREE.MeshPhongMaterial({
color: 0xecebec,
specular: 0x000000,
shininess: 0
});
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -0.5 * Math.PI;
floor.receiveShadow = true;
scene.add(floor);
// Lights
// Ambient light for general illumination
var ambientLight = new THREE.AmbientLight(0x090909);
scene.add(ambientLight);
// Spotlight for specific illumination
var spotLight = new THREE.SpotLight(0xAAAAAA);
spotLight.position.set(2, 3, 3);
spotLight.castShadow = true;
spotLight.shadowBias = 0.0001;
spotLight.shadowDarkness = 0.2;
spotLight.shadowMapWidth = 2048; // Shadow Quality
spotLight.shadowMapHeight = 2048; // Shadow Quality
scene.add(spotLight);
// Render Loop
function render() {
requestAnimationFrame(render);
cube.rotation.x += xSpeed; // spin cube
cube.rotation.y += ySpeed; //spin cube
renderer.render(scene, camera);
}
//window.addEventListener('click', onDocumentMouseDown, false);
render();
}
//function onDocumentMouseDown(event) {
// Welcome to the exciting world of raycasting !
// First let's get some mouse coordinates:
//mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
//mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// This is basically converting 2d coordinates to 3d Space:
//raycaster.setFromCamera(mouse, camera);
// And checking if it intersects with an array object
//var intersects = raycaster.intersectObjects([cube]);
// And finally change the color:
// if (intersects.length > 0) {
// intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
// }
//}
return my;
}());
这是开始旋转添加到立方体的地方(如果我将0.001改为rotationCubeX,立方体不会产生)
Main.JS
document.addEventListener("DOMContentLoaded", function () {
cube.generate('blue', 0.001, 0.005);
document.getElementById("submitColor").onclick = function() {
cube.color(document.getElementById('colorCube').value);
// cube.color(document.getElementById('rotationCube').value);
xSpeed = parseFloat(document.getElementById('rotationCubeX').value);
ySpeed = parseFloat(document.getElementById('rotationCubeY').value);
};
});
这是我调用函数的main.js
我在提供的Threejs代码的帮助下做了这件事,但我现在卡住了。
https://stackoverflow.com/questions/56325982
复制相似问题