3d Model Positioning in ThreeJS Play code.io:

Question

How do I make my model so that when a user clicks and drags they can see the model from different positions? (Like when you are editing a 3D model). I am new to threeJS. The model and scene are also rendering properly. This is my code for threeJS:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000000000 );
camera.position.set(0, 2, 5);
const light = new THREE.AmbientLight( 0xffffff ); // White light
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
scene.add( light );
renderer.setClearColor(0x000000);
camera.position.z = 110; // Make some experiments with position
camera.position.y = 20; // Make some experiments with position
camera.position.x = 15; // Make some experiments with position
document.body.appendChild( renderer.domElement );

loader.load( 'plane.gltf', function ( gltf ) {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );

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

I think it would be a good idea to mark the post from THIS topic as solved before you ask another question and expect an answer. Especially since you're using the code from the previous question. — Łukasz Daniel Mastalerz
– Łukasz Daniel Mastalerz, Commented Dec 11, 2024 at 17:27

A_____ A_______ · Accepted Answer · 2024-12-18 04:10:55Z

0

you can use OrbitControls then you can

rotate (arrorund dot which set as target)
scale (move your perspective camera closer or further)
move what you see (orbit controls move camera not scene)

documentation: https://threejs.org/docs/index.html?q=controls#examples/en/controls/OrbitControls
example of usage: https://threejs.org/examples/?q=orbit#misc_controls_orbit

answered Dec 18, 2024 at 4:10

A_____ A_______

4902 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

3d Model Positioning in ThreeJS Play code.io:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related