Orbit controls don't move at all

Questions
#1

I have tried setting various properties, as well as using “addEventListener” instead of “update”, and the image remains frozen. I’m hoping to create a skybox. No errors related to this are thrown. Here is the code:

global.THREE = require('three');

const OrbitControls = require('three-orbitcontrols');

const canvasSketch = require('canvas-sketch');

const settings = {
  animate: true,
  dimensions: [ 1024, 1280 ],
 
  context: 'webgl',
 
  attributes: { antialias: true }
};

const sketch = ({ context, width, height }) => {
  
  const renderer = new THREE.WebGLRenderer({
    context
  });



const scene = new THREE.Scene();

const loader = new THREE.TextureLoader();
const texture = loader.load(
    'bg1.jpg',
    () => {
      const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
      rt.fromEquirectangularTexture(renderer,texture);
      scene.background = texture;
    }
  )


  const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 1000);
  camera.lookAt(new THREE.Vector3());
  camera.position.set(2, 2, 2);
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.target.set(0,0,0);
  controls.update();
 

  const geometry = new THREE.BoxGeometry(1, 1, 1);

  
  const material = new THREE.MeshNormalMaterial();

  
  const mesh = new THREE.Mesh(geometry, material);

  
  mesh.scale.setScalar(0.5);

  
  scene.add(mesh);


  return {
    
    resize ({ pixelRatio, viewportWidth, viewportHeight }) {
      renderer.setPixelRatio(pixelRatio);
      renderer.setSize(viewportWidth, viewportHeight);

      camera.aspect = viewportWidth / viewportHeight;

    
      camera.updateProjectionMatrix();
    },
   
    render ({ time }) {
    
      mesh.rotation.y = time * 0.25;
  
      renderer.render(scene, camera);
     
      controls.update();
     
    },
  
    unload () {
      renderer.dispose();
      controls.dispose();
    }
  };
};

canvasSketch(sketch, settings);
#2

This is a very unorthodox code structure. It seems to have a layer of abstraction on top of three.js. Are you sure render() is being called on every frame?

#3

I am using canvas-sketch as well. Perhaps I shouldn’t? I just realized that I had forgotten to call update on renderer, but this did not help either.

#4

I don’t know what canvas-sketch is, but it sounds like it’s preventing orbitControls to get mouse events.

#5

The problem is that you’re using canvas-sketch and it doesn’t look like many people here have used it before. It looks like that’s the source of the problem, but we don’t know for sure. Have you tried copying the plain Three.js OrbitControls code example here?