feat: add render logic and orbital control for shirt model
This commit is contained in:
parent
673b8727d2
commit
c1126dc6d1
@ -1,8 +1,46 @@
|
|||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||||||
|
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"
|
||||||
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||||
|
|
||||||
|
|
||||||
const scene = new THREE.Scene();
|
const scene = new THREE.Scene();
|
||||||
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||||
|
|
||||||
const renderer = new THREE.WebGLRenderer();
|
const renderer = new THREE.WebGLRenderer();
|
||||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
document.body.appendChild( renderer.domElement );
|
renderer.setAnimationLoop(animate);
|
||||||
|
document.body.appendChild(renderer.domElement);
|
||||||
|
|
||||||
|
const loader = new GLTFLoader();
|
||||||
|
let shirtMesh;
|
||||||
|
|
||||||
|
const draco = new DRACOLoader()
|
||||||
|
draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/")
|
||||||
|
loader.setDRACOLoader(draco)
|
||||||
|
|
||||||
|
loader.load(
|
||||||
|
'/models/ShirtBaked2.glb',
|
||||||
|
function (gltf) {
|
||||||
|
shirtMesh = gltf.scene;
|
||||||
|
shirtMesh.position.set(0, -1, 0);
|
||||||
|
shirtMesh.scale.set(5, 5, 5);
|
||||||
|
scene.add(shirtMesh);
|
||||||
|
console.log('Model loaded successfully');
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
function (error) {
|
||||||
|
console.error('Failed to load model:', error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.8 );
|
||||||
|
scene.add( ambientLight );
|
||||||
|
|
||||||
|
camera.position.z = 5;
|
||||||
|
|
||||||
|
function animate(time) {
|
||||||
|
renderer.render(scene, camera);
|
||||||
|
}
|
||||||
|
|
||||||
|
const controls = new OrbitControls( camera, renderer.domElement );
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user