首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么我不能将透视相机配置成三个js内的实际尺寸?

为什么我不能将透视相机配置成三个js内的实际尺寸?
EN

Stack Overflow用户
提问于 2020-09-02 20:19:12
回答 1查看 257关注 0票数 0

我用三个Js来可视化一辆车,但是我的透视相机出了问题。

我希望它看起来更真实:我只想看到前面,而不是后面。我明白了吗?哈哈

我试图改变很多属性,但我无法做到这一点。

这是github储存库

EN

Stack Overflow用户

回答已采纳

发布于 2020-09-03 02:11:40

我可以从你的代码中看到你用鼠标轮改变视场.

这就是你想做的吗?

我想你会改变相机z的位置来放大和缩小,而不是视场。

我建议你喜欢jscastro在评论中说的话,让yout摄像头fov 45靠近你的相机,让你的滚动事件改变相机的位置,而不是fov

这里有一个演示,您可以改变相机的fov和z位置,看看它们是如何交互的。

代码语言:javascript
运行
复制
var camera, scene, renderer, mesh, material, stats;
init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 400;

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);
    
    // Add dat.gui.
    var gui = new dat.GUI();
    var fovgui = gui.add(camera, "fov").onChange(function(newvalue){
      camera.updateProjectionMatrix();
    }).name('camera.fov');
    var posgui = gui.add(camera.position, "z").name('camera.position.z');
    
    gui.add({click: function(){
      camera.fov = 5;
      camera.position.z = 5000;
      camera.updateProjectionMatrix();
      fovgui.updateDisplay();
      posgui.updateDisplay();
    }}, 'click').name('FOV:5 Z:5000');
    
    gui.add({click: function(){
      camera.fov = 70;
      camera.position.z = 400;
      camera.updateProjectionMatrix();
      fovgui.updateDisplay();
      posgui.updateDisplay();
    }}, 'click').name('FOV:70 Z:400');
    
    gui.add({click: function(){
      camera.fov = 130;
      camera.position.z = 190;
      camera.updateProjectionMatrix();
      fovgui.updateDisplay();
      posgui.updateDisplay();
    }}, 'click').name('FOV:130 Z:190');

}

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
代码语言:javascript
运行
复制
body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}
代码语言:javascript
运行
复制
<script src="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<link href="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63713001

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档