Arcball controls not working

Questions
,
1

Good day,
I have been trying to set up my 3D object for my portfolio page and I want for people to be able to interact with it. The problem is, I managed to render the object with an animation and could see it, but when I started adding the code for the ArcballControls in order to allow for users to drag and see my object from all sides, the object just disappears and the only thing I see is a black screen !

 <script src="js/three.js"></script> <!--Problem of no rendering anything (sourcing of the script had an error)-->
    <script type="module" src="GLTFLoader.js"></script>
    <script type="module" src="ArcballControls.js"></script>
    <script type="module"> //in order for GLTFLoader to work we need a module tag

        
        import {GLTFLoader} from "./GLTFLoader.js";

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var controls = new ArcballControls( camera, renderer.domElement, scene );

        controls.addEventListener( 'change', function () {

            renderer.render( scene, camera );

        } );

        camera.position.set( 0, 20, 100 );
        controls.update();

Thank you for your time.

2

You imports are wrong. I’m not sure how your project setup looks like but with the official examples it would look like so:

<script type="module">

    import * as THREE from '../build/three.module.js';

    import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
    import { ArcballControls } from './jsm/controls/ArcballControls .js';

So don’t mix global scripts with ES6 modules. Besides, you only need a single <script type="module"> tag and import all dependencies inside of it.

3

Hello,
Thank you for the quick reply! by not mixing the global scripts with the modules you mean to import them the way you showed me in your example rather than using a script tag?

4

The controls work well with the solution you gave which I am thankful for! Another issue appeared for some reason. Whenever I load the page it is a black screen and after I interact with it I can see the object.

5

If you use on-demand rendering you have to call renderer.render( scene, camera ); once when your init routine/scene setup has been finished.

6

Sidenote: Please share code never as screenshots. Read the following to understand why:

http://idownvotedbecau.se/imageofcode

7

Thank you for this and I will note down the screenshot is not a good way of showing your code policy!

1 Like