-
Notifications
You must be signed in to change notification settings - Fork 1
/
3d.js
81 lines (45 loc) · 1.36 KB
/
3d.js
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
// three.js front page spinning cube with minor changes:
import * as THREE from 'three';
let camera, scene, renderer;
let geometry, material, mesh;
init();
function init() {
camera = new THREE.PerspectiveCamera( 42, 1, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setAnimationLoop( animation );
}
function animation( time ) {
// do not render if not in DOM:
if( !renderer.domElement.parentNode ) return;
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render( scene, camera );
}
// respond to size changes:
function resize() {
const container = renderer.domElement.parentNode;
if( container ) {
const width = container.offsetWidth;
const height = container.offsetHeight;
renderer.setSize( width, height );
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}
window.addEventListener( 'resize', resize );
resize();
// expose a function to interact with react.js:
export function mount( container ) {
if( container ) {
container.insertBefore( renderer.domElement, container.firstChild );
resize();
} else {
renderer.domElement.remove();
}
}