效果:
功能:
目前实现了viewCube的坐标方向显示
后续实现viewCube视角控制/重置/恢复
代码:
//【相机】主相机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000000000);//创建一个透视相机 可视角度45度 浏览器的全屏的宽高 水平视锥 最近1 最远2000
camera.position.set(3000, 4000, 3000);
camera.lookAt(scene.position);
scene.add(camera);
//次相机
var aspect = window.innerWidth / window.innerHeight;
var frustumSize = 200;
cameraOrtho = new THREE.OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 0.1, 20000000000);
sceneOrtho.add(cameraOrtho);
//【viewCube】
var materialArr = [];
materialArr.push(new THREE.MeshBasicMaterial({ color: 0x009e60 }));
materialArr.push(new THREE.MeshBasicMaterial({ color: 0x0051ba }));
materialArr.push(new THREE.MeshBasicMaterial({ color: 0xffd500 }));
materialArr.push(new THREE.MeshBasicMaterial({ color: 0xff5800 }));
materialArr.push(new THREE.MeshBasicMaterial({ color: 0xc41e3a }));
materialArr.push(new THREE.MeshBasicMaterial({ color: 0xff00ff }));
var viewBox = new THREE.Mesh(new THREE.BoxBufferGeometry(90, 70, 90, 1, 1, 1), materialArr);
sceneOrtho.add(viewBox);
//【坐标轴】
var axes = new THREE.AxesHelper(100);
viewBox.add(axes);
//【渲染】
renderScene();
function renderScene() {
orbitControls.update();//相机控制刷新
requestAnimationFrame(renderScene);//动画循环渲染起来
//主场景
renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);//主场景视区
renderer.autoClear = false;//【scene.autoClear一定要关闭】
renderer.render(scene, camera);//渲染
//次场景:1.复制主场景相机的位置、四元数,2.设置场景视区,3.渲染
cameraOrtho.position.copy(camera.position);
cameraOrtho.quaternion.copy(camera.quaternion);//Quaternion(表示对象局部旋转的四元数)
cameraOrtho.lookAt(scene.position);
renderer.setViewport(window.innerWidth - 150, window.innerHeight - 150, 150, 150);//【设置次场景视区视口,(x, y,width,height),用来显示viewCube】
renderer.render(sceneOrtho, cameraOrtho);
};