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

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

代码语言：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() {
     .........完整代码请登录后点击上方下载按钮下载查看