three绘制一个三维铁塔效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three绘制一个三维铁塔效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
              margin: 0;
              background-image: radial-gradient(ellipse at left, #000000, #000000), radial-gradient(ellipse at right, #000000, #000000);
            }
    </style>


</head>

<body>
    <div id="myCanvas"></div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
    <script>
        'use strict';
        
        /**
        * default
        **/
        let scene = null,
        camera = null,
        renderer = null,
        controls = null,
        tokyotower = null,
        width = 0,
        height = 0;
        
        /**
        * init
        **/
        function init() {
          width = window.innerWidth,
          height = window.innerHeight;
          scene = new THREE.Scene();
          camera = new THREE.PerspectiveCamera(45, width / height);
          camera.position.set(0, 160, 1500);
          renderer = new THREE.WebGLRenderer({
            alpha: true });
        
          renderer.setPixelRatio(
          window.devicePixelRatio);
        
          renderer.setSize(width, height);
          renderer.shadowMap.enabled = true;
          renderer.shadowMap.type = THREE.PCFSoftShadowMap;
          controls = new THREE.OrbitControls(camera, renderer.domElement);
        
          addLights();
          drawTokyotower();
        
          document.getElementById('myCanvas').appendChild(renderer.domElement);
          window.addEventListener('resize', onResize, false);
        }
        
        /**
        * lights
        **/
        function addLights() {
          const directLight1 = new THREE.DirectionalLight(0xffffff);
          directLight1.castShadow = true;
          directLight1.position.set(0, 1, 1);
          scene.add(directLight1);
          const pointLight = new THREE.PointLight(0xffffff, 2, 1000);
          scene.add(pointLight);
        }
        
        /**
        * draw
        **/
        function drawTokyotower() {
          tokyotower = new Tokyotower();
          scene.add(tokyotower.group);
        }
        
        /**
        * resize
        **/
        function onResize() {
          width = window.innerWidth;
          height = window.innerHeight;
          camera.aspect = width / height;
          camera.updateProjectionMatrix();
          renderer.setSize(width, height);
        }
        
        /**
        * degree
        **/
        function degree(degrees) {
          return degrees * (Math.PI / 180);
        }
        
        /**
        * animate
        **/
        function animate() {
          requestAnimationFrame(animate);
          render();
        }
        
        /**
        * render
        **/
        function render() {
          tokyotower.moveBody();
          renderer.render(scene, camera);
        }
        
        /**
        * Tokyotower
        **/
        class Tokyotower {
          constructor() {
            this.group = new THREE.Group();
            this.group.position.set(0, -150, 0);
            this.group.rotation.set(degree(0), degree(45), degree(0));
            this.wingangle = 0;
            this.bodyangle = 0;
            this.drawBody();
          }
          drawBody() {
            function Root(tga, tgb, tgc, tgd, tge, px, py, pz, rx, ry, rz, group) {
              const branch_geometry = new THREE.TorusGeometry(tga, tgb, tgc, tgd, degree(tge));
              const branch_material = new THREE.MeshPhongMaterial({ color: 0xf41322 });
              const branch_mesh = new THREE.Mesh(branch_geometry, branch_material);
              branch_mesh.position.set(px, py, pz);
              branch_mesh.rotation.set(degree(rx), degree(ry), degree(rz));
              group.add(branch_mesh);
            }
            Root(600, 5, 50, 50, 40, -650, 150, 0, 0, 0, -50, this.group);
            Root(600, 5, 50, 50, 40, 650, 150, 0, 0, 180, -50, this.group);
            Root(600, 5, 50, 50, 40, 0, 150, -650, 0, -90, -50, this.group);
            Root(600, 5, 50, 50, 40, 0, 150, 650, 0, 90, -50, this.group);
        
            Root(600, 5, 50, 50, 30, -456, 82, 456, 0, 45, -30, this.group);
            Root(600, 5, 50, 50, 30, -456, 82, -456, 0, -45, -30, this.group);
            Root(600, 5, 50, 50, 30, 456, 82, 456, 0, -45, 180, this.group);
            Root(600, 5, 50, 50, 30, 456, 82, -456, 0, 45, 180, this.group);
        
            Root(600, 5, 50, 50, 30, -222, 102, 608, -5, 70, -30, this.group);
            Root(600, 5, 50, 50, 30, -222, 102, -608, 5, -70, -30, this.group);
            Root(600, 5, 50, 50, 30, 222, 102, 608, -5, -70, 180, this.group);
            Root(600, 5, 50, 50, 30, 222, 102, -608, 5, 70, 180, this.group);
        
            Root(600, 5, 50, 50, 30, -567, 82, 320, 5, 210, -175, this.group);
            Root(600, 5, 50, 50, 30, -567, 82, -320, -5, -210, -175, this.group);
            Root(600, 5, 50, 50, 30, 567, 82, 320, 5, -210, -35, this.group);
            Root(600, 5, 50, 50, 30, 567, 82, -320, -5, 210, -35, this.group);
        
            Root(120, 5, 50, 50, 180, -135, -315, 135, 135, 38, 210, this.group);
            Root(120, 5, 50, 50, 180, 135, -315, -135, 225, 38, 150, this.group);
            Root(120, 5, 50, 50, 180, 135, -315, 135, 135, -38, 150, this.group);
            Root(120, 5, 50, 50, 180, -135, -315, -135, 225, -38, 210, this.group);
        
            function Line_red(px, py, pz, rx, ry, rz, width, color, group) {
              const geometry = new THREE.CylinderGeometry(5, 5, width, 5);
              const material = new THREE.MeshPhongMaterial({ color: color });
              const cylinder = new THREE.Mesh(geometry, material);
              cylinder.position.set(px, py, pz);
              cylinder.rotation.set(degree(rx), degree(ry), degree(rz));
              group.add(cylinder);
            }
        
            function Line_white(px, py, pz, rx, ry, rz, width, color, group) {
              const geometry = new THREE.CylinderGeometry(6, 6, width, 5);
              const material = new THREE.MeshPhongMaterial({ color: color });
     .........完整代码请登录后点击上方下载按钮下载查看