0
禁用HTML文本框以進行輸入。 「渲染」按鈕正常工作，onClick顯示已定義的幾何圖形。我試圖通過將render.domElement更改爲頁面上的不同元素，例如容器，信息，父級和場景。但無法找出爲什麼文本框被禁用？three.js - 禁用文本框
<!DOCTYPE html>
<html lang="en">
<head>
<title>3d Model using HTML5 and three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="three.min.js" type="text/javascript"></script>
<script src="Curve.js" type="text/javascript"></script>
<script src="TubeGeometry.js" type="text/javascript"></script>
<script src="Stats.js" type="text/javascript"></script>
<script src="Detector.js" type="text/javascript"></script>
<script>
// variables
var container, stats;
var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
var text, plane, tube, tubeMesh, parent;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth/2;
var windowHalfY = window.innerHeight/2;
var binormal = new THREE.Vector3();
var normal = new THREE.Vector3();
var materials = [];var points = [];
init();
//animate();
function init(){
// HTML form
form = document.createElement('div');
form.innerHTML = 'X: <input type="text" id="txtX" /> Y: <input type="text" id="txtY" /> Z: <input type="text" id="txtZ" /> ';
form.innerHTML += '<input type="button" value="plot" onClick="draw(txtX.value,txtY.value,txtZ.value);" />';
form.innerHTML += '<input type="button" value="render" onClick="animate();" />';
document.body.appendChild(form);
// container
container = document.createElement('div');
document.body.appendChild(container);
// info div
info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
container.appendChild(info);
// camera
camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(30,10,10);
//camera.up = new THREE.Vector3(0, 1, 1);
// scene
scene = new THREE.Scene();
camera.lookAt(scene.position);
// light
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 1, 0);
scene.add(light);
// Grid
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(- 500, 0, 0));
geometry.vertices.push(new THREE.Vector3(500, 0, 0));
for (var i = 0; i <= 20; i ++) {
line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }));
line.position.z = (i * 50) - 500;
scene.add(line);
line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }));
line.position.x = (i * 50) - 500;
line.rotation.y = 90 * Math.PI/180;
scene.add(line);
}
// extrudePath, Helix Curve
/*var cords = new Array();
cords[0] = new Array(0, 10, 10);
cords[1] = new Array(10, 0, 10);
cords[2] = new Array(10, 0, 0);*/
//extrudePath = new THREE.SplineCurve3([new THREE.Vector3(cords[0]),new THREE.Vector3(cords[1])]);
/*extrudePath = new THREE.SplineCurve3([
new THREE.Vector3(0, 10, 10),
new THREE.Vector3(10, 0, 10),
new THREE.Vector3(10, 0, 0)
]);*/
draw(0,10,10);
draw(10,0,10);
draw(10,0,0);
extrudePath = new THREE.SplineCurve3(points);
console.log(extrudePath);
// Tube Geometry
var segments = 50;
var closed = false;
var debug = true;
var radiusSegments = 12;
//alert('hello');
var tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed, debug);
// Tube Mesh
/*tubeMesh = THREE.SceneUtils.createMultiMaterialObject(tube, [
new THREE.MeshLambertMaterial({
color: 0xff00ff,
opacity: tube.debug ? 0.2 : 0.8,
transparent: true
}),
new THREE.MeshBasicMaterial({
color: 0x000000,
opacity: 0.5,
wireframe: true
})]);*/
/*for (var i = 0; i < 6; i ++) {
materials.push(new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff }));
}
tube.materials = materials;*/
tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial({
color: 0x000000,side: THREE.DoubleSide,
opacity: 0.5,transparent: true,
wireframe: true}));
//tubeMesh = new THREE.Mesh(tube, new THREE.MeshFaceMaterial());
//THREE.ColorUtils.adjustHSV(tubeMesh.material.color, 0.1, -0.1, 0);
parent = new THREE.Object3D();
parent.position.y = 100;
if (tube.debug) tubeMesh.add(tube.debug);
parent.add(tubeMesh);
scene.add(tubeMesh);
// projector
projector = new THREE.Projector();
// renderer
//renderer = new THREE.CanvasRenderer();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// CONTROLS
console.log(renderer.domElement);
controls = new THREE.TrackballControls(this.camera, info);
// stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mouseover', onDocumentMouseOver, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
window.addEventListener('resize', onWindowResize, false);
}
function draw(x,y,z)
{
points.push(new THREE.Vector3(x,y,z));
}
function onWindowResize() {
camera.left = window.innerWidth/- 2;
camera.right = window.innerWidth/2;
camera.top = window.innerHeight/2;
camera.bottom = window.innerHeight/- 2;
camera.aspect = window.innerWidth/window.innerHeight;
//camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseDown(event) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}
function onDocumentMouseUp(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentMouseOut(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentMouseOver(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentTouchStart(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
}
}
function animate() {
tubeMesh.rotation.y += (targetRotation - tubeMesh.rotation.y) * 0.15;
camera.updateMatrixWorld();
renderer.render(scene, camera);
requestAnimationFrame(animate);
//render();
update();
}
function update()
{
controls.update();
stats.update();
}
function render() {
tubeMesh.rotation.y += (targetRotation - tubeMesh.rotation.y) * 0.15;
camera.updateMatrixWorld();
renderer.render(scene, camera);
}
</script>
</body>
</html>
我從這個問題試過，但還是文本框被禁用。我改變了我的代碼的順序，並把'controls = new THREE.TrackballControls（camera，container）;'。 – Valay
輸入類型按鈕有效，但文本框不起作用。 – Valay
更改函數調用的順序並解決問題。謝謝大家。 – Valay