You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.7 KiB
80 lines
2.7 KiB
<script lang="ts">
|
|
import { browser } from "$app/env";
|
|
import { onMount } from "svelte";
|
|
import * as THREE from 'three';
|
|
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
|
|
|
let canvas: HTMLElement|null = null;
|
|
let scene: THREE.Scene|null = null;
|
|
let camera: THREE.PerspectiveCamera|null = null;
|
|
let renderer: THREE.WebGLRenderer|null = null;
|
|
let kitty: any = null;
|
|
let controls: OrbitControls|null = null;
|
|
|
|
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
|
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
|
|
const cube = new THREE.Mesh( geometry, material );
|
|
const texture = "/models/PotatoCat.dae";
|
|
|
|
function animate() {
|
|
requestAnimationFrame( animate );
|
|
// controls.update();
|
|
renderer.render( scene, camera );
|
|
// kitty.scale.x += 0.01;
|
|
// kitty.scale.y += 0.01;
|
|
// kitty.scale.z += 0.01;
|
|
}
|
|
|
|
onMount(() => {
|
|
if(browser && canvas) {
|
|
scene = new THREE.Scene();
|
|
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
|
renderer = new THREE.WebGLRenderer();
|
|
// controls = new OrbitControls( camera, renderer.domElement );
|
|
const loader: FBXLoader = new FBXLoader();
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
canvas.appendChild( renderer.domElement );
|
|
|
|
// const light = new THREE.AmbientLight( 0xff0000 ); // soft white light
|
|
// light.position.y = 100;
|
|
// light.position.x = 100;
|
|
// scene.add( light );
|
|
|
|
scene.background = new THREE.Color(0x18181b);
|
|
|
|
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
|
|
scene.add( directionalLight );
|
|
|
|
loader.load('/models/potatgato.fbx', function ( object: any ) {
|
|
kitty = object;
|
|
|
|
// object.traverse( function ( child: any ) {
|
|
|
|
// if ( child.isMesh ) {
|
|
|
|
// console.log( child.geometry.attributes.uv );
|
|
// child.material.map = texture; // assign your diffuse texture here
|
|
|
|
// }
|
|
|
|
// } );
|
|
|
|
scene.add( object );
|
|
}, undefined, function ( error: any ) {
|
|
console.error( error );
|
|
});
|
|
|
|
camera.position.z = 100;
|
|
camera.position.y = 50;
|
|
camera.position.x = 0;
|
|
// controls.update();
|
|
animate();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<main bind:this={canvas} class="-mt-40">
|
|
|
|
</main> |