Three.js是一个很棒的库。它记录良好,工作得很好。
我正在尝试在div中渲染一个平面以及轨迹球控制。 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>
答案 0 :(得分:3)
function onWindowResize(event) {
Width = container.clientWidth;
Height = container.clientHeight;
document.getElementById("logBox").innerHTML = Width + "," + Height;
renderer.setSize(width, height);
camera.aspect = Width / Height;
camera.updateProjectionMatrix();
controls.handleResize();
}
您不需要
renderer.render(scene, camera);
在调整大小处理程序中。