three实现三维变色龙变色和苍蝇飞行动画效果代码

代码语言:html

所属分类:三维

代码描述:three实现三维变色龙变色和苍蝇飞行动画效果代码

代码标签: three 变色龙 苍蝇 三维

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

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

<head>

    <meta charset="UTF-8">



    <style>
        body {
          margin: 0;
        }
        #world {
          position: absolute;
          overflow: hidden;
          width: 100%;
          height: 100%;
        }
    </style>



</head>

<body>
    <div id='world'></div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script>
        'use strict';
        
        let scene,
        camera,
        renderer,
        raycaster,
        controls,
        mouse;
        
        let chameleon,
        branch,
        fly;
        
        let width,
        height;
        
        function init() {
          width = window.innerWidth,
          height = window.innerHeight;
        
          scene = new THREE.Scene();
          camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
          camera.position.set(30, 0, 10);
          camera.lookAt(scene.position);
        
          renderer = new THREE.WebGLRenderer();
          renderer.setPixelRatio(window.devicePixelRatio);
          renderer.setSize(width, height);
          renderer.setClearColor(0xF2A9B4);
          renderer.shadowMap.enabled = true;
          renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        
          // controls = new THREE.OrbitControls(camera, renderer.domElement);
        
          raycaster = new THREE.Raycaster();
          mouse = new THREE.Vector2();
        
          addLights();
          drawChameleon();
          drawBranch();
          drawFly();
        
          document.getElementById('world').appendChild(renderer.domElement);
        
          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('touchmove', onTouchMove);
          window.addEventListener('resize', onResize, false);
        }
        
        function addLights() {
          const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
          sce.........完整代码请登录后点击上方下载按钮下载查看

网友评论0