物体 Mesh

yyhsong · Dec 1, 2022 · 59d7d01 · 59d7d01
1 parent ee7dfa8
commit 59d7d01
Showing 1 changed file with 101 additions and 0 deletions.
diff --git a/courses/chapter02/mesh.html b/courses/chapter02/mesh.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>网格Mesh - iThreeJS</title>
+        <style type="text/css">
+			* {margin:0;padding:0;}
+			html, body {overflow:hidden;}
+		</style>
+    </head>
+
+    <body>
+
+        <script type="text/javascript" src="../../assets/js/three.min.js"></script>
+        <script type="text/javascript" src="../../assets/js/utils/SceneUtils.js"></script>
+        <script type="text/javascript" src="../../assets/js/utils/dat.gui.min.js"></script>
+
+        <script type="text/javascript" src="../js/util.js"></script>
+        <script type="text/javascript">
+            init();
+            function init() {      
+                // create scene
+                const scene = new THREE.Scene();
+
+                // create helper
+                const aHelper = new THREE.AxesHelper(100);
+                scene.add(aHelper);
+
+                // create camere
+                const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
+                camera.position.set(50, 50, 50);
+                camera.lookAt(scene.position);
+
+                // create renderer
+                const renderer = new THREE.WebGLRenderer();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+                renderer.setClearColor(new THREE.Color(0x000000));
+
+                // create mesh
+                const ballGeometry = new THREE.SphereGeometry(20, 12, 12);
+                const ballMaterials = [
+                    new THREE.MeshLambertMaterial({
+                        color: 0x44ff44,
+                        opacity: 0.6,
+                        transparent: true
+                    }),
+                    new THREE.MeshBasicMaterial({
+                        color: 0xffff00,
+                        wireframe: true
+                    })
+                ];
+                // 创建多种材质的网格对象
+                const ball = THREE.SceneUtils.createMultiMaterialObject(ballGeometry, ballMaterials);
+                scene.add(ball);
+
+                // create light
+                const aLight = new THREE.AmbientLight(0x3c3c3c);
+                scene.add(aLight);
+
+                // add the renderer to the html element
+                document.body.appendChild(renderer.domElement);
+
+                // controls
+                let ctrls = {
+                    rotateY: 0,
+                    translateY: 0,
+                    scale: 1,
+                    visible: true,
+                    isVisible: function() {
+                        if(this.visible) {
+                            ball.visible = true;
+                        }else {
+                            ball.visible = false;
+                        }
+                        this.visible = !this.visible;
+                    }
+                };
+
+                const gui = new dat.GUI();
+                gui.add(ctrls, 'rotateY', 0, 180).onChange(function() {
+                    ball.rotateY(ctrls.rotateY);
+                });
+                gui.add(ctrls, 'translateY', -1, 1).onChange(() => {
+                    ball.translateY(ctrls.translateY);
+                });
+                gui.add(ctrls, 'scale', 0.5, 3).onChange(() => {
+                    ball.scale.set(ctrls.scale, ctrls.scale, ctrls.scale);
+                });
+                gui.add(ctrls, 'isVisible');
+
+                // render
+                render();
+                function render() {
+                    requestAnimationFrame(render);
+                    renderer.render(scene, camera);
+                };
+            }
+        </script>
+    </body>
+</html>