第一个canvas,id =“main”,设置为窗口大小。这个画布的相机附着在一个物体上,这样它就可以像你说的那样用箭头键移动,起始位置(x,y,z)将是0,0,25。这很好用。第二个画布,id =“radar”,设置为150 x 150,绝对位于底部:0和左:0。第二个摄像头是头顶的,起始位置(x,y,z)为0,110,0,旋转x为-1.75。这也有效。如何让他们同时工作。
这是代码
echo'function createRenderer(){';
echo'renderer = new THREE.WebGLRenderer({antialias: true});';
echo'renderer.setClearColor(0xffffff);';
echo'renderer.setSize( window.innerWidth, window.innerHeight );';
echo'main = renderer.domElement;';
echo'main.id = "main";';
echo'AddElem(GetElem("body"),main);';
echo'}';
echo'function createRadar(){';
echo'radar = CreateElem("canvas");';
echo'radar.id = "radar";';
//echo'context = radar.getContext("2d");';
echo'AddElem(GetElem("body"),radar);';
echo'}';
echo'function cameras(){';
echo'sphere0 = new Sphere(0,0,0);';
echo'sphere0.id="s0";';
echo'scene.add(sphere0);';
echo'camera1 = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);';
echo'camera1.matrixAutoUpdate = true;';
echo'Controls.init(sphere0,camera1,0,0,25);';
echo'camera2 = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);';
echo'camera2.position.x = 0;';
echo'camera2.rotation.x = -1.75;';
echo'camera2.position.y = 110;';
echo'camera2.position.z = 0;';
echo'scene.add(camera2);';
echo'}';
echo'function render() {';
echo'requestAnimationFrame( render );';
echo'camera2.lookAt(sphere0.position);';
echo'Controls.update();';
echo'camera2.position.x = sphere0.position.x;';
echo'camera2.position.z = sphere0.position.z;';
echo'camera2.updateProjectionMatrix();';
//echo'renderer.clear();';
echo'renderer.setViewport(1,1,148,148);';
echo'renderer.setRenderTarget(radar);';
echo'renderer.render(scene, camera2);';
echo'renderer.setViewport(0,0,window.innerWidth, window.innerHeight);';
echo'renderer.setRenderTarget(main);';
echo'renderer.render(scene, camera1);';
echo'}';