How to make 3D model viewport on website?

Hi everyone.

I’m making a portfolio site for a 3D artist and I need to create a 3D model viewport.
For this I use the GLTF format model.
For now I can load the model and rotate it using the OrbitController.

But I still have 2 problems:

  1. I can’t use HDR image for background. I’ve tried to make it by this guide (11 How to make 360 HDRI background three.js - YouTube), but it doesn’t work.
    Here’s my code: (all libraries )
LOADING_MANAGER = new THREE.LoadingManager();
RGBE_LOADER.load('./media/hdr/quarry_01_1k.hdr', function(hdr){
        hdr.mapping = THREE.EquirectangularReflectionMapping;
		SCENE.background = hdr;
		SCENE.environment = hdr;

I add all libraries in html code, for example:

    <script src=''></script>
    <script src=''></script>
    <script src=''></script>
    <script src=''></script>
    <script src=''></script>
  1. When I scrolling, camera in viewport moving away from model and scrolling website at the same time.
    I want the camera to move only when the mouse is in the viewport area. And the website only scrolled when the mouse was out of the viewport.
    Can I check this somehow?

Is there a reason for using an outdated version of three.js? The problem is that your HDRI code snippet does not work with r99. I suggest you use the latest version r139.

How do you create your instance of OrbitControls?

I was inattentive and did not pay attention to the version. :sweat_smile:
Now, with r139 version it works.

I took it from another guide

function initControls() {

    CONTROLS = new THREE.OrbitControls( CAMERA, RENDERER.domElement );

    //CONTROLS.minPolarAngle = Math.PI * 1 / 4;
    CONTROLS.maxPolarAngle = Math.PI * 2 / 4;

    CONTROLS.rotateSpeed = 1.2;
    CONTROLS.zoomSpeed = 1.2;
    CONTROLS.panSpeed = 0.8;

    MOUSE = new THREE.Vector2();

I’m a little shocked. I removed the mouse tracking and the second problem was solved. :sweat_smile:

Thank you very much for your help! :з

1 Like