代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<title>Verge3D 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://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</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 v3d from '../build/v3d.module.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
import { PDBLoader } from './jsm/loaders/PDBLoader.js';
import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
let camera, scene, renderer;
let controls;
let root;
const objects = [];
const tmpVec1 = new v3d.Vector3();
const tmpVec2 = new v3d.Vector3();
const tmpVec3 = new v3d.Vector3();
const tmpVec4 = new v3d.Vector3();
const offset = new v3d.Vector3();
let visualizationType = 2;
const MOLECULES = {
"Ethanol": "ethanol.pdb",
"Aspirin": "aspirin.pdb",
"Caffeine": "caffeine.pdb",
"Nicotine": "nicotine.pdb",
"LSD": "lsd.pdb",
"Cocaine": "cocaine.pdb",
"Cholesterol": "cholesterol.pdb",
"Lycopene": "lycopene.pdb",
"Glucose": "glucose.pdb",
"Aluminium oxide": "Al2O3.pdb",
"Cubane": "cubane.pdb",
"Copper": "cu.pdb",
"Fluorite": "caf2.pdb",
"Salt": "nacl.pdb",
"YBCO superconductor": "ybco.pdb",
"Buckyball": "buckyball.pdb",
//"Diamond": "diamond.pdb",
"Graphite": "graphite.pdb"
};
const loader = new PDBLoader();
const colorSpriteMap = {};
const baseSprite = document.createElement('img');
const menu = document.getElementById("menu");
init();
animate();
function init() {
camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.z = 1000;
scene = new v3d.Scene();
root = new v3d.Object3D();
scene.add(root);
//
renderer = new CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
//
controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
//
baseSprite.onload = function() {
loadMolecule("models/pdb/caffeine.pdb");
createMenu();
};
baseSprite.src = 'textures/sprites/ball.png';
//
window.addEventListener('resize', onWindowResize, false);
}
//
function generateButtonCallback(url) {
return function() {
loadMolecule(url);
};
}
function createMenu() {
for (const m in MOLECULES) {
const button = document.createElement('button');
button.innerHTML = m;
menu.appendChild(button);
const url = "models/pdb/" + MOLECULES[m];
button.addEventListener('click', generateButtonCallback(url), false);
}
const b_a = document.getElementById("b_a");
const b_b = document.getElementById("b_b");
const b_ab = document.getElementById("b_ab");
b_a.addEventListener('click', function() {
visualizationType = 0;
showAtoms();
});
b_b.addEventListener('click', function() {
visualizationType = 1;
showBonds();
});
b_ab.addEventListener('click', function() {
visualizationType = 2;
showAtomsBonds();
});
}
//
function showAtoms() {
for (let i = 0; i < objects.length; i++) {
const object = objects[i];
if (object instanceof CSS3DSprite) {
object.element.style.display = "";
object.visible = true;
} else {
object.element.style.display = "none";
object.visible = false;
}
}
}
function showBonds() {
for (let i = 0; i < objects.length; i++) {
const object = objects[i];
if (object instanceof CSS3DSprite) {
object.element.style.display = "none";
object.visible = false;
} else {
object.element.style.display = "";
object.element.style.height = object.userData.bondLengthFull;
object.visible = true;
}
}
}
function showAtomsBonds() {
for (let i = 0; i < objects.length; i++) {
const object = objects[i];
object.element.style.display = "";
object.visible = true;
if (!(object instanceof CSS3DSprite)) {
object.element.style.height = object.userData.bondLengthShort;
}
}
}
//
function colorify(ctx, width, height, color) {
const r = color.r, g = color.g, b = color.b;
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
for (let i = 0, l = data.length; i < l; i += 4) {
data[i + 0] *= r;
data[i + 1] *= g;
data[i + 2] *= b;
}
ctx.putImageData(imageData, 0, 0);
}
function imageToCanvas(image) {
const width = image.width;
const height = image.height;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, width, height);
return canvas;
}
//
function loadMolecule(url) {
for (let i = 0; i < objects.length; i++) {
const object = objects[i];
object.parent.remove(object);
}
objects.length = 0;
loader.load(url, function(pdb) {
const geometryAtoms = pdb.geometryAtoms;
const geometryBonds = pdb.geometryBonds;
const json = pdb.json;
geometryAtoms.computeBoundingBox();
geometryAtoms.boundingBox.getCenter(offset).negate();
geometryAtoms.translate(offset.x, offset.y, offset.z);
geometryBonds.translate(offset.x, offset.y, offset.z);
const positionAtoms = geometryAtoms.getAttribute('position');
const colorAtoms = geometryAtoms.getAttribute('color');
const position = new v3d.Vector3();
const color = new v3d.Color();
for (let i = 0; i < positionAtoms.count; i++) {
position.fromBufferAttribute(positionAtoms, i);
color.fromBufferAttribute(colorAtoms, i);
const atomJSON = json.atoms[i];
const element = atomJSON[4];
if (!colorSpriteMap[element]) {
const canvas = imageToCanvas(baseSprite);
const context = canvas.getContext('2d');
colorify(context, canvas.width, canvas.height, color);
const dataUrl = canvas.toDataURL();
colorSpriteMap[element] = dataUrl;
}
const colorSprite = colorSpriteMap[element];
const atom = document.createElement('img');
atom.src = colorSprite;
const object = new CSS3DSprite(atom);
object.position.copy(position);
object.position.multiplyScalar(75);
object.matrixAutoUpdate = false;
object.updateMatrix();
root.add(object);
objects.push(object);
}
const positionBonds = geometryBonds.getAttribute('position');
const start = new v3d.Vector3();
const end = new v3d.Vector3();
for (let i = 0; i < positionBonds.count; i += 2) {
start.fromBufferAttribute(positionBonds, i);
end.fromBufferAttribute(positionBonds, i + 1);
start.multiplyScalar(75);
end.multiplyScalar(75);
tmpVec1.subVectors(end, start);
const bondLength = tmpVec1.length() - 50;
//
let bond = document.createElement('div');
bond.className = "bond";
bond.style.height = bondLength + "px";
let object = new CSS3DObject(bond);
object.position.copy(start);
object.position.lerp(end, 0.5);
object.userData.bondLengthShort = bondLength + "px";
object.userData.bondLengthFull = (bondLength + 55) + "px";
//
const axis = tmpVec2.set(0, 1, 0).cross(tmpVec1);
const radians = Math.acos(tmpVec3.set(0, 1, 0).dot(tmpVec4.copy(tmpVec1).normalize()));
const objMatrix = new v3d.Matrix4().makeRotationAxis(axis.normalize(), radians);
object.matrix.copy(objMatrix);
object.quaternion.setFromRotationMatrix(object.matrix);
object.matrixAutoUpdate = false;
object.updateMatrix();
root.add(object);
objects.push(object);
//
bond = document.createElement('div');
bond.className = "bond";
bond.style.height = bondLength + "px";
const joint = new v3d.Object3D(bond);
joint.position.copy(start);
joint.position.lerp(end, 0.5);
joint.matrix.copy(objMatrix);
joint.quaternion.setFromRotationMatrix(joint.matrix);
joint.matrixAutoUpdate = false;
joint.updateMatrix();
object = new CSS3DObject(bond);
object.rotation.y = Math.PI / 2;
object.matrixAutoUpdate = false;
object.updateMatrix();
object.userData.bondLengthShort = bondLength + "px";
object.userData.bondLengthFull = (bondLength + 55) + "px";
object.userData.joint = joint;
joint.add(object);
root.add(joint);
objects.push(object);
}
//console.log("CSS3DObjects:", objects.length);
switch (visualizationType) {
case 0:
showAtoms();
break;
case 1:
showBonds();
break;
case 2:
showAtomsBonds();
break;
}
});
}
//
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
const time = Date.now() * 0.0004;
root.rotation.x = time;
root.rotation.y = time * 0.7;
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手