繁体   English   中英

如何在Three.js的透视相机上创建旋转?

How to create rotation on perspective camera on Three.js?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我已经在Three.js构建了一些3D-TileMap。

目前,我的PerspectiveCamera遇到问题。 我不会添加诸如“ Map rotating或“ zooming类的摄影机处理功能。 缩放始终有效,这里我仅使用field of viewmousewheel

但是,如何实现地图旋转? 当我使用camera的坐标修改xyz时 ,我误会了计算结果。

这是我目前的工作:

 function Input(renderer, camera) { var press = false var sensitivity = 0.2 renderer.domElement.addEventListener('mousemove', event => { if(!press){ return } camera.position.x += event.movementX * sensitivity camera.position.y += event.movementY * sensitivity camera.position.z += event.movementY * sensitivity / 10 }) renderer.domElement.addEventListener('mousedown', () => { press = true }) renderer.domElement.addEventListener('mouseup', () => { press = false }) renderer.domElement.addEventListener('mouseleave', () => { press = false }) renderer.domElement.addEventListener('mousewheel', event => { // Add MIN/MAX LIMITS const ratio = camera.position.y / camera.position.z camera.position.y -= (event.wheelDelta * sensitivity * ratio) camera.position.z -= (event.wheelDelta * sensitivity) camera.updateProjectionMatrix() }) } var controls; const Type = 'WebGL'; // WebGL or Canvas var _width, _height, CUBE_SIZE, GRID, TOTAL_CUBES, WALL_SIZE, HALF_WALL_SIZE, MAIN_COLOR, SECONDARY_COLOR, cubes, renderer, camera, scene, group var clock = new THREE.Clock(); clock.start(); var FOV = 45; _width = window.innerWidth _height = window.innerHeight CUBE_SIZE = 80 /* width, height */ GRID = 12 /* cols, rows */ TOTAL_CUBES = (GRID * GRID) WALL_SIZE = (GRID * CUBE_SIZE) HALF_WALL_SIZE = (WALL_SIZE / 2) MAIN_COLOR = 0xFFFFFF SECONDARY_COLOR = 0x222222 cubes = [] var directions = []; var normalized = []; switch(Type) { case 'WebGL': renderer = new THREE.WebGLRenderer({antialias: true}) break; case 'Canvas': renderer = new THREE.CanvasRenderer({antialias: true}) break; } camera = new THREE.PerspectiveCamera(FOV, (_width / _height), 0.1, 10000) scene = new THREE.Scene() group = new THREE.Object3D() /* -- -- */ setupCamera(0, 0, 800) setupBox(group) setupFloor(group) setupCubes(group) setupLights(group) group.position.y = 10 group.rotation.set(-60 * (Math.PI/180), 0, -45 * (Math.PI/180)) scene.add(group) setupRenderer(document.body) window.addEventListener('resize', resizeHandler, false) new Input(renderer, camera); /* -- -- */ function resizeHandler() { _width = window.innerWidth _height = window.innerHeight renderer.setSize(_width, _height) camera.aspect = _width / _height camera.updateProjectionMatrix() } /* -- CAMERA -- */ function setupCamera(x, y, z) { camera.position.set(x, y, z) scene.add(camera) } /* -- BOX -- */ function setupBox(parent) { var i, boxesArray, geometry, material boxesArray = [] geometry = new THREE.BoxGeometry(WALL_SIZE, WALL_SIZE, 0.05) geometry.faces[8].color.setHex(SECONDARY_COLOR) geometry.faces[9].color.setHex(SECONDARY_COLOR) geometry.colorsNeedUpdate = true material = new THREE.MeshBasicMaterial({ color : MAIN_COLOR, vertexColors : THREE.FaceColors, overdraw: 0.5 }) for (i = 0; i < 5; i++) { boxesArray.push(new THREE.Mesh(geometry, material)) } // back boxesArray[0].position.set(0, HALF_WALL_SIZE, -HALF_WALL_SIZE) boxesArray[0].rotation.x = 90 * (Math.PI/180) // right boxesArray[1].position.set(HALF_WALL_SIZE, 0, -HALF_WALL_SIZE) boxesArray[1].rotation.y = -90 * (Math.PI/180) // front boxesArray[2].position.set(0, -HALF_WALL_SIZE, -HALF_WALL_SIZE) boxesArray[2].rotation.x = -90 * (Math.PI/180) // left boxesArray[3].position.set(-HALF_WALL_SIZE, 0, -HALF_WALL_SIZE) boxesArray[3].rotation.y = 90 * (Math.PI/180) // bottom boxesArray[4].position.set(0, 0, -WALL_SIZE) boxesArray.forEach(function(box) { box.renderOrder = 1; parent.add(box) }); } /* -- FLOOR -- */ function setupFloor(parent) { var i, tilesArray, geometry, material tilesArray = [] geometry = new THREE.PlaneBufferGeometry(WALL_SIZE, WALL_SIZE) material = new THREE.MeshLambertMaterial({ color : MAIN_COLOR, overdraw: 1 }) for (i = 0; i < 8; i++) { tilesArray.push(new THREE.Mesh(geometry, material)) } tilesArray[0].position.set(-WALL_SIZE, WALL_SIZE, 0) tilesArray[1].position.set(0, WALL_SIZE, 0) tilesArray[2].position.set(WALL_SIZE, WALL_SIZE, 0) tilesArray[3].position.set(-WALL_SIZE, 0, 0) tilesArray[4].position.set(WALL_SIZE, 0, 0) tilesArray[5].position.set(-WALL_SIZE, -WALL_SIZE, 0) tilesArray[6].position.set(0, -WALL_SIZE, 0) tilesArray[7].position.set(WALL_SIZE, -WALL_SIZE, 0) tilesArray.forEach(function(tile) { tile.receiveShadow = true tile.renderOrder = 4; parent.add(tile) }) } /* -- CUBES --*/ function setupCubes(parent) { var i, geometry, material, x, y, row, col geometry = new THREE.BoxGeometry(CUBE_SIZE, CUBE_SIZE, 0.05) material = new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader().load('http://ak.game-socket.de/assets/grass.png'), normalMap: new THREE.TextureLoader().load('http://ak.game-socket.de/assets/paper_low_nmap.png'), overdraw: 1, depthTest: true, depthWrite: true } ); x = 0 y = 0 row = 0 col = 0 for (i = 0; i < TOTAL_CUBES; i++) { cubes.push(new THREE.Mesh(geometry, material)) if ((i % GRID) === 0) { col = 1 row++ } else col++ x = -(((GRID * CUBE_SIZE) / 2) - ((CUBE_SIZE) * col) + (CUBE_SIZE/2)) y = -(((GRID * CUBE_SIZE) / 2) - ((CUBE_SIZE) * row) + (CUBE_SIZE/2)) cubes[i].position.set(x, y, 0) } cubes.forEach(function(cube, index) { if(index % 2 == 0) { directions[index] = -1; normalized[index] = false; } else { directions[index] = 1; normalized[index] = true; } cube.castShadow = true cube.receiveShadow = true cube.rotation.x = 0; cube.renderOrder = 3; cube.doubleSide = true; parent.add(cube) }) } /* -- LIGHTS -- */ function setupLights(parent) { var light, soft_light light = new THREE.DirectionalLight(MAIN_COLOR, 1.25) soft_light = new THREE.DirectionalLight(MAIN_COLOR, 1.5) light.position.set(-WALL_SIZE, -WALL_SIZE, CUBE_SIZE * GRID) light.castShadow = true soft_light.position.set(WALL_SIZE, WALL_SIZE, CUBE_SIZE * GRID) parent.add(light).add(soft_light) } /* -- RENDERER -- */ function setupRenderer(parent) { renderer.setSize(_width, _height) renderer.setClearColor(MAIN_COLOR, 1.0); parent.appendChild(renderer.domElement) } var speed = 0.003; var reach = 40; function render() { var delta = clock.getDelta(); requestAnimationFrame(render); cubes.forEach(function(cube, index) { cube.castShadow = true cube.receiveShadow = true if(directions[index] >= 1) { ++directions[index]; if(directions[index] >= reach) { directions[index] = -1 } cube.rotation.x += speed; } else if(directions[index] <= -1) { --directions[index]; if(directions[index] <= -reach) { directions[index] = 1 } cube.rotation.x -= speed; } }); renderer.render(scene, camera) } render(); 
 html, body, canvas { padding: 0; margin: 0; width: 100%; height: 100%; display: block; } 
 <script src="https://rawcdn.githack.com/mrdoob/three.js/dev/build/three.min.js"></script> <script src="https://rawcdn.githack.com/mrdoob/three.js/dev/examples/js/renderers/CanvasRenderer.js"></script> <script src="https://rawcdn.githack.com/mrdoob/three.js/dev/examples/js/renderers/Projector.js"></script> <script src="https://rawcdn.githack.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script> <script src="https://rawcdn.githack.com/mrdoob/three.js/dev/examples/js/shaders/ParallaxShader.js"></script> 

通过选项,我不希望旋转/缩放达到地图的末端-例如,用户无法在地图下查看。

问题暂未有回复.您可以查看右边的相关问题.
1 如何在Three.js中获得透视相机的角度值?

如何从三维场景中的透视相机的每个角度获取值。 我正在使用Three.js库。 为了更准确,我将用下一个标志标记我想知道的内容: 我需要知道什么坐标: 这对我来说是必要的,因为我正在创建一个真实的模式地图引擎,通过鼠标光标移动3D场景。 我想要实现的目标可以在这里找到 ...

2 Three.js透视相机的Z位置

我的应用程序具有使用以下方法创建的PerspectiveCamera : 还有一个GridHelper ,它是场景的子代。 我想看到整个GridHelper元素,它位于屏幕的中心并延伸到水平或垂直边框。 例如: 我决定使用相机的z位置。 但是我不知道如何为任何设备精确地计算它,因为不同手 ...

3 Three.JS:旋转相机,更改LookAt

我们最近开始使用Three.js,并且在OrbitControls方面遇到一些困难。 我们想要更改OrbitControls,而不是围绕目标旋转点,而是要旋转摄像机本身。 从本质上改变它的外观。 以前有人遇到过这样的要求吗? ...

4 three.js:限制相机的旋转

我正在与three.js合作,尝试为真实世界的相机建模。 因此,我想将其旋转轴沿x和y轴限制为90度。 有没有简单的方法可以做到这一点? 我当前的代码运行不佳(当您尝试同时将摄像机移过X和Y边界时,这会发疯) if(xRot != null &amp;&amp; xRo ...

5 Three.js,围绕中心旋转相机

在OrbitControls和旋转方面遇到了一些问题。 我正在使用OrbitControls,但平移后似乎无法使相机绕“新”中心旋转。 希望在正确的方向上有所帮助! 根据以下示例使用正交摄影机。 https://threejs.org/examples/misc_contro ...

6 动画透视相机以模拟轨道控制 [three.js]

我试图在单击时为相机设置动画以围绕 0,0,0 处的对象旋转。 我已经使用 TWEEN 尝试了如下所示的设置,但相机似乎在移动而不是在旋转。 我还尝试使用带有位置 + 相机旋转的 AnimationClip,但线性插值会导致相机从 A 点线性移动到 B 点而不是曲线。 有什么方法可以实现我想要的功能 ...

7 如何在Three.js中并行使用相机上的视图偏移和缩放属性

我正在尝试使用PerspectiveCamera编程three.js场景。 画布将显示整个摄像机视图的子区域,并且还将具有缩放比例。 我已经仔细检查过我的偏移量数字是否正确以及缩放系数是否合理。 在完全垂直配合下 当缩放为1时,偏移量可以完美工作,但是当缩放系数更改时,一切都会 ...

8 如何在Three.js中旋转曲线?

我正在尝试在Three.js中旋转Curve (尤其是EllipseCurve )。 我的应用程序基本上是这样的: http : //jsfiddle.net/w9914420/krw8nwLn/14/ 但是EllipseCurve不能在Y EllipseCurve旋转。 有没有办法在 ...

10 使用Three.js在本地轴上旋转相机X

我是Three.js的新手,还是3D空间引擎的新手,我想实现的是360度等矩形图像查看器。 到目前为止,我的脚本所做的是在0,0,0处创建一个摄影机,并在同一位置创建一个球体网格,并反转法线和360度图像的发射贴图。 使用Blender的视口表示场景。 应该使用户能够使用 ...

2016-12-07 12:38:56 1 1187   three.js
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM