mirror of
https://github.com/YuzuZensai/Simple-ThreeJS-3D-Viewer.git
synced 2026-09-13 10:49:16 +00:00
✨ feat: Initial commit
This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Simple 3D Viewer</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scene,
|
||||
canvas {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#loadOverlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
|
||||
#ctext {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="loadOverlay">
|
||||
<div id="ctext">Loading</div>
|
||||
</div>
|
||||
|
||||
<div class="scene"></div>
|
||||
<script src="js/three.js"></script>
|
||||
<script src="js/OrbitControls.js"></script>
|
||||
<script src="js/GLTFLoader.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,124 @@
|
||||
let pre_Sec = 0;
|
||||
const modelPath = "models/gltf/Cube.gltf";
|
||||
|
||||
// Scene
|
||||
const scene = new THREE.Scene();
|
||||
|
||||
// Background color
|
||||
scene.background = new THREE.Color(0x000);
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
logarithmicDepthBuffer: true
|
||||
});
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
const controls = new THREE.OrbitControls(camera, renderer.domElement);
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const material = new THREE.MeshBasicMaterial({
|
||||
color: 0x00ff00
|
||||
});
|
||||
|
||||
var mixer;
|
||||
var clock = new THREE.Clock();
|
||||
|
||||
// Lights
|
||||
|
||||
const ambient = new THREE.AmbientLight(0xffffff, 0.7);
|
||||
scene.add(ambient);
|
||||
|
||||
const light1 = new THREE.DirectionalLight(0xffffff, 1);
|
||||
light1.position.set(30, 20, 0);
|
||||
scene.add(light1);
|
||||
|
||||
const loader = new THREE.GLTFLoader();
|
||||
|
||||
// Camera
|
||||
camera.position.set(5, 0, 5);
|
||||
|
||||
controls.update();
|
||||
|
||||
let delta = 0;
|
||||
|
||||
// fps
|
||||
let interval = 1 / 240;
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
delta += clock.getDelta();
|
||||
|
||||
if (delta > interval) {
|
||||
|
||||
try {
|
||||
if (mixer && mixer._actions[0] && mixer._actions[0].time) {
|
||||
let currentTime = parseFloat(toFixed(mixer._actions[0].time, 1));
|
||||
|
||||
if (currentTime !== pre_Sec) {
|
||||
// Sync timed animation here
|
||||
}
|
||||
|
||||
pre_Sec = currentTime;
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
|
||||
if (mixer) mixer.update(delta);
|
||||
renderer.render(scene, camera);
|
||||
controls.update();
|
||||
|
||||
delta = delta % interval;
|
||||
}
|
||||
}
|
||||
animate();
|
||||
|
||||
loader.load(modelPath,
|
||||
// called when the resource is loaded
|
||||
function (gltf) {
|
||||
|
||||
document.getElementById('loadOverlay').style.display = "none";
|
||||
|
||||
mixer = new THREE.AnimationMixer(gltf.scene);
|
||||
gltf.animations.forEach((clip) => {
|
||||
mixer.clipAction(clip).play();
|
||||
});
|
||||
gltf.scene.children.forEach(c => {
|
||||
c.frustumCulled = false;
|
||||
c.renderOrder = 1;
|
||||
})
|
||||
|
||||
gltf.scene.traverse((object) => {
|
||||
object.frustumCulled = false;
|
||||
});
|
||||
|
||||
gltf.scene.frustumCulled = false;
|
||||
scene.add(gltf.scene);
|
||||
|
||||
animate();
|
||||
},
|
||||
function (xhr) {
|
||||
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
|
||||
},
|
||||
// called when loading has errors
|
||||
function (error) {
|
||||
console.log('An error happened');
|
||||
}
|
||||
);
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
function toFixed(num, fixed) {
|
||||
var re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?');
|
||||
return num.toString().match(re)[0];
|
||||
}
|
||||
+36366
File diff suppressed because one or more lines are too long
@@ -0,0 +1,117 @@
|
||||
{
|
||||
"asset" : {
|
||||
"generator" : "Khronos glTF Blender I/O v1.7.33",
|
||||
"version" : "2.0"
|
||||
},
|
||||
"scene" : 0,
|
||||
"scenes" : [
|
||||
{
|
||||
"name" : "Scene",
|
||||
"nodes" : [
|
||||
0
|
||||
]
|
||||
}
|
||||
],
|
||||
"nodes" : [
|
||||
{
|
||||
"mesh" : 0,
|
||||
"name" : "Cube"
|
||||
}
|
||||
],
|
||||
"materials" : [
|
||||
{
|
||||
"doubleSided" : true,
|
||||
"name" : "Material",
|
||||
"pbrMetallicRoughness" : {
|
||||
"baseColorFactor" : [
|
||||
0.800000011920929,
|
||||
0.800000011920929,
|
||||
0.800000011920929,
|
||||
1
|
||||
],
|
||||
"metallicFactor" : 0,
|
||||
"roughnessFactor" : 0.4000000059604645
|
||||
}
|
||||
}
|
||||
],
|
||||
"meshes" : [
|
||||
{
|
||||
"name" : "Cube",
|
||||
"primitives" : [
|
||||
{
|
||||
"attributes" : {
|
||||
"POSITION" : 0,
|
||||
"NORMAL" : 1,
|
||||
"TEXCOORD_0" : 2
|
||||
},
|
||||
"indices" : 3,
|
||||
"material" : 0
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"accessors" : [
|
||||
{
|
||||
"bufferView" : 0,
|
||||
"componentType" : 5126,
|
||||
"count" : 24,
|
||||
"max" : [
|
||||
1,
|
||||
1,
|
||||
1
|
||||
],
|
||||
"min" : [
|
||||
-1,
|
||||
-1,
|
||||
-1
|
||||
],
|
||||
"type" : "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView" : 1,
|
||||
"componentType" : 5126,
|
||||
"count" : 24,
|
||||
"type" : "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView" : 2,
|
||||
"componentType" : 5126,
|
||||
"count" : 24,
|
||||
"type" : "VEC2"
|
||||
},
|
||||
{
|
||||
"bufferView" : 3,
|
||||
"componentType" : 5123,
|
||||
"count" : 36,
|
||||
"type" : "SCALAR"
|
||||
}
|
||||
],
|
||||
"bufferViews" : [
|
||||
{
|
||||
"buffer" : 0,
|
||||
"byteLength" : 288,
|
||||
"byteOffset" : 0
|
||||
},
|
||||
{
|
||||
"buffer" : 0,
|
||||
"byteLength" : 288,
|
||||
"byteOffset" : 288
|
||||
},
|
||||
{
|
||||
"buffer" : 0,
|
||||
"byteLength" : 192,
|
||||
"byteOffset" : 576
|
||||
},
|
||||
{
|
||||
"buffer" : 0,
|
||||
"byteLength" : 72,
|
||||
"byteOffset" : 768
|
||||
}
|
||||
],
|
||||
"buffers" : [
|
||||
{
|
||||
"byteLength" : 840,
|
||||
"uri" : "data:application/octet-stream;base64,AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAPwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AACAPwAAAAAAAACAAACAvwAAAAAAAACAAAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAvwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AAAgPwAAAD8AACA/AAAAPwAAID8AAAA/AADAPgAAAD8AAMA+AAAAPwAAwD4AAAA/AAAgPwAAgD4AACA/AACAPgAAID8AAIA+AADAPgAAgD4AAMA+AACAPgAAwD4AAIA+AAAgPwAAQD8AACA/AABAPwAAYD8AAAA/AADAPgAAQD8AAAA+AAAAPwAAwD4AAEA/AAAgPwAAgD8AACA/AAAAAAAAYD8AAIA+AADAPgAAgD8AAAA+AACAPgAAwD4AAAAAAQAOABQAAQAUAAcACgAGABMACgATABcAFQASAAwAFQAMAA8AEAADAAkAEAAJABYABQACAAgABQAIAAsAEQANAAAAEQAAAAQA"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user