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

代码语言：html

所属分类：三维

代码描述：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);
          scene.add(light);
        
          const directLight1 = new THREE.DirectionalLight();
          directLight1.castShadow = true;
          directLight1.position.set(20, 13, 12);
          scene.add(directLight1);
        
          const directLight2 = new THREE.DirectionalLight({
            color: 0xd9fbfc,
            intensity: 0.6 });
        
          directLight2.castShadow = true;
          directLight2.position.set(-27, 18, 6);
          scene.add(directLight2);
        }
        
        function drawChameleon() {
          chameleon = new Chameleon();
          scene.add(chameleon.group);
        }
        
        function drawBranch() {
          branch = drawCylinder(0x17B26F, 0.76, 1.12, 2.14, 5);
          branch.position.set(-2.76, -5.67, -7.86);
          branch.rotation.set(rad(85.18), rad(4.14), rad(-20.4));
          branch.scale.set(3.78, 11.92, 2.72);
          branch.castShadow = true;
          branch.receiveShadow = true;
          scene.add(branch);
        }
        
        function drawFly() {
          fly = new Fly();
          scene.add(fly.group);
        }
        
        function onResize() {
          width = window.innerWidth;
          height = window.innerHeight;
          camera.aspect = width / height;
          camera.updateProjectionMatrix();
          renderer.setSize(width, height);
        }
        
        function onMouseMove(event) {
          mouse.x = event.clientX / width * 2 - 1;
          mouse.y = -(event.clientY / height) * 2 + 1;
        }
        
        function onTouchMove(event) {
          event.preventDefault();
          mouse.x = event.touches[0].pageX / width * 2 - 1;
          mouse.y = -(event.touches[0].pageY / height) * 2 + 1;
        }
        
        function rad(degrees) {
          return degrees * (Math.PI / 180);
        }
        
        function drawCylinder(materialColor, rTop, rBottom, height, radialSeg) {
          const geometry = new THREE.CylinderGeometry(rTop, rBottom, height, radialSeg);
          const material = new THREE.MeshStandardMaterial({
            color: materialColor,
            roughness: 1,
            shading: THREE.FlatShading });
        
          const mesh = new THREE.Mesh(geometry, material);
          return mesh;
        }
        
        function animate() {
          requestAnimationFrame(animate);
        
          render();
        }
        
        function render() {
        
          chameleon.changeColor();
          chameleon.moveHead(fly.group.position);
        
          fly.moveWings();
          fly.moveFly();
        
          renderer.render(scene, camera);
        }
        
        class Chameleon {
          constructor() {
            this.group = new THREE.Group();
            this.group.position.set(-1, 3, 2.7);
            this.group.rotation.set(rad(18.84), 0, rad(2.2));
        
            this.material = new THREE.MeshStandardMaterial({
              color: 0x1CCCA3,
              roughness: 1,
              shading: THREE.FlatShading });
        
        
            this.drawHead();
            this.drawBody();
            this.drawTail();
            this.drawLegs();
        
            this.group.traverse(object => {
              if (object instanceof THREE.Mesh) {
                object.castShadow = true;
                object.receiveShadow = true;
              }
            });
          }
          drawHead() {
            const headGeometry = new THREE.SphereGeometry(5, 4, 4);
            this.head = new THREE.Mesh(headGeometry, this.material);
            this.head.rotation.set(rad(90), rad(45), 0);
            this.group.add(this.head);
        
            // draw eyes
            const rightEye = this.drawSkinCylinder(2, 1.3, 1.4, 5);
            rightEye.position.set(3, 1.6, 1.6);
            rightEye.rotation.set(rad(-27.2), rad(-45), rad(90));
            this.head.add(rightEye);
        
            const rightEyeWhite = drawCylinder(0xffffff, 1.26, 0.78, 1.14, 5);
            rightEyeWhite.position.set(0.02, -0.37, -0.06);
            rightEye.add(rightEyeWhite);
        
            const rightEyeBlack = drawCylinder(0x3F3F3F, 0.86, 0.36, 1.14, 5);
            rightEyeBlack.position.set(-0.01, -0.27, -0.01);
            rightEyeWhite.add(rightEyeBlack);
        
            const leftEye = rightEye.clone();
            leftEye.position.set(-1.62, 1.47, -2.92);
            leftEye.rotation.set(rad(25), rad(-225), rad(82.8));
            this.head.add(leftEye);
        
            const leftEyeWhite = rightEyeWhite.clone();
            leftEyeWhite.position.set(0.02, -0.37, -0.06);
       .........完整代码请登录后点击上方下载按钮下载查看