-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3D_brain.html
122 lines (116 loc) · 4.76 KB
/
3D_brain.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<title>Three.js TypeScript Tutorials by Sean Bradley : https://sbcode.net/threejs</title>
<meta name="author" content="Sean Bradley (modified by Brian M Schilder)">
<link rel="stylesheet" href="./3D_brain/main.css">
<!-- Original source: https://sbcode.net/threejs/loaders-stl/#useful-links -->
<!-- Documentation: https://threejs.org/docs/#api/en/core/Object3D.rotation -->
<!-- Mesh options test browser: https://threejs.org/docs/scenes/material-browser.html#MeshPhongMaterial -->
<style>
body {
overflow: hidden;
margin: 0px;
}
#progressBar {
width: 500px;
height: 24px;
position: absolute;
left: 50%;
top: 10px;
margin-left: -250px;
}
</style>
</head>
<body>
<div>
<h1 style="margin-left: 10vw;">3D Brain Model</h1>
<h4 style="margin-left: 10vw;">This is my brain. I love gooooold!</h4>
</div>
<progress value="0" max="100" id="progressBar"></progress>
<script type="module">
import * as THREE from './3D_brain/build/three.module.js';
import { OrbitControls } from './3D_brain/jsm/controls/OrbitControls.js';
import { STLLoader } from './3D_brain/jsm/loaders/STLLoader.js';
import Stats from './3D_brain/jsm/libs/stats.module.js';
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// Add light
var light = new THREE.DirectionalLight();
light.position.set(2.5, 7.5, 100);
scene.add(light);
// Add more light
var light = new THREE.DirectionalLight();
light.position.set(-2.5, -7.5, -100);
scene.add(light);
// Camera position
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 20.1, 1000);
camera.position.z = 150;
const renderer = new THREE.WebGLRenderer();
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Allow users to move object
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// const envTexture = new THREE.CubeTextureLoader().load(["img/px_25.jpg", "img/nx_25.jpg", "img/py_25.jpg", "img/ny_25.jpg", "img/pz_25.jpg", "img/nz_25.jpg"]);
// const envTexture = new THREE.CubeTextureLoader().load(["/3D_brain/textures/lava/lavatile.jpeg", "/3D_brain/textures/lava/cloud.png","/3D_brain/textures/lava/lavatile.jpeg", "/3D_brain/textures/lava/cloud.png","/3D_brain/textures/lava/lavatile.jpeg", "/3D_brain/textures/lava/cloud.png"]);
// envTexture.mapping = THREE.CubeReflectionMapping;
const material = new THREE.MeshPhysicalMaterial({
opacity: 1,
// color: 0xb2ffc8,
color: 0xd4af37, //Gold
// envMap: envTexture,
metalness: .8,
roughness: 0.5,
transparent: false,
// transmission: 0.1, //affect opacity
side: THREE.DoubleSide,
clearcoat: 1.0,
clearcoatRoughness: .25
});
const loader = new STLLoader();
let mesh
loader.load('./3D_brain/models/stl/mybrain.stl', function (geometry) {
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.set(0, 0, 0);
mesh.rotation.set(1.4,3.1,0)
progressBar.style.display = "none";
}, (xhr) => {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
progressBar.value = percentComplete;
progressBar.style.display = "block";
}
}, (error) => {
console.log(error);
});
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
///// Show some stats on the upper left corner
const stats = Stats();
document.body.appendChild(stats.dom);
var animate = function () {
requestAnimationFrame(animate);
controls.update();
if(mesh){
// mesh.rotation.y+=.0005
mesh.rotation.z+=.0025
}
render();
stats.update();
};
function render() {
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>