三个.js双视口只有一个显示
three.js dual viewports only one displays
我试图克隆Lee Stemkoski在 http://stemkoski.github.io/Three.js/Viewports-Dual.html 的双视口的优秀例子。
当使用Firefox 23.0.1从我的本地PC Windows 7上的github上的位置访问时,它运行良好。但是当我复制源并尝试从本地驱动器运行它时,它只会显示要渲染的第二个视口。如果我注释掉第二个视口渲染的代码,那么它将显示第一个视口正常。
这可能是版本问题。 我会从 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>
=========================================================================================================================
=========================================================================================================================
需要以下语句(在 javascript init 函数中)要防止渲染器在渲染第一个视口后清除其缓冲区:-
renderer.autoClear = false
相关文章:
- 我有一个字段计算,如果结果低于 60,则需要显示最小值
- 当我有一个完整的html页面时,如何显示它's iframe中的源html
- 如果所有单选框在jQuery中都有一个选择,则显示一个元素
- 我在谷歌地图上有一个标记,点击后应该会显示文本内容
- 我有一个本地 json 文件,我想在列表框中显示其数据
- 在 CSS 中有一个单独的伪选择器,以显示有关一行中多个元素的信息
- 我有一个列表显示 1、2、3 个数字,我可以将它们转换为乌尔都语吗?
- 我有一个数据列表,我将其转换为 Ul 和 li 的列表,现在我希望这个列表在 JSP 中显示为树
- 如何有一个淘汰网格显示标题和基于下拉结果的数据
- 如果我有一个Math.Max对象,我该如何让它显示名称而不是数字
- 我有一个angular JS表单,它成功地将数据插入数据库,但没有显示在表单下面的列表中
- 我怎么能有一个iframe来显示目标页面及其所有内容's元素的比例为50%
- Dojo:对于网格中的每一行,都有一个按钮,单击该按钮可以显示数据存储中的更多信息
- 使用JS或Jquery-是否可以有一个只读字段,该字段显示有掩码,但在复制时不显示掩码值
- 使用不同的持续时间显示一个接一个的图像,中间有一个空白屏幕
- 我怎么能有一个下拉隐藏/显示取决于另一个下拉的选择
- 我试图有一个按钮,显示和隐藏我的形象
- 在表中,每行都有一个编辑按钮.显示或隐藏按钮取决于本行中的另一个值
- Google maps api:显示一个箭头,表示在地图上有一个不可见的标记
- 我在AJAX调用中有一个SOAP信封,请求体显示结果,但页面不显示