Div调整大小不适用于three.js

时间:2013-08-07 16:49:15

标签: css three.js

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>

1 个答案:

答案 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);

在调整大小处理程序中。