obj thingy works
This commit is contained in:
6357
dist/assets/head-DD9xLfml.obj
vendored
Normal file
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
4
dist/index.html
vendored
@@ -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>
|
||||||
|
@@ -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
34
main.js
@@ -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);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user