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
















网友评论0