Javascript 三个.js双视口仅显示一个_Javascript_Html_Three.js

Javascript 三个.js双视口仅显示一个

javascript html three.js

Javascript 三个.js双视口仅显示一个,javascript,html,three.js,Javascript,Html,Three.js,我曾试图复制Lee Stemkoski的双视口的优秀示例当使用Firefox 23.0.1在本地PC Windows 7上的github上访问它时，它运行良好。但是，当我复制源并尝试从本地驱动器运行它时，它将只显示要渲染的第二个视口。如果我注释掉第二个视口渲染的代码，那么它将显示第一个视口OK 这可能是版本问题。我本来可以从GitHub获得代码，但它似乎不在那里。我通过从Firefox中执行“另存为完整网页”获得了源代码。为了帮助调试，我通过逐步删除诸如统计、控件、信息按钮等不必要的内

我曾试图复制Lee Stemkoski的双视口的优秀示例

当使用Firefox 23.0.1在本地PC Windows 7上的github上访问它时，它运行良好。但是，当我复制源并尝试从本地驱动器运行它时，它将只显示要渲染的第二个视口。如果我注释掉第二个视口渲染的代码，那么它将显示第一个视口OK

这可能是版本问题。我本来可以从GitHub获得代码，但它似乎不在那里。我通过从Firefox中执行“另存为完整网页”获得了源代码。为了帮助调试，我通过逐步删除诸如统计、控件、信息按钮等不必要的内容来最小化javascript

我已经没有主意了，不知道是否有人能看出问题所在。下面代码块的最后11行是操作所在的位置

干杯

=========================================================================================================================

<!doctype html> // based on Three.js "tutorials by example" Author: Lee Stemkoski Date: June 2012 (three.js v49)
<html lang="en">
<head>
        <title> LIGER05 -- Three.js</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;
        font-weight: bold;
        background-color: #ccccff;
        margin: 0px;
        overflow: hidden;
    }
</style> </head>
<body>
<!-- <div id="message"></div>-->
<script src="js/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<div id="ThreeJScontainer" style="position: absolute; left:0px; top:0px"></div><!-- Pre-defined Container for rendered can
<script>  // based on Three.js "tutorials by example" Author: Lee Stemkoski Date: June 2012 (three.js v49) -->
var container, scene, camera, camera2, renderer;
init();
animate();
// FUNCTIONS //
function init() {
scene = new THREE.Scene();
// CAMERA //
var SCREEN_WIDTH = window.innerWidth , SCREEN_HEIGHT = window.innerHeight;  
var VIEW_ANGLE = 45, ASPECT = (0.5*SCREEN_WIDTH) / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera  = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
camera2 = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
scene.add(camera2);
camera.position.set(0,0,200);
camera2.position.set(0,250,0);
camera.lookAt(scene.position);  
camera2.lookAt(scene.position);     
// RENDERER NEW
if ( Detector.webgl )
    {renderer = new THREE.WebGLRenderer( {antialias:true} );}//alert("WebGL Renderer");         }
else
    {renderer = new THREE.CanvasRenderer();}//alert("Canvas Renderer");         }
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
//...Either create a div element to contain the renderer        ==> container = document.createElement( 'div' );
container = document.getElementById( 'ThreeJScontainer' ); //...OR reference predefined container in the html
container.appendChild( renderer.domElement );
//Hmmmm   THREEx.WindowResize(renderer, camera);
var light = new THREE.PointLight(0xffffff);
    light.position.set(0,250,0);
    scene.add(light);
    //var ambientLight = new THREE.AmbientLight(0x111111);
    // scene.add(ambientLight);
var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 ); 
    // use a "lambert" material rather than "basic" for realistic lighting.//(don't forget to add >= 1 light!)
    var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x8888ff} ); 
    var sphere1 = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere1.position.set(-60, 0, 50);
    scene.add(sphere1);  
    var sphere2 = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere2.position.set(0, 0, -50);
    scene.add(sphere2);         
    var sphere3 = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere3.position.set(60, 0, 50);
    scene.add(sphere3);                 
    }
function animate() {
    requestAnimationFrame( animate );
render();       
update();   }
function update() {
// delta = change in time since last call (in seconds)
var delta = clock.getDelta(); }
function render(){  
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
camera.aspect = (0.5 * SCREEN_WIDTH) / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
camera2.aspect = (0.5 * SCREEN_WIDTH) / SCREEN_HEIGHT;
camera2.updateProjectionMatrix();
var mar = 100
var panelX1min = mar
var panelWidth = Math.floor(0.5 * SCREEN_WIDTH) - (2* mar)
var panelX2min = mar + panelWidth + mar + mar
var panelYmin = mar
var panelHeight = SCREEN_HEIGHT - (2*mar)
//...LEFT SIDE 
renderer.setViewport( panelX1min, panelYmin, panelWidth , panelHeight  );
renderer.render( scene, camera );
//...RIGHT SIDE

    // ***** if you comment out the next two lines then the left side viewport will be shown *****

renderer.setViewport( panelX2min, panelYmin, panelWidth, panelHeight ); 
renderer.render( scene, camera2 );
}
</script></body></html>
=========================================================================================================================
=========================================================================================================================

//基于Three.js“示例教程”作者：Lee Stemkoski日期：2012年6月（Three.js v49）
LIGER05--Three.js
身体
{
字体系列：Monospace；
字体大小：粗体；
背景色：#ccccff；
边际：0px；
溢出：隐藏；
}
var容器、场景、摄影机、camera2、渲染器；
init（）；
制作动画（）；
//功能//
函数init（）{
场景=新的三个。场景（）；
//摄像机//
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
可变视角=45，纵横比=（0.5*屏幕宽度）/屏幕高度，近=0.1，远=20000；
摄像机=新的三个透视摄像机（视角、方向、近距离、远距离）；
camera2=新的三视角摄像机（视角、纵横比、近距离、远距离）；
场景。添加（摄影机）；
场景。添加（摄影机2）；
摄像机位置设置（0,0200）；
摄像机2位置设置（0250,0）；
摄像机。注视（场景。位置）；
摄像机2.注视（场景、位置）；
//渲染器新
if（Detector.webgl）
{renderer=new THREE.WebGLRenderer（{antialas:true}）；}//alert（“WebGL renderer”）；}
其他的
{renderer=new THREE.CanvasRenderer（）；}//警报（“画布渲染器”）；}
设置大小（屏幕宽度、屏幕高度）；
//…创建一个div元素来包含renderer=>container=document.createElement（'div'）；
container=document.getElementById（'ThreeJScontainer'）；/。。。或引用html中预定义的容器
container.appendChild（renderer.doElement）；
//Hmmmm THREEx.WindowResize（渲染器、相机）；
var灯=新的三点灯（0xffffff）；
光。位置。设置（0250,0）；
场景。添加（灯光）；
//var环境光=新的三个环境光（0x111111）；
//场景。添加（环境光）；
var比色法=新的三种比色法（50,32,16）；
//使用“lambert”材质而不是“basic”进行真实照明。//（不要忘记添加>=1个灯光！）
var sphereMaterial=new THREE.MeshLambertMaterial（{color:0x8888ff}）；
var sphere1=新的三种网格（球墨测量法、球材料）；
sphere1.位置设置（-60,0,50）；
场景。添加（sphere1）；
var sphere2=新的三种网格（球墨测量法、球材料）；
sphere2.position.set（0,0，-50）；
场景。添加（sphere2）；
var sphere3=新的三种网格（球墨测量法、球体材料）；
球体3位置设置（60,0,50）；
场景。添加（sphere3）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
更新（）；}
函数更新（）{
//增量=自上次呼叫以来的时间变化（秒）
var delta=clock.getDelta（）；}
函数render（）{
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
camera.aspect=（0.5*屏幕宽度）/屏幕高度；
camera.updateProjectMatrix（）；
camera2.aspect=（0.5*屏幕宽度）/屏幕高度；
camera2.UpdateProjectMatrix（）；
var mar=100
var panelX1min=mar
可变面板宽度=数学地板（0.5*屏幕宽度）-（2*mar）
变量panelX2min=mar+panelWidth+mar+mar
var panelYmin=mar
变量面板高度=屏幕高度-（2*mar）
//…左边
renderer.setViewport（panelX1min、panelYmin、panelWidth、panelHeight）；
渲染器。渲染（场景、摄影机）；
//…右侧
//******如果注释掉接下来的两行，则将显示左侧视口*****
renderer.setViewport（panelX2min、panelYmin、panelWidth、panelHeight）；
渲染器。渲染（场景，摄影机2）；
}
=========================================================================================================================
=========================================================================================================================
需要以下语句（在javascript init函数中）
要防止渲染器在渲染第一个视口后清除其缓冲区，请执行以下操作：-
    renderer.autoClear = false

需要以下语句（在javascript init函数中）
要防止渲染器在渲染第一个视口后清除其缓冲区，请执行以下操作：-
    renderer.autoClear = false

嗯，有控制台错误吗？@GuyGood没有，没有控制台错误，只是一个提供webgl renderer.Aha版本的报告。我想我找到了。需要放置语句：renderer.autoClear=false；在Init函数的末尾。与CSS无关@GuyGood谢谢您的查看，很抱歉浪费您的时间。嗯，有控制台错误吗？@GuyGood没有，没有控制台错误，只是一个报告版本的webgl renderer.Aha。我想我找到了。需要放置语句：renderer.autoClear=false；在Init函数的末尾。与CSS无关@谢谢你的关注，很抱歉浪费了你的时间。谢谢你发布这个答案！它也帮我解决了同样的问题。谢谢你发布这个答案！它也帮我解决了同样的问题。