three实现三个方块小人效果代码-html代码-BFW代码库

three实现三个方块小人效果代码

代码语言：html

所属分类：三维

代码描述：three实现三个方块小人效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
        	box-sizing: border-box;
        }
        
        body {
        	margin: 0;
        	min-height: 100vh;
        }
    </style>



</head>

<body>
    <canvas class="webgl"></canvas>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
    <script>
        const canvas = document.querySelector('.webgl')
        const scene = new THREE.Scene()
        
        scene.background = new THREE.Color(0x1d1e21)
        
        const sizes = {
          width: window.innerWidth,
          height: window.innerHeight
        }
        
        // Helpers
        const degreesToRadians = (degrees) => {
        	return degrees * (Math.PI / 180)
        }
        
        const center = (group) => {
        	new THREE.Box3().setFromObject(group).getCenter( group.position ).multiplyScalar( - 1 )
        	scene.add(group)
        }
        
        const random = (min, max, float = false) => {
          const val = Math.random() * (max - min) + min
        
          if (float) {
            return val
          }
        
          return Math.floor(val)
        }
        
        /**
         * Renderer
         */
        const renderer = new THREE.WebGLRenderer({ canvas })
        
        const render = () => {
        	renderer.setSize(sizes.width, sizes.height)
        	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
        	renderer.render(scene, camera)
        }
        
        // Camera
        const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000)
        camera.position.z = 30
        scene.add(camera)
        
        window.addEventListener('resize', () =>
        {
            // Update sizes
            sizes.width = window.innerWidth
            sizes.height = window.innerHeight
        
            // Update camera
            camera.aspect = sizes.width / sizes.height
            camera.updateProjectionMatrix()
        
            // Update renderer
            render(renderer)
        })
        
        // Lighting
        const lightAmbient = new THREE.AmbientLight(0x9eaeff, 0.5)
        scene.add(lightAmbient)
        
        const lightDirectional = new THREE.DirectionalLight(0xffffff, 1)
        scene.add(lightDirectional)
        
        // Move the light source towards us
        lightDirectional.position.set(5, 5, 50)
        
        const floorGroup = new THREE.Group()
        scene.add(floorGroup)
        
        // Figure
        class Figure {
        	constructor(params) {
        		this.params = {
        			x: 0,
        			y: 0,
        			z: 0,
        			ry: 0,
        			...params
        		}
        		
        		this.dimensions = {
        			head: random(4, 8),
        			bodyWidth: random(3, 6),
        			bodyHeight: random(2, 8),
        			legHeight: random(1, 5)
        		}
        		
        		// Create group and add to scene
        		this.floorGroup = new THREE.Group()
        		this.group = new THREE.Group()
        		this.floorGroup.add(this.group)
        		scene.add(this.floorGroup)
        		
        		// Position according to params
        		this.group.position.x = this.params.x
        		// this.group.position.y = this.params.y
        		this.group.position.z = this.params.z
        		this.group.rotation.y = this.params.ry
        		
        		// Material
        		this.headHue = random(0, 260)
        		this.bodyHue = random(0, 260)
        		this.headMaterial = new THREE.MeshLambertMaterial({ color: `hsl(${this.headHue}, 30%, 50%)` })
        		this.bodyMaterial = new THREE.MeshLambertMaterial({ color: `hsl(${this.bodyHue}, 85%, 50%)` })
        	}
        	
        	createBody() {
        		this.body = new THREE.Group()
        		const geometry = new THREE.BoxGeometry(this.dimensions.bodyWidth, this.dimensions.bodyHeight, this.dimensions.bodyWidth)
        		const bodyMain = new THREE.Mesh(geometry, this.bodyMaterial)
        		
        		this.body.add(bodyMain)
        		this.group.add(this.body)
        		
        		this.createLegs()
        	}
        	
        	createHead() {
        .........完整代码请登录后点击上方下载按钮下载查看