obj thingy works

This commit is contained in:
CJSatnarine
2025-02-27 18:53:37 -05:00
parent 4e308d78c9
commit 466115060a
6 changed files with 6568 additions and 197 deletions

6357
dist/assets/head-DD9xLfml.obj vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -3,7 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset=" utf-8"> <meta charset=" utf-8">
<title> First three.js app </title> <title> CJ Satnarine website </title>
<style> <style>
body { body {
@@ -11,7 +11,7 @@
} }
</style> </style>
<script type="module" crossorigin src="/assets/index-DLCEVn4m.js"></script> <script type="module" crossorigin src="/assets/index-Co9VroNa.js"></script>
</head> </head>
<body> <body>

View File

@@ -3,7 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset=" utf-8"> <meta charset=" utf-8">
<title> First three.js app </title> <title> CJ Satnarine website </title>
<style> <style>
body { body {

34
main.js
View File

@@ -1,6 +1,9 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
// Vite import for files.
import headURL from "./models/head.obj?url";
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();
@@ -9,20 +12,27 @@ renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate); renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
// Create Cube. camera.position.z = 3;
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x962FFE });
const cube = new THREE.Mesh(geometry, material);
// Add cube. // Lighting.
scene.add(cube); const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
camera.position.z = 5; scene.add(light);
// OBJ loader.
const objectLoader = new OBJLoader();
objectLoader.load(
headURL,
function(object) {
scene.add(object);
},
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function(error) {
console.log('an error happened');
}
);
function animate() { function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera); renderer.render(scene, camera);
} }

View File

@@ -1,12 +1,12 @@
{ {
"dependencies": { "dependencies": {
"three": "^0.174.0" "three": "^0.174.0"
}, },
"devDependencies": { "devDependencies": {
"vite": "^6.2.0" "vite": "^6.2.0"
}, },
"scripts": { "scripts": {
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview"
} }
} }