parent
53ce96446a
commit
956d30d0a0
@ -1,4 +1,4 @@
|
||||
<main class="px-3 lg:px-0 py-10">
|
||||
<main class="px-3 lg:px-0 py-10 text-center">
|
||||
<div class="container mx-auto">
|
||||
Made by <a class="hover:underline" href="https://bartindustries.com/" target="_blank">Midblep</a>.
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,80 @@
|
||||
<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>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Loading…
Reference in new issue