Py.Cafe

kolibril13/

tutorial_juneD

Create a "Hi" Widget with anywidget

DocsPricing
  • app.py
  • requirements.txt
  • widget.css
  • widget.js
widget.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
import * as THREE from "https://esm.sh/three";
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls.js";

function render({ model, el }) {

  let container = document.createElement("div");
  container.style.height = "800px";
  container.style.width = "800px";
  el.appendChild(container);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color("white");
  const camera = new THREE.PerspectiveCamera(
    75,
    container.clientWidth / container.clientHeight,
    0.1,
    1000
  );
  camera.position.z = 2;
  camera.position.y = 1;  
  camera.lookAt(0, 0, 0);  

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  container.appendChild(renderer.domElement);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;
  controls.screenSpacePanning = false;
  controls.minDistance = 1;
  controls.maxDistance = 50;

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: "orange" });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  animate();

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }

}

export default { render };