【发布时间】：2016-05-26 15:12:33
【问题描述】：
我正在使用 OrbitControls.js 允许用户放大/缩小和旋转我网站中显示的 3D 模型。但是，当我单击页面上的任意位置时，模型会消失，并且用于在模型之间切换的两个按钮不再起作用。事先，它允许我放大和缩小但不能旋转。
非常感谢任何帮助。
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<title>Visualising Cells</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="three.js"></script>
<script src="ColladaLoader.js"></script>
</head>
<body>
<script src="OrbitControls.js"></script>
<script src="main.js"></script>
<div class="float-btn">
<button type="button" id="LBC">Load Red Blood Cell</button>
<button type="button" id="LEC">Load Egg Cell</button>
</div>
<div class="float-txt">
<div style="color:#000000">
<div style="font-family: Arial">
<div style="font-size: 18px">
<div style="text-decoration: underline">
<h1>Visualising Microscopic Cells</h1>
</div>
<div class="instructions">
<div style="color:#000000">
<div style="font-family: Arial">
<div style="font-size: 16px">
<div style="text-decoration: underline">
<h2>Instructions</h2>
</div>
<div class="instruction-txt">
<div style="color:#000000">
<div style="font-family: Arial">
<div style="font-size: 14px">
<p><u>Zoom In:</u> <strong>Up Arrow</strong> <br><u>Zoom Out:</u> <strong>Down Arrow</strong></br></p>
</div>
<div class="Model-Location" id="target">
</div>
</body>
</html>
.js
var myModel; // used to reference the most recently-loaded model
$(document).ready(function() {
// when the page has loaded, add click functions to the two buttons
$("#LBC").click(function() {
toggleModel("blood");
});
$("#LEC").click(function() {
toggleModel("egg2");
});
});
function toggleModel(modelName) {
// remove the existing model from the scene
scene.remove(myModel);
// add the chosen model
loadModel(modelName);
}
function loadModel(modelName) {
// add the specified model
loader.load(modelName+'.DAE', function (collada) {
myModel = collada.scene;
myModel.position.x = 0;
myModel.position.y = 0;
myModel.position.z = 0;
myModel.updateMatrix();
scene.add(myModel);
});
}
var width = window.innerWidth;
var height = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.01, 500 );
camera.position.z = 0.16;
camera.position.x = 0;
camera.position.y = 0;
scene.add(camera);
var controls = new THREE.OrbitControls( camera );
var renderer=new THREE.WebGLRenderer();
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
renderer.setClearColor("rgb(181,181,181)");
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0, 0.14);
scene.add(light);
var loader = new THREE.ColladaLoader();
// load the default model
loadModel("egg2");
document.addEventListener('keydown', function(event) {
console.log(camera.position.z);
if (event.keyCode == 38) {
// don't scroll the window
console.log("Up Arrow Pressed");
event.preventDefault();
if (camera.position.z >= 0.1) {
camera.position.z = camera.position.z - 0.01;
}
}
else if (event.keyCode == 40) {
// don't scroll the window
event.preventDefault();
console.log("Down Arrow Pressed")
if (camera.position.z < 0.2) {
camera.position.z = camera.position.z + 0.01;
}
}
}, true);
render = function () {
requestAnimationFrame(render);
// object.rotation.x += 0.0;
// object.rotation.y += 0.0;
renderer.render(scene, camera);
// controls.update();
};
controls.addEventListener('change', render );
render();
【问题讨论】：
-
添加小提琴是个好主意。
-
@Wilt 我该怎么做？
-
Here 是一个起点。您必须先创建一个帐户，然后您可以使用您的自定义代码更新此小提琴并重现您遇到的问题。然后你在问题中添加一个指向小提琴的链接，这样其他人就可以自己看到你的问题到底是什么......
-
@Wilt 这不是让我创建一个帐户，它会在填写完所有内容后显示一个字段（如果需要）。我所需要的只是创建一个变量以向模型添加旋转的代码。跨度>
标签： javascript three.js