个人中心
gpt4 book ai didi

javascript - three.js 双视口(viewport)只有一个显示

转载 作者：行者123 更新时间：2023-11-30 10:27:55 25 4
gpt4 key购买 nike

我试图在 http://stemkoski.github.io/Three.js/Viewports-Dual.html 上克隆 Lee Stemkoski 的双视口(viewport)优秀示例.

当使用 Firefox 23.0.1 从我的本地 PC Windows 7 上的 github 位置访问它时，它运行良好。但是当我复制源代码并尝试从我的本地驱动器运行它时，它只会显示要渲染的第二个视口(viewport)。如果我注释掉第二个视口(viewport)渲染的代码，那么它会显示第一个视口(viewport) 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>
=========================================================================================================================
=========================================================================================================================

最佳答案

需要以下语句(在 javascript init 函数中)防止渲染器在渲染第一个视口(viewport)后清除其缓冲区:-

    renderer.autoClear = false

关于javascript - three.js 双视口(viewport)只有一个显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18726693/

25 4 0
文章推荐： swift - 如何正确创建 SF 符号？
文章推荐： javascript - 在 Liferay portlet 中放置一个 iframe
文章推荐： swift - 如何让用户上传不同尺寸的照片？
文章推荐： java - 从命令行运行 Jenkins 与作为 Windows 服务
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com