THREE JS WebSite Example
How can i optimize it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maintenance LLC</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" /> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm mt-lg-5 mb-lg-5">
<h1>Lorem Ipsum</h1>
</div>
<div class="col-sm mt-lg-5 mb-lg-5">
<div class="float-lg-end float-xs-left">
<h1>Lorem Ipsum</h1>
</div>
</div>
</div>
</div>
<div class="container mb-5">
<div class="row mb-5">
<div class="col-sm">
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quidem a tempore officiis ex illo ab reprehenderit eligendi in fugiat provident iste voluptates qui est, distinctio debitis. Tempore, labore non.
Corporis neque ducimus id est repellendus accusamus inventore commodi sequi ea! Sint quisquam, ad tenetur quia vero nam quas ea atque veniam quae dolorem reiciendis, commodi cupiditate ipsum culpa corrupti?
</h3>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<div id='canvas'></div>
<h2 class="desc"> Lorem Ipsum </h2>
<h2 class="price"> Lorem </h2>
<button type="button" class="btn btn-secondary" id='btn'>Lorem Ipsum</button>
</div>
<div class="col-sm">
<div id='canvas' class='number2'></div>
<h2 class="desc"> Lorem Ipsum </h2>
<h2 class="price"> Lorem </h2>
<button type="button" class="btn...
CSS
body {
background-color: white;
}
/*h1 {
float: right;
padding-top: 5rem;
padding-bottom: 5rem;
}*/
/*.container {
display: flex;
justify-content: space-between;
flex-direction: row;
}*/
#canvas {
width: 25rem;
height: 25rem;
border: 1px solid black;
padding-left: 0px;
padding-right: 0px;
}
.price {
color: green; !important
}
#btn {
margin-top: 1rem;
margin-bottom: 1rem;
}
.desc {
margin-top: 1rem;
margin-bottom: 1rem;
}
JavaScript
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
const container = document.querySelector("#canvas");
const container2 = document.querySelector(".number2");
const container3 = document.querySelector(".number3");
const addObject = (container, modelpath, lightIntensity) => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
const light = new THREE.AmbientLight();
light.intensity = lightIntensity
renderer.setPixelRatio( container.devicePixelRatio );
renderer.setSize( container.offsetWidth, container.offsetHeight );
container.appendChild( renderer.domElement );
// const controls = new OrbitControls( camera, renderer.domElement );
scene.add( light );
const loader = new GLTFLoader();
loader.load(modelpath, function( gltf ) {
const model = gltf.scene;
model.material = new THREE.MeshLambertMaterial({
color: 0xff0000,
side: THREE.DoubleSide
});
scene.add(model);
camera.position.z = 5
function animate() {
requestAnimationFrame( animate );
// controls.update();
// model.rotation.x += 0.01;
model.rotation.y += 0.001;
renderer.render( scene, camera );
}
animate()
});
}
addObject(container, '3dmodel/scene.gltf', 3);
addObject(container2, 'meat/scene.gltf', 3);
addObject(container3, 'tushenka/scene.gltf', 4);