3
three.js所工作的是一個真棒庫。它有很好的文件記錄，其工作很好。股利resize在不three.js所
我試圖呈現一個平面，一個div內軌跡球控制一起。當窗口或瀏覽器調整大小時，div會調整大小。以下是我面臨的
當瀏覽器加載完成的問題，平面顯示在瀏覽器，但是，它不刷新或響應軌跡球控制。但是，當我最小化瀏覽器或切換選項卡時，場景變爲活動狀態，並按設計工作。我相信軌跡球和場景在負載工作，因爲我能看到的變化，當我通過最小化瀏覽器或切換標籤刷新。我相信它與渲染或負載刷新有關。
同樣，當我調整瀏覽器的大小改變其大小，但現場回到凍結狀態。再次，如果我最小化或按預期切換選項卡中的場景大小和作品。
我無法找出其中的問題。
非常感謝 山姆
<!DOCTYPE html>
<html
lang="en">
<head>
<title>three.js
canvas
-
geometry
-
cube
</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;
}
#Cont3D {
min-width: 200px;
min-height: 400px;
float: none;
margin-left: 20%;
margin-right: 20%;
border-width: thick;
border-style: solid;
margin-top: 100px;
}
</style>
</head>
<body>
<script
src="build/three.js"></script>
<script
src="js/loaders/STLLoader.js"></script>
<script
src="js/renderers/SoftwareRenderer.js"></script>
<script
src="js/controls/TrackballControls_Persp.js"></script>
<script
src="js/modifiers/SubdivisionModifier.js"></script>
<script
src="js/controls/OrbitControls.js"></script>
<script
src="js/libs/stats.min.js"></script>
<script
src="js/Detector.js"></script>
<script>
function startmusic() {
var container, stats;
var camera, scene, renderer;
var plane;
var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;
var mouseY = 0;
var mouseYOnMouseDown = 0;
var Width, Height;
init();
animate();
function init() {
container = document.getElementById("Cont3D");
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
Width = container.clientWidth;
Height = container.clientHeight;
camera = new THREE.PerspectiveCamera(50, Width/Height, 1, 2000);
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Plane
var geometry = new THREE.PlaneGeometry(200, 200);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
var material = new THREE.MeshBasicMaterial({
color: 0xe0e0e0
});
plane = new THREE.Mesh(geometry, material);
scene.add(plane);
//LIGHTS
hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
hemiLight.color.setHSL(0.6, 1, 0.6);
hemiLight.groundColor.setHSL(0.095, 1, 0.75);
hemiLight.position.set(0, 500, 0);
scene.add(hemiLight);
scene.fog = new THREE.Fog(0xffffff, 3000, 10000);
scene.fog.color.setHSL(0.6, 0.87, 0.96);
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 1800, 0);
spotLight.target.position.set(0, 0, 0);
spotLight.castShadow = true;
scene.add(spotLight);
// RENDERER
// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position = camera.position; // .set(1, 1, 1).normalize();
scene.add(directionalLight);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(scene.fog.color, 1);
document.getElementById("logBox").innerHTML = container.style.width + "," + Width;
renderer.setSize(Width, Height);
container.appendChild(renderer.domElement);
controls = new THREE.TrackballControls(camera, renderer.domElement)
controls.rotateSpeed = .8;
controls.zoomSpeed = .7;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.6;
controls.maxDistance = 1000;
controls.minDistance = 150;
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
controls.addEventListener('change', render);
container.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(event) {
Width = container.clientWidth;
Height = container.clientHeight;
document.getElementById("logBox").innerHTML = Width + "," + Height;
camera.aspect = Width/Height;
camera.updateProjectionMatrix();
renderer.setSize(Width, Height);
controls.handleResize();
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
render();
controls.update();
stats.update();
}
function render() {
renderer.render(scene, camera);
}
window.onresize = onWindowResize;
}
window.onload = startmusic;
</script>
<div
id="logBox"
style="position: absolute; top: 50px; width: 100%; text-align: center;">Blue</div>
<div
id="Cont3D">
</div>
</body>
</html>
'handleResize（）'不存在於OrbitControls中，而且它似乎不需要它：http://threejs.org/examples/js/controls/OrbitControls.js –