360 scene Can't scale, I don't know what to do with it

Questions
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全景图</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="./js/three.js"></script>
    <script src="./js/OrbitControls.js"></script>
</head>
<body>
<script>
    const width = window.innerWidth;
    const height = window.innerHeight;


    let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        100
    );


    const scene = new THREE.Scene();
    const renderer = new THREE.WebGLRenderer();

    camera.position.set(0, 0, 100);
    camera.lookAt(scene.position);

    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement)

    function create() {
        let urls = [
            './img/home.left.jpg',
            './img/home.right.jpg',
            './img/home.top.jpg',
            './img/home.bottom.jpg',
            './img/home.front.jpg',
            './img/home.back.jpg'
        ];
        let cubeTexture = new THREE.CubeTextureLoader().load(urls);
        scene.background = cubeTexture;
    }

    // 初始化 OrbitControls
    const controls = new THREE.OrbitControls(camera, renderer.domElement);

    controls.enableZoom = true;
    controls.enabled = true;

    // 设置一些 OrbitControls 的属性（可选）
    controls.enableDamping = true; // 启用阻尼效果
    controls.dampingFactor = 0.25; // 阻尼系数
    controls.enableZoom = true; // 启用缩放
    controls.enablePan = true; // 启用平移


    function render() {
        requestAnimationFrame(render);
        controls.update();
        renderer.render(scene, camera);
    }

    create();
    render();


</script>
</body>
</html>



  
// 初始化 OrbitControls
    const controls = new THREE.OrbitControls(camera, renderer.domElement);

    controls.enableZoom = true;
    controls.enabled = true;

    // 设置一些 OrbitControls 的属性（可选）
    controls.enableDamping = true; // 启用阻尼效果
    controls.dampingFactor = 0.25; // 阻尼系数
    controls.enableZoom = true; // 启用缩放
    controls.enablePan = true; // 启用平移


    function render() {
        requestAnimationFrame(render);
        controls.update();
        renderer.render(scene, camera);
    }

I have achieved a panoramic view, and now I can’t zoom. I can’t find the reason. Please help me.

1 Like
2

Just Add Cube in scene and you can see zoom is working. currently you have added texture to background directly this means it doesn’t respond to zoom / dolly — because there’s no geometry, it’s just painted behind everything else. it’s just rendered as if it’s infinitely far away. So zooming has no visible effect.

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/Addons.js";
const width = window.innerWidth;
const height = window.innerHeight;

let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();

camera.position.set(0, 0, 10);
// camera.lookAt(scene.position);

renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

function create() {
  let urls = [
    "left.jpg",
    "right.jpg",
    "top.jpg",
    "bottom.jpg",
    "front.jpg",
    "back.jpg",
  ];
  let cubeTexture = new THREE.CubeTextureLoader().load(urls);
  scene.background = cubeTexture;
  let cubeMesh = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshBasicMaterial({ color: "red" })
  );
  scene.add(cubeMesh);
}

// 初始化 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

// 设置一些 OrbitControls 的属性（可选）
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.25; // 阻尼系数

function render() {
  requestAnimationFrame(render);
  controls.update();
  renderer.render(scene, camera);
}

create();
render();
2 Likes
3

You can achieve a “zoom” like effect by changing the camera FOV.

//ZOOMED:
camera.fov = 15
camera.updateProjectionMatrix():

//UNZOOMED:
camera.fov = 75
camera.updateProjectionMatrix():
4 Likes
4

If you are using a static background where the objects are far away (e.g. the Milky Way galaxy), you shouldn’t be able to use dolly to zoom in on the static background (unless you are traveling many light years - in which case you probably shouldn’t be using a static background).

But you should be able to use a telescope to make them appear bigger, which is exactly what manthrax is proposing.

2 Likes
5

thanks much,i aready realized it by BoxGeometry

6

thanks much,i aready realized it by BoxGeometry,

1 Like
7

thanks much,i aready realized it by BoxGeometry.

2 Likes
8

That works too. :slight_smile: