danjoredd/3d_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

created base template for threeJS website. Will add to it when I come up with concept.

Browse Source
This commit is contained in:
Daniel Jones 2024-04-08 16:50:33 -05:00
parent 69108e4c49
commit 8a4ade687a
3 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
doge.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

19
index.html
View File

@ -7,8 +7,27 @@
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<canvas id="bg"></canvas> <canvas id="bg"></canvas>
<header>
<h1> Daniel Jones</h1>
<p>Web Developer, Game Designer, and Author</p>
</header>
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
</body> </body>
</html> </html>

21
main.js
View File

@ -4,8 +4,12 @@ import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three'; import * as THREE from 'three';
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({
@ -18,11 +22,7 @@ camera.position.setZ(30);
renderer.render(scene, camera); renderer.render(scene, camera);
const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
const material = new THREE.MeshStandardMaterial({color: "green"});
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
const pointLight = new PointLight(0xffffff, 150); const pointLight = new PointLight(0xffffff, 150);
@ -37,15 +37,20 @@ const lightHelper = new THREE.PointLightHelper(pointLight);
const gridHelper = new THREE.GridHelper(200, 50); const gridHelper = new THREE.GridHelper(200, 50);
scene.add(gridHelper, lightHelper); scene.add(gridHelper, lightHelper);
const controls = new OrbitControls(camera, renderer.domElement) const controls = new OrbitControls(camera, renderer.domElement);
scene.background = "black";
function animate(){ function animate(){
requestAnimationFrame(animate); requestAnimationFrame(animate);
torus.rotation.x += 0.01;
torus.rotation.y -= 0.01;
torus.rotation.z -= 0.01;
renderer.render(scene, camera) renderer.render(scene, camera)
} }