Css Div resize不使用three.js
Three.js是一个很棒的库。它有很好的文档记录，而且工作很好 我试图在div中渲染一个平面以及轨迹球控件。div会随着窗口或浏览器的大小而调整大小。以下是我面临的问题 浏览器完成加载后，平面将显示在浏览器中，但它不会刷新或响应轨迹球控件。但当我最小化浏览器或切换选项卡时，场景将变为活动状态，并按设计工作。我确信轨迹球和场景是在加载时工作的，因为当我通过最小化浏览器或切换选项卡刷新它时，我能够看到更改。我相信这与加载时渲染或刷新有关 类似地，当我调整浏览器大小时，div会更改其大小，但场景会返回到冻结状态。再一次，如果最小化或切换选项卡，场景将调整大小并按预期工作 我不知道问题出在哪里 非常感谢 萨姆Css Div resize不使用three.js,css,three.js,Css,Three.js,Three.js是一个很棒的库。它有很好的文档记录，而且工作很好 我试图在div中渲染一个平面以及轨迹球控件。div会随着窗口或浏览器的大小而调整大小。以下是我面临的问题 浏览器完成加载后，平面将显示在浏览器中，但它不会刷新或响应轨迹球控件。但当我最小化浏览器或切换选项卡时，场景将变为活动状态，并按设计工作。我确信轨迹球和场景是在加载时工作的，因为当我通过最小化浏览器或切换选项卡刷新它时，我能够看到更改。我相信这与加载时渲染或刷新有关 类似地，当我调整浏览器大小时，div会更改其大小，但场景会返
3.js
帆布
-
几何学
-
立方体
身体{
字体系列：Monospace；
背景色：#f0；
边际：0px；
溢出：隐藏；
}
#Cont3D{
最小宽度：200px；
最小高度：400px；
浮动：无；
左缘：20%；
保证金权利：20%；
边界宽度：厚；
边框样式：实心；
边缘顶部：100px；
}
函数startmusic（）{
var容器，stats；
摄像机、场景、渲染器；
var平面；
var targetRotationX=0；
var TargetRotationNoMouseDownx=0；
var-mouseX=0；
var mouseXOnMouseDown=0；
var targetRotationY=0；
var TargetRotationNoMousedowny=0；
var-mouseY=0；
var mouseYOnMouseDown=0；
宽度、高度；
init（）；
制作动画（）；
函数init（）{
容器=document.getElementById（“Cont3D”）；
var info=document.createElement（'div'）；
info.style.position='绝对'；
info.style.top='10px'；
info.style.width='100%'；
info.style.textAlign='center'；
info.innerHTML='拖动以旋转立方体'；
container.appendChild（info）；
宽度=container.clientWidth；
高度=集装箱的重量；
照相机=新的三个透视照相机（50，宽/高，1，2000）；
摄像机位置y=150；
摄像机位置z=500；
场景=新的三个。场景（）；
//飞机
变量几何=新的三个平面几何（200200）；
geometry.applyMatrix（新的三个.Matrix4（）.makeRotationX（-Math.PI/2））；
var材料=新的三网格基本材料({
颜色：0xE0
});
平面=新的三个网格（几何体、材质）；
场景。添加（平面）；
//灯光
半球光=新的三个半球光（0xffffff，0xffffff，0.6）；
半光.彩色.setHSL（0.6,1,0.6）；
半光底色setHSL（0.095,1,0.75）；
半光位置设置（0500,0）；
场景。添加（半光）；
scene.fog=新的3.fog（0xffffff，3000，10000）；
场景.雾.颜色.setHSL（0.6,0.87,0.96）；
聚光灯=新的三个聚光灯（0xffffff）；
聚光灯位置设置（0,1800,0）；
聚光灯.target.position.set（0,0,0）；
spotLight.castShadow=true；
场景。添加（聚光灯）；
//渲染器
//定向照明
var方向灯=新的三个方向灯（0xffffff）；
directionalLight.position=camera.position；//.set（1,1,1）.normalize（）；
场景。添加（方向光）；
renderer=new THREE.WebGLRenderer({
反别名：对
});
<!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>
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);