个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我开发了一个简单的 two.js 应用程序来呈现立方体。我创建了三个文件:index.html、viewer_style.css 和 viewer.js。
index.html的内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<link rel='stylesheet' type='text/css' href='viewer_style.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/renderers/Projector.js"></script>
</head>
<body>
<script src="viewer.js"></script>
</body>
</html>
viewer.js的内容如下:
// SCENE
var scene = new THREE.Scene();
// CAMERA
var frustumHeight;
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.OrthographicCamera(- frustumHeight * aspect / 2, frustumHeight * aspect / 2, frustumHeight / 2, - frustumHeight / 2, 1, 2000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;
// CUBE
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshPhongMaterial({color: 0xbaf5e8, flatShading: true});
var cube = new THREE.Mesh( geometry, material );
cube.receiveShadow = true;
scene.add(cube);
// BOUNDING BOX
var helper_bbox = new THREE.BoxHelper(cube);
helper_bbox.update();
scene.add(helper_bbox);
// AXES
var helper_axes = new THREE.AxisHelper();
scene.add(helper_axes);
// FIT ALL:
var bbox_radius = helper_bbox.geometry.boundingSphere.radius;
if(aspect < 1){
frustumHeight = 2 * bbox_radius;
}
else{
frustumHeight = 2 * bbox_radius / aspect;
}
camera.left = - frustumHeight * aspect / 2;
camera.right = frustumHeight * aspect / 2;
camera.top = frustumHeight / 2;
camera.bottom = - frustumHeight / 2;
camera.updateProjectionMatrix();
// RENDERER
var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// LIGHTS
var ambientLight = new THREE.AmbientLight(0x101010, 1.0);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(1.0, 1.0, 1.0).normalize();
scene.add(directionalLight);
directionalLight_2 = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight_2.position.set(-1.0, -1.0, 1.0).normalize();
scene.add(directionalLight_2);
// CONTROLS
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera);
window.addEventListener( 'resize', onWindowResize, false );
function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function onWindowResize(){
var aspect = window.innerWidth / window.innerHeight;
camera.left = - frustumHeight * aspect / 2;
camera.right = frustumHeight * aspect / 2;
camera.top = frustumHeight / 2;
camera.bottom = - frustumHeight / 2;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
camera.lookAt(scene.position);
}
animate();
我打算使用立方体边界球体的半径，以一定的边距使立方体适合场景。它似乎工作正常，如下图所示:
但是，我将 viewer.js 中的相机位置更改为以下内容:
camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;
在这种情况下，我得到这样的信息:
在这种情况下，立方体不适合屏幕。我认为这是因为我在错误的引用系中测量边界球体的半径。但是，我一直无法找到解决此问题的方法。
有人知道我做错了什么吗？我使用的方法正确吗？提前致谢。
最佳答案
如果您更改 aspect < 1，则您的代码是正确的至aspect > 1 ，按照建议。这是一个带有代码的 jsfiddle 演示了这一点: https://jsfiddle.net/holgerl/kk5h39qa/
关于javascript - Three.js 正交相机 : zoom all for a cube with perspective，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45996637/
25
4
0
我有一个由给定时刻的一组节点组成的图。该图可能会随着时间的推移而演变，即节点之间的关系以及节点本身可能会发生变化。 绘图必须是正交绘图。 我想画出图表的演变过程，即在不同的时刻绘制图表的图像，尝试从一
我有一个由 graphviz 工具制作的无向图(现在我正在使用 sfdp ): digraph structs { node [shape=Mrecord, URL="index_ne
我有一个世界地图的正交投影，在 D3 中并使用 TopoJSON。我通过调用此代码为每次加载数据的国家/地区着色。 地球在不停地旋转。 我的问题是，在旋转过程中我收到错误消息: 错误 >> 错误:在
我是 opencv 和 c++ 的新手，一直在尝试确定两条线是否几乎相互垂直/正交。有这个公式可以确定它们是否完全正交(m1*m2 = -1)，而 m1 是第一个直线的斜率，m2 是第二个直线的斜率。
悬停时按钮会翻转但无法显示透视图。这就像动画的平面正交 View 。我使用的 perspective 属性有误吗？ @import 'https://necolas.github.io/normali
我正在尝试使用高斯积分来近似函数的积分。 (更多信息在这里:http://austingwalters.com/gaussian-quadrature/)。第一个函数在区间 [-1,1] 上。第二个函
我在使用 opengl 绘制简单的 2d 纹理四边形时遇到了 z fighting 的一些问题。症状是两个物体以相同的速度移动，一个在另一个上面，但周期性地一个可以看穿另一个，反之亦然 - 有点像“闪
我正在尝试在背景图像(正交投影)顶部使用 Frustum 投影渲染一些网格。无论我做什么，背景图像始终位于场景顶部(隐藏网格)。 我尝试了一个小测试 - 当我用相同的投影矩阵渲染它们时 以正确的顺序
我是一名优秀的程序员,十分优秀！