GitLab system status is available here and here

Skip to content

GitLab

Commit 19ef4a08 authored by Kazi Sakib's avatar Kazi Sakib
Browse files

commit texture

parent acf68537
Expand all Hide whitespace changes
Inline Side-by-side
dark.png 0 → 100644
View file @ 19ef4a08
dark.png

274 KB

final_project.html 0 → 100644
View file @ 19ef4a08
<!DOCTYPE html>
<html>
<head>
<title>shapes</title>
</head>
<body>
<script type="module">
import * as THREE from './js/build/three.module.js'
import { OrbitControls } from './js/examples/jsm/controls/OrbitControls.js'
import { OBJLoader2 } from './js/examples/jsm/loaders/OBJLoader2.js'
let wireframe = false; //true;
//first create a "world" or "scene" to hold the data you will render to the screen (where the data is 3D geometry)
const scene = new THREE.Scene();
//define a camera to look into the 3D world
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//we are going to place our 3D meshes at the center of the world's coordinate system,
// so we move the camera so that it can see them
camera.position.z = 8;
//tell Three.js to render our geometry using the GPU
const renderer = new THREE.WebGLRenderer();
//make the canvas take up the entire browser window
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//once the renderer and camera are created,
// we can define how the camera can be moved
const controls = new OrbitControls(camera, renderer.domElement);
//a 3D object consists of:
// some POINTS (called "geometry") that define the object
// a MATERIAL that defines how the faces of the geometry are rendered
const geometry1 = new THREE.BoxGeometry();
const material1 = new THREE.MeshBasicMaterial({ color: 0xe0f22f });
//you put these together by making a MESH
//we can also make some other kinds of 3D objects (scroll down to "Geometries"
// under https://threejs.org/docs/ for examples):
// instantiate a loader
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
console.log(item, loaded, total);
};
var texture = new THREE.Texture();
var onProgress = function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function (xhr) {
};
var loader = new THREE.ImageLoader(manager);
loader.load('./dark.png', function (image) {
texture.image = image;
texture.needsUpdate = true;
});
var loader = new OBJLoader2(manager);
loader.load( './models/model1.obj', function ( object ) {
object.traverse(function (board) {
if (board instanceof THREE.Mesh) {
board.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Bishop.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = -1.8;
piece.position.z = -3.25;
piece.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Bishop.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = 1.8;
piece.position.z = -3.25;
piece.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Bishop.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = 1.8;
piece.position.z = 3.25;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Bishop.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = -1.8;
piece.position.z = 3.25;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Knight.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = 2.5;
piece.position.z = -3.25;
piece.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Knight.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = -2.5;
piece.position.z = -3.25;
piece.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Knight.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = 2.5;
piece.position.z = 3.25;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Knight.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = -2.5;
piece.position.z = 3.25;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Rook.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = 3.25;
piece.position.z = -3.25;
piece.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Rook.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = -3.25;
piece.position.z = -3.25;
piece.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Rook.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = 3.25;
piece.position.z = 3.25;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Rook.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = -3.25;
piece.position.z = 3.25;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/King.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = -1;
piece.position.z = -3.25;
piece.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/King.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = -1;
piece.position.z = 3.25;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Queen.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = 1;
piece.position.z = -3.25;
piece.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
var loader = new OBJLoader2(manager);
loader.load( './models/Queen.obj', function ( object ) {
object.traverse(function (piece) {
if (piece instanceof THREE.Mesh) {
piece.scale.x = 0.02;
piece.scale.y = 0.02;
piece.scale.z = 0.02;
piece.position.y = 0.5;
piece.position.x = 1;
piece.position.z = 3.25;
}
});
scene.add(object);
}, onProgress, onError);
//setting the mesh material to "wireframe = true" can make it easier to see the faces of the geometry
const animate = function () {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
const light = new THREE.PointLight( 0xffffff, 10, 70);
light.position.set( 50, 10, 10 );
scene.add( light );
function rotateObject(o, dx, dy) {
o.rotation.x += dx;
o.rotation.y += dy;
}
</script>
</body>
</html>
js/.DS_Store 0 → 100644
View file @ 19ef4a08
File added
js/build/three.module.js 0 → 100644
View file @ 19ef4a08
This diff is collapsed.
js/examples/css2d_label.html 0 → 100644
View file @ 19ef4a08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>three.js css2d - label</title>
<link type="text/css" rel="stylesheet" href="main.css">
<style>
.label {
color: #FFF;
font-family: sans-serif;
padding: 2px;
background: rgba( 0, 0, 0, .6 );
}
</style>
</head>
<body>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
let camera, scene, renderer, labelRenderer;
const clock = new THREE.Clock();
const textureLoader = new THREE.TextureLoader();
let moon;
init();
animate();
function init() {
const EARTH_RADIUS = 1;
const MOON_RADIUS = 0.27;
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
camera.position.set( 10, 5, 20 );
scene = new THREE.Scene();
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 0, 1 );
scene.add( dirLight );
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
//
const earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
const earthMaterial = new THREE.MeshPhongMaterial( {
specular: 0x333333,
shininess: 5,
map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
normalScale: new THREE.Vector2( 0.85, 0.85 )
} );
const earth = new THREE.Mesh( earthGeometry, earthMaterial );
scene.add( earth );
const moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, 16, 16 );
const moonMaterial = new THREE.MeshPhongMaterial( {
shininess: 5,
map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
} );
moon = new THREE.Mesh( moonGeometry, moonMaterial );
scene.add( moon );
//
const earthDiv = document.createElement( 'div' );
earthDiv.className = 'label';
earthDiv.textContent = 'Earth';
earthDiv.style.marginTop = '-1em';
const earthLabel = new CSS2DObject( earthDiv );
earthLabel.position.set( 0, EARTH_RADIUS, 0 );
earth.add( earthLabel );
const moonDiv = document.createElement( 'div' );
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
moonDiv.style.marginTop = '-1em';
const moonLabel = new CSS2DObject( moonDiv );
moonLabel.position.set( 0, MOON_RADIUS, 0 );
moon.add( moonLabel );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild( labelRenderer.domElement );
const controls = new OrbitControls( camera, labelRenderer.domElement );
controls.minDistance = 5;
controls.maxDistance = 100;
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
const elapsed = clock.getElapsedTime();
moon.position.set( Math.sin( elapsed ) * 5, 0, Math.cos( elapsed ) * 5 );
renderer.render( scene, camera );
labelRenderer.render( scene, camera );
}
</script>
</body>
</html>
js/examples/css3d_molecules.html 0 → 100644
View file @ 19ef4a08
<!DOCTYPE html>
<html>
<head>
<title>three.js css3d - molecules</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
background-color: #050505;
background: radial-gradient(ellipse at center, rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
}
#topmenu {
position: absolute;
top: 50px;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
}
#menu {
position: absolute;
bottom: 20px;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
}
button {
color: rgb(255,255,255);
background: rgb(255,255,255,0.1);
border: 0px;
padding: 5px 10px;
margin: 2px;
font-size: 14px;
cursor: pointer;
}
button:hover {
background-color: rgba(0,255,255,0.5);
}
button:active {
color: #000000;
background-color: rgba(0,255,255,1);
}
.bond {
width: 5px;
height: 10px;
background: #eee;
display: block;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
<div id="topmenu">
<button id="b_a">Atoms</button><button id="b_b">Bonds</button><button id="b_ab">Atoms + Bonds</button>
</div>
<div id="menu"></div>
<script type="module">
import * as THREE from '../build/three.module.js';