Add 3D model.

docs/source/PCs/ARM/RK3568/Manuals/Hardware/CS10600-RK3568-070P.rst

@@ -467,4 +467,6 @@ product measurements.
 
    |productP| *Technical Drawing*
 
+.. include:: /PCs/Shared/Hardware/three_d
+
 .. include:: /PCs/Shared/support

docs/source/PCs/Shared/Hardware/three_d

@@ -0,0 +1,8 @@
+3D Model
+========
+
+|product| 3D model can be viewed in the online doc in a web browser, if you are reading from the **PDF** version, please visit the `online doc <https://docs.chipsee.com/>`_.
+
+.. raw:: html
+
+   <button class="btn btn-outline-primary btn-lg html-only" id="3d-link" onclick="handleThreeDButtonClick()">3D Model</button>

docs/source/ThreeD/three_d_model.rst

@@ -0,0 +1,10 @@
+:orphan:
+
+3D Model
+========
+
+Loading... Large model may take some time...
+
+.. raw:: html
+
+    <script type="module" src="/_static/js/three_d.js"></script>

docs/source/_static/js/material_custom.js

@@ -94,4 +94,15 @@ const sidebar_item = document.querySelector(".md-nav.md-nav--secondary > .md-nav
 
 if (sidebar_item != null){
     sidebar_menu.style.backgroundColor = "#f4f7f7";
-}
+}
+
+
+// Add query param to let 3D js know what product it needs to display, open 3D page.
+function handleThreeDButtonClick() {
+    const link_elem = document.getElementById("3d-link");
+    const productPN = document.querySelector("#d-model>p").textContent.split(' ')[0];
+    if (link_elem && productPN) {
+        const href = `/ThreeD/three_d_model.html?productModel=${productPN}`;
+        window.open(href, '_blank');
+    }
+}

docs/source/_static/js/three_d.js

@@ -0,0 +1,99 @@
+import * as THREE from "three";
+
+import {OrbitControls} from "three/addons/controls/OrbitControls.js";
+import {FBXLoader} from "three/addons/loaders/FBXLoader.js";
+
+// Canvas
+document.addEventListener('DOMContentLoaded', () => {
+  // Remove this element from Sphinx template layout to make the canvas full screen
+  document.querySelector(".md-tabs").remove();
+
+  // There is a rst include file in every hardware document, that adds a button, and when that page is loaded
+  // the JS on that page will add the query parameter to the button/h3/section id, to identify what product it is.
+  // the query parameter is used here, to let three.js to pick up the correct 3D model file in the _static folder.
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const params = Object.fromEntries(urlSearchParams.entries());
+  const fbx_file = "/_static/3d_models/" + params.productModel + ".fbx";
+
+  let camera, scene, renderer;
+
+  init();
+  animate();
+
+  function init() {
+    // Add 3D view to HTML document tree and remove some node from Sphinx layout
+    const container = document.createElement('div');
+    document.querySelector(".md-container").appendChild(container);
+    document.querySelector(".md-main").remove();
+
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
+    camera.position.set(100, 200, 300);
+
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0xa0a0a0);
+    scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);
+
+    const hemiLight = new THREE.HemisphereLight(0xdddddd, 0x666666, 6.5);
+    hemiLight.position.set(0, 200, 0);
+    scene.add(hemiLight);
+
+    const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
+    dirLight.position.set(0, 200, 100);
+    dirLight.castShadow = true;
+    dirLight.shadow.camera.top = 180;
+    dirLight.shadow.camera.bottom = -100;
+    dirLight.shadow.camera.left = -120;
+    dirLight.shadow.camera.right = 120;
+    scene.add(dirLight);
+
+    // ground
+    const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000), new THREE.MeshPhongMaterial({
+      color: 0x999999,
+      depthWrite: false
+    }));
+    mesh.rotation.x = -Math.PI / 2;
+    mesh.receiveShadow = true;
+    scene.add(mesh);
+
+    // Add grid to view
+    const grid = new THREE.GridHelper(100, 3, 0x000000, 0x000000);
+    grid.material.opacity = 0.8;
+    grid.material.transparent = true;
+    scene.add(grid);
+
+    // Load 3D model
+    const loader = new FBXLoader();
+    loader.load(fbx_file, function (object) {
+      object.traverse(function (child) {
+        if (child.isMesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+        }
+      });
+      scene.add(object);
+    });
+
+    renderer = new THREE.WebGLRenderer({antialias: true});
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.shadowMap.enabled = true;
+    container.appendChild(renderer.domElement);
+
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.target.set(0, 0, 0);
+    controls.update();
+
+    window.addEventListener('resize', onWindowResize);
+  }
+
+  function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+  }
+
+  function animate() {
+    requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+  }
+});

docs/source/_templates/layout.html

@@ -6,6 +6,31 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 {%- endblock %}
 
+{%- block extrahead %} 
+    <!-- 
+    <script async src="/_static/js/three0.155/es-module-shims-1.8.0.js"></script>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "/_static/js/three0.155/three.module.min.js",
+          "three/addons/": "/_static/js/three0.155/examples/jsm/"
+        }
+      }
+    </script> 
+    -->
+    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://unpkg.com/[email protected]/build/three.module.js",
+          "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+        }
+      }
+    </script>
+{% endblock %}
+
 {%- block footer_scripts %}
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
     <script async src="{{ pathto('_static/js/material_custom.js', 1) }}"></script>