Mesh Disappear when zooming in or out

Questions
1

I’m using OrbitControls for orbiting around the mesh but when I zoom in or out with mouse scroll planeMesh and most of the thing disappear.
See here


The code :

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

const renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setClearColor(0xA3A3A3);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

const orbit = new OrbitControls(camera, renderer.domElement);

camera.position.set(10, 5, 10);
orbit.update();

const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
scene.add(directionalLight);
directionalLight.position.set(3, 3, 3);


const planeMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(20, 20),
    new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        visible: false
    })
);
planeMesh.rotateX(-Math.PI / 2);
scene.add(planeMesh);

const grid = new THREE.GridHelper(20, 20);
scene.add(grid);

const highlightMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(1, 1),
    new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        transparent: true
    })
);
highlightMesh.rotateX(-Math.PI / 2);
highlightMesh.position.set(0.5, 0, 0.5);
scene.add(highlightMesh);

// mouse interaction 
const mousePosition = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
let intersects;
window.addEventListener( 'mousemove', function(e){
	
});


function animate() {
    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});```
2

Works ok. Maybe big scrolling of mouse or some error into console.

3

Thanks for your reply but I don’t do big scrolling of mouse and don’t see any console error.

4

Check into console what is camera.position after scrolling. You need create camera out of import or add console.log(camera.position) after scrolling.
image

Also can try this:

import * as THREE from 'three';
import {OrbitControls} from './jsm/controls/OrbitControls.js';

const renderer = new THREE.WebGLRenderer({antialias: true,logarithmicDepthBuffer:true});

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setClearColor(0xA3A3A3);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.5,
    10000
);

const orbit = new OrbitControls(camera, renderer.domElement);

camera.position.set(1, 0.5, 1);
orbit.update();

const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
scene.add(directionalLight);
directionalLight.position.set(3, 3, 3);


const planeMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2),
    new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        visible: false
    })
);
planeMesh.rotateX(-Math.PI / 2);
scene.add(planeMesh);

const grid = new THREE.GridHelper(20, 20);
scene.add(grid);

const highlightMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(1, 1),
    new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        transparent: true
    })
);
highlightMesh.rotateX(-Math.PI / 2);
highlightMesh.position.set(0.5, 0, 0.5);
scene.add(highlightMesh);

// mouse interaction
const mousePosition = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
let intersects;
window.addEventListener( 'mousemove', function(e){

});


function animate() {
    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});
5

When I don’t scroll camera position is like this :

_Vector3 {x: 0.9999999999999998, y: 0.4999999999999999, z: 1}
x: 0.9999999999999998
y: 0.4999999999999999
z: 1
[[Prototype]]
: Object

But after scrolling this gets :

_Vector3 {x: 0.9999999999999998, y: 0.4999999999999999, z: 1}
x: NaN
y: NaN
z: NaN
[[Prototype]]: Object
6

Are you using same version of three.js and OrbitControls.js ? You can send archive withe three.js and OrbitControls.js and i will test it.

7

Of course!! That would be great. And I think three.js and OrbitControls.js will be same as I install it using npm and they must have the same version I guess
Cloning And Animating Models Loaded From glTF Files.rar (3.6 KB)

8

I downloaded 160 and OrbitControls.js from threejs.org. Works ok. I installed npm with three.js and orbit, works ok. Then need to find where is isuue into Orbitcontrol.js and your mouse. I add console.log into OrbitControls.js. You can add you console logs to find issue
OrbitControls.js (30.9 KB)

9

Thank you so much

1 Like