GitLab system status is available here and here

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

commit texture

parent acf68537
dark.png

274 KB

<!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>
File added
This diff is collapsed.
<!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>
<!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';